2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

基于Pycharm的Django学习 —— 项目实战（Form和ModelForm）_pycharmdjango项目实战

作者：2023面试高手 | 2024-06-15 19:32:56

踩

pycharmdjango项目实战

项目实战

号外号外，基于Pycharm的Django学习，项目实战来啦！

项目开发流程

实战之前，我们先来结合前面学习的知识，捋一捋整个项目开发的流程：

新建项目
创建app并注册
设计表结构
在MYSQL生成表
静态文件管理
代码编写
测试

项目准备工作

上述1-5，其实我们在之前就已经接触过了，所以在这个项目实战中，就当作是准备工作，大家先提前完成，有不懂的也可以看我之前写的博客。

第一步：新建项目

在这里插入图片描述

第二步：创建app并注册

在这里插入图片描述

第三步：设计表结构

from django.db import models

# Create your models here.


class Department(models.Model):
    """部门表"""
    # verbose_name注解 相当于给我们程序员自己看代码时的字段含义提示
    title = models.CharField(verbose_name="部门", max_length=32)


class UserInfo(models.Model):
    """员工表"""
    name = models.CharField(verbose_name="姓名", max_length=16)
    password = models.CharField(verbose_name="密码", max_length=64)
    age = models.IntegerField(verbose_name="年龄")
    # max_digits表示最大位数 decimal_places表示小数位数 default表示默认值
    account = models.DecimalField(verbose_name="账户", max_digits=10, decimal_places=2, default=0)
    create_time = models.DateTimeField(verbose_name="入职时间")

    # 存入外键 表示员工所属部门ID 节省存储字节数 需要加入约束 即只能是部门表中已经存在的id 并且需要设置当部门表被删除 其为级联删除或者可以置空
    # 存入名称 表示员工所属部门名称 主要用于优化检索速度

    # to表示和哪张表连接  to_field表示和哪个字段连接 on_delete表示部门表删除时员工表做出的操作
    depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.CASCADE)

    # Django约束 由于性别只有男和女 所以可以通过choices选择哪一些
    gender_choices = (
        (1, "男"),
        (2, "女")
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

第四步：在MYSQL生成表

DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.mysql',
    # 数据库名字
    'NAME':'写自己的名字',
    # 用户名
    'USER': 'root',
    # 密码
    'PASSWORD': '写自己的密码',
    # 主机
    'HOST': 'localhost',
    # 端口
    'PORT': '3306',
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

python manage.py makemigrations
python manage.py migrate
1
2

在这里插入图片描述

第五步：静态文件管理

在这里插入图片描述

项目部门管理

UI设计

先看一下页面大致UI设计：

在这里插入图片描述

depart_list

于是开始编写页面：

在这里插入图片描述

页面整体布局采用的是bootstrap框架，上面的是一个导航条，下面的是一个面板加表格的结构，先使用的静态数据进行测试页面。

大部分需要实现跳转的，哪怕长得再像按钮，其实都是一个a标签，然后设置class为btn属性。

{% load static %}

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--rel="stylesheet"不能缺少 否则显示不出来样式 rel属性就是指明你链进来的对象是个什么东西 stylesheet表示是样式表-->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.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="#">联通用户管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/depart/list/">部门管理</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="true"><span
                            class="glyphicon glyphicon-user"></span>
                        个人信息<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span
                                class="glyphicon glyphicon-tree-conifer"></span>
                            昵称:王晓曼</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><span
                                class="glyphicon glyphicon-music"></span>
                            个性签名:关关难过关关过，前路漫漫亦灿灿。</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div>
    <div class="container">
        <div style="margin-bottom:20px">
            <!--span后一个换行使得字体图标和文字有一点空隙-->
            <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-plus-sign"></span>
                新建部门</a>
        </div>
        <!--面板＋表格-->
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-th-list"></span>
                    部门列表
                </div>
                <!--可以直接在浏览器中选中元素 copy element-->
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>销售部</td>
                        <td>
                            <a class="btn btn-success btn-xs">编辑</a>
                            <a class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>技术部</td>
                        <td>
                            <a class="btn btn-success btn-xs">编辑</a>
                            <a class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>广告部</td>
                        <td>
                            <a class="btn btn-success btn-xs">编辑</a>
                            <a class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

在这里插入图片描述
下面将静态数据换成从数据库进行获取的数据。

{% load static %}

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--rel="stylesheet"不能缺少 否则显示不出来样式 rel属性就是指明你链进来的对象是个什么东西 stylesheet表示是样式表-->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.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="#">联通用户管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/depart/list/">部门管理</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="true"><span
                            class="glyphicon glyphicon-user"></span>
                        个人信息<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span
                                class="glyphicon glyphicon-tree-conifer"></span>
                            昵称:王晓曼</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><span
                                class="glyphicon glyphicon-music"></span>
                            个性签名:关关难过关关过，前路漫漫亦灿灿。</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div>
    <div class="container">
        <div style="margin-bottom:20px">
            <!--span后一个换行使得字体图标和文字有一点空隙-->
            <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-plus-sign"></span>
                新建部门</a>
        </div>
        <!--面板＋表格-->
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-th-list"></span>
                    部门列表
                </div>
                <!--可以直接在浏览器中选中元素 copy element-->
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for data in data_list %}
                    <tr>
                        <th scope="row">{{data.id}}</th>
                        <td>{{data.title}}</td>
                        <td>
                            <a class="btn btn-success btn-xs">编辑</a>
                            <a class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

效果和上述一样，只不过这里的数据是从数据库来的，更加符合开发。

在这里插入图片描述

模板继承

我们在访问一个网站，比如淘宝、京东时，我们会发现，其实每次实现页面跳转的时候，它的每一个页面的导航条都是相同的，那如果每一个页面都写同样的内容，你会不会觉得很繁琐啊，那么怎么办呢？

模板继承！

导航条：layout.html

{% load static %}

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--rel="stylesheet"不能缺少 否则显示不出来样式 rel属性就是指明你链进来的对象是个什么东西 stylesheet表示是样式表-->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.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="#">联通用户管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/depart/list/">部门管理</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="true"><span
                            class="glyphicon glyphicon-user"></span>
                        个人信息<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span
                                class="glyphicon glyphicon-tree-conifer"></span>
                            昵称:王晓曼</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><span
                                class="glyphicon glyphicon-music"></span>
                            个性签名:关关难过关关过，前路漫漫亦灿灿。</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div>
  <!--设置居中-->
  <div class="container">
    {% block content %}{% endblock %}
  </div>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

添加页面：depart_add.html

{% extends 'layout.html' %}

{% block content %}
<!--添加该页面内容-->
{% endblock %}
1
2
3
4
5

这样就可以了，当然，如果对其有多处改动，那也可以多加几个下面部分：

{% block 名称 %}
<!--添加该页面内容-->
{% endblock %}
1
2
3

测试结果如下：

在这里插入图片描述

depart_add

模板继承测试成功后，下面开始正式编写depart_add页面的编写了。

添加页面的主体是面板加表单设计。

在这里插入图片描述

{% extends 'layout.html' %}

{% block content %}
<!--添加该页面内容-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">新建部门</h3>
    </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>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述
基础样式出来了后，我们就需要继续实现页面跳转。

def depart_add(request):
    # 如果是get请求
    if request.method == "GET":
        return render(request, "depart_add.html")
    # 如果是post请求 获取用户提交的数据
    title = request.POST.get("title")
    # 将数据加入到数据库 （此处默认数据都是合法的 后面用Form和ModelForm实现）
    models.Department.objects.create(title=title)
    # 重定向到用户列表
    return redirect("/depart/list/")
1
2
3
4
5
6
7
8
9
10

有没有发现把我们前面学习的东西都用起来了？
在这里插入图片描述

depart_delete

是不是很有成就感呢？下面来写一个删除吧，和上一篇案例中的删除大同小异奥！

首先要在depart_list中找到删除对应的位置，然后实现url跳转。

在这里插入图片描述

def depart_delete(request):
    # 获取需要删除的id
    nid = request.GET.get("nid")
    # 在数据库删除对应内容
    models.Department.objects.filter(id=nid).delete()
    # 重新返回列表展示页面
    return redirect("/depart/list/")
1
2
3
4
5
6
7

在这里插入图片描述

此处相当于更改为跳转到url为/depart/delete的位置，并且将用户id传递过来，在urls.py文件中的url - 视图函数对应中，可以知道其对应会执行depart_delete函数，于是获取参数、删除内容后，重定向到展示页面，整个流程一气呵成。

depart_edit

编辑页面，我们想想它长什么样子，其和我们新建部门页面应该差不多，但是差别在于，编辑的时候，你点进去的时候，部门的默认值是原来需要编辑的内容。

有了id有了一切，传id。

在这里插入图片描述

def depart_edit(request, nid):
    # 根据nid获取数据
    edit_data = models.Department.objects.filter(id=nid).first()
    return render(request, "depart_edit.html", {"edit_data": edit_data})
1
2
3
4

在这里插入图片描述

{% extends 'layout.html' %}

{% block content %}
<!--添加该页面内容-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">新建部门</h3>
    </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" value="{{edit_data.title}}">
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</div>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

再来完善一下页面跳转。

def depart_edit(request, nid):
    # 如果是get请求
    if request.method == "GET":
        # 根据nid获取数据
        edit_data = models.Department.objects.filter(id=nid).first()
        return render(request, "depart_edit.html", {"edit_data": edit_data})
    
    # 获取用户更新的title
    title = request.POST.get("title")
    # 对数据库中进行修改
    models.Department.objects.filter(id=nid).update(title=title)
    
    # 重定向为部门列表
    return redirect("/depart/list/")
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

一直没看数据库，这里一起看一下吧~

在这里插入图片描述

记得刷新！空白部分，右键刷新！

项目用户管理

部门管理差不多了，下面来看用户管理吧！

用户管理可不一般，也就是字段多了点，那么在获取内容的时候也有很多小细节需要注意奥！

user_list

首先我们需要为数据库准备一些数据：

在这里插入图片描述

def user_orm(request):
    # 虽然在models.py中其为depart，但是实际上是depart_id，在操作的时候注意
    models.UserInfo.objects.create(name="王晓曼", password="123520", age=20, account=99999, create_time="2022-09-01",
                                   depart_id=1, gender=2)
    models.UserInfo.objects.create(name="王尚春", password="666666", age=49, account=199999, create_time="2000-01-01",
                                   depart_id=2, gender=1)
    models.UserInfo.objects.create(name="彭艳", password="111111", age=48, account=299999, create_time="2001-01-01",
                                   depart_id=3, gender=2)
    models.UserInfo.objects.create(name="王梦迪", password="131420", age=28, account=399999, create_time="2015-06-14",
                                   depart_id=6, gender=2)
    models.UserInfo.objects.create(name="黄伟", password="888888", age=33, account=499999, create_time="2012-12-31",
                                   depart_id=7, gender=1)
    return HttpResponse("成功")
1
2
3
4
5
6
7
8
9
10
11
12
13

然后在导航条里加上用户管理这一个标签。

在这里插入图片描述
用户列表，其实和部门列表差不多，只是字段可能不一样，先仿着部门列表写。

{% extends 'layout.html' %}

{% block content %}
<!--添加该页面内容-->
<div style="margin-bottom:20px">
    <!--span后一个换行使得字体图标和文字有一点空隙-->
    <a class="btn btn-primary" href="/user/add/"><span class="glyphicon glyphicon-plus-sign"></span>
        新建用户</a>
</div>
<!--面板＋表格-->
<div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list"></span>
            用户列表
        </div>
        <!--可以直接在浏览器中选中元素 copy element-->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>密码</th>
                <th>年龄</th>
                <th>余额</th>
                <th>入职时间</th>
                <th>部门</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for data in data_list %}
            <tr>
                <th scope="row">{{data.id}}</th>
                <td>{{data.name}}</td>
                <td>{{data.password}}</td>
                <td>{{data.age}}</td>
                <td>{{data.account}}</td>
                <td>{{data.create_time}}</td>
                <td>{{data.depart}}</td>
                <td>{{data.gender}}</td>
                <td>
                    <a class="btn btn-success btn-xs" href="#">编辑</a>
                    <a class="btn btn-danger btn-xs" href="#">删除</a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
</div>
</div>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

测试效果如下：

在这里插入图片描述

但是这样的效果肯定不好，所以我们需要在后端调整。

def user_list(request):
    data_list = models.UserInfo.objects.all()
    # 由于数据比较复杂 所以需要在后端进行调试数据格式 当然有可能前后端数据格式调整代码会不同 也会有局部更改
    for data in data_list:
        print(data.create_time.strftime("%Y-%m-%d"))
    return render(request, "user_list.html", {"data_list": data_list})
1
2
3
4
5
6

在这里插入图片描述
但是我们发现性别不是我们想要的展示数据，于是我们想起在定义表的时候，有一个gender_choices这个变量，那么怎么将数据展示成我们想要的呢？

def user_list(request):
    data_list = models.UserInfo.objects.all()
    # 由于数据比较复杂 所以需要在后端进行调试数据格式 当然有可能前后端数据格式调整代码会不同 也会有局部更改
    for data in data_list:
        # strftime("%Y-%m-%d")是后端将datetime类型转换为字符串形式
        print(data.create_time.strftime("%Y-%m-%d"))
        # 将元组套元组的类型 转换成 对应的字段
        print(data.get_gender_display())
    return render(request, "user_list.html", {"data_list": data_list})
1
2
3
4
5
6
7
8
9

在这里插入图片描述

那么depart_id怎么展示成对应的部门名称呢？

def user_list(request):
    data_list = models.UserInfo.objects.all()
    # 由于数据比较复杂 所以需要在后端进行调试数据格式 当然有可能前后端数据格式调整代码会不同 也会有局部更改
    for data in data_list:
        # strftime("%Y-%m-%d")是后端将datetime类型转换为字符串形式
        print(data.create_time.strftime("%Y-%m-%d"))
        # 将元组套元组的类型 转换成 对应的字段
        print(data.get_gender_display())
        # 拿取部门id对应的部门名称 我们知道在定义表的时候 定义的是depart 但是数据库给我们存的是depart_id 那么depart其实对应的是表的那一行的对象
        print(data.depart.title)
    return render(request, "user_list.html", {"data_list": data_list})
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述
在后端测试好了后，移植到前端了。

在这里插入图片描述

是不是感觉很好呢？

user_add

其实添加用户和新建部门是一样的原理，但是可能字段会更多一点。

在这里插入图片描述

{% extends 'layout.html' %}

{% block content %}
<!--添加该页面内容-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">新建用户</h3>
    </div>
    <div class="panel-body">
        <form method="post">
            {% csrf_token %}
             <div class="form-group">
                <label>名称</label>
                <input type="text" class="form-control" placeholder="名称" name="name">
            </div>
             <div class="form-group">
                <label>密码</label>
                <input type="text" class="form-control" placeholder="密码" name="password">
            </div>
             <div class="form-group">
                <label>年龄</label>
                <input type="text" class="form-control" placeholder="年龄" name="age">
            </div>
             <div class="form-group">
                <label>余额</label>
                <input type="text" class="form-control" placeholder="余额" name="account">
            </div>
             <div class="form-group">
                <label>入职时间</label>
                <input type="text" class="form-control" placeholder="入职时间" name="create_time">
            </div>
             <div class="form-group">
                <label>部门</label>
                <select class="form-control" name="depart">
                    {% for data in depart_list %}
                        <option value="{{data.id}}">{{data.title}}</option>
                    {% endfor %}
                </select>
            </div>
             <div class="form-group">
                <label>性别</label>
                <select class="form-control" name="gender">
                    {% for item in gender_choices %}
                        <option value="{{item.0}}">{{item.1}}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</div>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

def user_add(request):
    # 拿到性别元组 和 部门信息
    gender_choices = models.UserInfo.gender_choices
    depart_list = models.Department.objects.all()
    # 如果是get请求
    if request.method == "GET":
        return render(request, "user_add.html", {"gender_choices": gender_choices, "depart_list": depart_list})
    # 如果是post请求 获取用户提交的数据
    name = request.POST.get("name")
    password = request.POST.get("password")
    age = request.POST.get("age")
    account = request.POST.get("account")
    create_time = request.POST.get("create_time")
    depart = request.POST.get("depart")
    gender = request.POST.get("gender")
    # 将数据加入到数据库 （此处默认数据都是合法的 后面用Form和ModelForm实现）
    models.UserInfo.objects.create(name=name, password=password, age=age, account=account, create_time=create_time,
                                   depart_id=depart, gender=gender)
    # 重定向到用户列表
    return redirect("/user/list/")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

Form和ModelForm

有没有觉得如果字段很多的话，这也太复杂了吧！

在这里插入图片描述

没关系，Django给我们提供了Form和ModelForm奥，一起先来看看他们的基本用法吧！

Form

在这里插入图片描述

ModelForm

在这里插入图片描述
当然也支持自定义字段和Model字段一起！

user_add(ModelForm)

为了区分，我们首先在用户列表中，新增加一个按钮。

在这里插入图片描述

views.py中增加如下：

from django import forms


class UserModelForm(forms.ModelForm):
    class Meta:
        model = models.UserInfo
        fields = ["name", "password", "age"]


def user_model_form_add(request):
    form = UserModelForm()
    return render(request, "user_model_form_add.html", {"form": form})

1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述
先测试基本数据（不考虑样式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    {% csrf_token %}
    <!--form.字段.label表示对应的中文名-->
    {{form.name.label}}：{{form.name}}
    {{form.password.label}}：{{form.password}}
    {{form.age.label}}：{{form.age}}
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述
对form进行循环：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    {% csrf_token %}
    <!--form.字段.label表示对应的中文名-->
    <!--{{form.name.label}}：{{form.name}}
    {{form.password.label}}：{{form.password}}
    {{form.age.label}}：{{form.age}}-->
    {% for field in form %}
        {{field.label}}：{{field}}
    {% endfor %}
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述
剩下的字段都加上，看一下效果：

在这里插入图片描述

有没有发现其他的很方便，但是depart怎么肥四？！

首先我们没有写verbose_name，所以直接把字段名写出来了。

其次这个为对象，所以直接输出了对象。

在这里插入图片描述
搞定！

现在集成到bootstrap中！

{% extends 'layout.html' %}

{% block content %}
<!--添加该页面内容-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">新建ModelForm用户</h3>
    </div>
    <div class="panel-body">
        <form method="post">
            {% csrf_token %}
            {% for field in form %}
            <div class="form-group">
                <label>{{field.label}}</label>
                {{field}}
            </div>
            {% endfor %}
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</div>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述
但是长得有点丑啊！

在这里插入图片描述

把所有的都加上：

from django import forms


class UserModelForm(forms.ModelForm):
    class Meta:
        model = models.UserInfo
        fields = ["name", "password", "age", "account", "create_time", "depart", "gender"]

        # 插件
        # widgets = {
        #     "name": forms.TextInput(attrs={"class": "form-control"})
        # }

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        for name, field in self.fields.items():
            field.widget.attrs = {"class": "form-control", "placeholder": field.label}


def user_model_form_add(request):
    form = UserModelForm()
    return render(request, "user_model_form_add.html", {"form": form})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述
完善POST后的相关处理：

def user_model_form_add(request):
    if request.method == "GET":
        form = UserModelForm()
        return render(request, "user_model_form_add.html", {"form": form})
    # 用Post提交的数据 进行数据校验
    form = UserModelForm(data=request.POST)
    if form.is_valid():
        # 如果数据合法  保存到数据库
        print(form.cleaned_data)
        form.save()
        return redirect("/user/list/")
    else:
        print(form.errors)
        return render(request, "user_model_form_add.html", {"form": form})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述
怎么将提示变成中文呢？

在这里插入图片描述

LANGUAGE_CODE = 'zh-hans'
1

在这里插入图片描述

如果对于姓名字段，添加一些限制呢？

在这里插入图片描述

正确的添加：

总而言之：ModelForm针对操作数据库某个表，其他还是Form。

user_edit

在这里插入图片描述

def user_edit(request, nid):
    if request.method == "GET":
        # 根据id去数据库获取编辑的那一行
        row_object = models.UserInfo.objects.filter(id=nid).first()
        form = UserModelForm(instance=row_object)
        return render(request, "user_edit.html", {"form": form})

    # 完成编辑后保存到当前对象中 而不是新增一个用户 （该行可放在最上面）
    row_object = models.UserInfo.objects.filter(id=nid).first()
    # 用Post提交的数据 进行数据校验
    form = UserModelForm(data=request.POST, instance=row_object)
    if form.is_valid():
        # 如果数据合法  保存到数据库
        print(form.cleaned_data)
        # 默认保存的是用户输入的所有数据 如果想要再保存用户输入的额外的值
        # form.instance.字段名=值
        form.save()
        return redirect("/user/list/")
    else:
        print(form.errors)
        return render(request, "user_edit.html", {"form": form})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

页面就和用户添加的页面差不多，只需要修改标题。

{% extends 'layout.html' %}

{% block content %}
<!--添加该页面内容-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">编辑用户</h3>
    </div>
    <div class="panel-body">
        <form method="post" novalidate>
            {% csrf_token %}
            {% for field in form %}
            <div class="form-group">
                <label>{{field.label}}</label>
                {{field}}
                <span style="color:red;">{{field.errors.0}}</span>
            </div>
            {% endfor %}
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</div>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

user_delete

在这里插入图片描述

叮咚，完成！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/723536