Django+前端+数据库Day4部门管理

目录

从安装django到创建完数据库连接

写具体页面

depart_list页面

views

html

添加页面

views

html

删除部门

views

编辑部门

urls

views

html


从安装django到创建完数据库连接

1.安装django
pip install django

2.创建项目

3.配置环境
settings删除

4.创建app
python manage.py startapp app01

5.注册app
settings里
‘app01.apps.App01Config’

6.urls.py

7.views.py

8.安装第三方模块
pip install mysqlclient

9.自行创建数据库

10django 连接数据库
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'day3',  # 数据库名字
        'USER': 'root',#账户名
        'PASSWORD': '123456',#账户密码
        'HOST': '127.0.0.1',  # 那台机器安装了MySQL
        'PORT': 3306,}
11.models.py
python manage.py makemigrations
python manage.py migrate

写具体页面

depart_list页面

views

def depart_list(request):
    '''部门列表'''
    return render(request, 'depart_list.html')

html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
{#表头#}
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">部门管理</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
           <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
             aria-haspopup="true" aria-expanded="false">kzy <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">个人资料</a></li>
            <li><a href="#">我的信息</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>


{#表#}
<div>
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="#">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建部门
            </a>
        </div>
        <div class="bs-example" data-example-id="panel-without-body-with-table">
            <div class="panel panel-default">
              <div class="panel-heading">
                  <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                  部门列表
              </div>
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>1</th>
                    <td>销售部</td>
                    <td>
                        <a class="btn btn-primary btn-xs">编辑</a>
                        <a class="btn btn-danger btn-xs">删除</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js'%}"></script>
</body>
</html>

添加页面

views

重回定向导入redirect

def depart_add(request):
    '''添加页面'''
    if request.method =="GET":
        return render(request, 'depart_add.html')
    # 获取用户POST提交过来的数据
    title = request.POST.get('title')
    # 保存到数据库
    models.Department.objects.create(title=title)
    # 重定向回部门列表
    return redirect("/depart/list/")

html

1将depart_list的导航条css,js直接导入

2将面板拿来

3从bootcss中拿一个表单

如果报这个错误应在form报表但里加上

{% csrf_token %}

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">部门管理</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">kzy <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">我的信息</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div>
    <div class="container">
        <div class="panel panel-default">
                <div class="panel-heading">
                    新建部门
                </div>
        <div class="panel-body">
            <form method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label>标题</label>
                    <input type="text" class="form-control" placeholder="标题" name="title"/>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
</body>
</html>

删除部门

views

def depart_delete(request):
    '''删除部门'''
    # 获取ID
    nid = request.GET.get('nid')
    # 删除
    models.Department.objects.filter(id=nid).delete()
    return redirect("/depart/list/")

在depart_list页面每个删除后面添加连接

<a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>

编辑部门

urls

添加正则表达式

如在depart和edtai中间添加nid数据http://127.0.0.1:8000/depart/4/edit/

path('depart/<int:nid>/edit/', views.depart_edit),

在depart_list页面每个编辑后面添加连接

<a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
​​​

views

def depart_edit(request, nid):
    """ 修改部门 """
    if request.method == "GET":
        # 根据nid,获取他的数据 [obj,]
        row_object = models.Department.objects.filter(id=nid).first()
        # print(row_object.id, row_object.title)
        return render(request, 'depart_edit.html', {"row_object": row_object})
    # 获取用户提交的标题
    title = request.POST.get("title")
    # 根据ID找到数据库中的数据并进行更新
    models.Department.objects.filter(id=nid).update(title=title)
    # 重定向回部门列表
    return redirect("/depart/list/")

html

在add的基础上进行修改

将修改输入框内自动返回部门列表的数据value="{{ row_object.title }}"

<input type="text" class="form-control" placeholder="标题" name="title" value="{{ row_object.title }}"/>

  • 31
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值