Django系统开发（上）：
7.模板的继承
- 部门列表
- 添加部门
- 编辑部门
定义模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}"> {% block css %}{% endblock %} </head> <body> <h1>标题</h1> <div> {% block content %}{% endblock %} </div> <h1>底部</h1> <script src="{% static 'js/jquery-3.6.3.min.js' %}"></script> <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script> {% block js %}{% endblock %} </body> </html>
继承模板
{% extends 'test.html' %} {% block css %} ... {% endblock %} {% block content %} <h1>首页</h1> {% endblock%} {% block js %} ... {% endblock %}
将部门列表，添加部门，编辑部门改造成继承模板
父模板（导航条，CSS，JS）
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .navbar { border-radius: 0; } </style> <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <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> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">部门管理 <span class="sr-only">(current)</span></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">姓名 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> {% block content %}{% endblock %} <script src="{% static 'js/jquery-3.6.3.min.js' %}"></script> <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script> </body> </html>
添加部门：
{% extends 'layout.html' %} {% block content %} <div> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title" href="/depart/add">新建部门</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> </div> </div> {% endblock %}
编辑部门：
{% extends 'layout.html' %} {% block content %} <div> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title" href="/depart/add">编辑部门</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="{{ row_object.title }}"/> </div> <button type="submit" class="btn btn-primary">保 存</button> </form> </div> </div> </div> </div> {% endblock %}
部门列表：
{% extends 'layout.html' %} {% block content %} <div> <div class="container"> <div style="margin-bottom: 10px"> <a class="btn btn-success" href="/depart/add" > <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 新建部门 </a> </div> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 部门列表 </div> <!-- Table --> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> {% for obj in queryset %} <tr> <td>{{ obj.id }}</td> <td>{{ obj.title }}</td> <td> <a class="btn-primary btn-xs" href="/depart/{{ obj.id }}/edit">编辑</a> <a class="btn-danger btn-xs" href="/depart/delete?nid={{ obj.id }}">删除</a> </td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> {% endblock %}
8.用户管理
插入数据：
insert into app01_userinfo(name,password,age,account,create_time,gender,depart_id) values("刘备","666",23,100.68,"2023-01-01",1,1); insert into app01_userinfo(name,password,age,account,create_time,gender,depart_id) values("关羽","999",23,99.68,"2023-01-02",1,2); insert into app01_userinfo(name,password,age,account,create_time,gender,depart_id) values("张飞","333",23,98.68,"2023-01-03",1,2);
在视图函数中获取数据库数据，传递给HTML
def user_list(request): queryset = models.UserInfo.objects.all() """ for obj in queryset: print(obj.name, obj.password, obj.age, obj.account, obj.create_time.strftime("%Y-%m-%d"), obj.get_gender_display(), obj.depart.title) """ return render(request, 'user_list.html', {"queryset": queryset})
新知识点 - 转换语法（在Python中的使用）：
obj.create_time.strftime(“%Y-%m-%d”)
obj.get_gender_display()
obj.depart.title
在模板语法中循环展示数据
{% for obj in queryset %} <tr> <td>{{ obj.id }}</td> <td>{{ obj.name }}</td> <td>{{ obj.password }}</td> <td>{{ obj.account }}</td> <td>{{ obj.create_time|date:"Y-m-d" }}</td> <td>{{ obj.get_gender_display }}</td> <td>{{ obj.depart.title }}</td> <td> <a class="btn-primary btn-xs">编辑</a> <a class="btn-danger btn-xs">删除</a> </td> </tr> {% endfor %}
新知识点 - 转换语法（在模板语法中的使用）：
obj.create_time|date:“Y-m-d”
get_gender_display
obj.depart.title
新建用户：
- 原始方法
- 用户提交数据没有校验。 - 错误，页面上应有错误提示。 - 页面上，每一个字段都需要重新写一遍。 - 关联的数据，手动去获取并展示循环展示在页面
- Django组件
- Form组件（简便）
- ModelForm组件（超级简便）
8.1 初识Form
1.views.py
class MyForm(Form): # 定义一个类 在里面定义定义输入框，渲染到HTML中，则可以在HTML中调用成Input框 user = forms.CharField(widget=forms.Input) pwd = forms.CharField(widget=forms.Input) email = forms.CharField(widget=forms.Input) account = forms.CharField(widget=forms.Input) create_time = forms.CharField(widget=forms.Input) depart = forms.CharField(widget=forms.Input) gender = forms.CharField(widget=forms.Input) def user_add(request): if request.method == "GET": form = MyForm() return render(request, 'user_add.html', context, {"form":form})
2.user_add.html
一个个生成Input框
<form method="post"> {{ form.user }} <!-- 通过渲染传入的form，使用模板语法，生成Input框 --> {{ form.pwd }} {{ form.email }} <!-- <input type="text" class="form-control" placeholder="姓名" name="user"/> --> </form>
循环生成Input框
<form method="post"> {% for field in form %} <!-- 通过渲染传入的form，使用模板语法，循环生成Input框 --> {{ field }} {% endfor %} <!-- <input type="text" class="form-control" placeholder="姓名" name="user"/> --> </form>
8.2 ModelForm
models.py
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="年龄") account = models.DecimalField(verbose_name="账户余额", max_digits=10, decimal_places=2, default=0) create_time = models.DateTimeField(verbose_name="入职时间") depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.CASCADE) gender_choices = ( (1, "男"), (2, "女"), ) gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
views.py
class MyForm(Form): xx = forms.CharField() # 可自定义字段 class Meta: model = UserInfo # 实例化UserInfo对象iang fields = ["name","password","age","xx"] # 可获取UserInfo中的字段 def user_add(request): if request.method == "GET": form = MyForm() return render(request, 'user_add.html', context, {"form":form})
- 部门管理
- 用户管理
- 用户列表
- 新建用户
- ModelForm，针对数据库中的某个表。 - Form
8.3 编辑用户
- 点击编辑，跳转到编辑页面（将编辑行的ID携带过去）
- 编辑页面（存放默认数据，根据ID获取并设置到页面中）
- 提交：
- 错误提示
- 数据校验
- 在数据库更新
9.靓号管理
9.1 表结构
根据表结构的需求，在models.py中创建类（由类生成数据库中的表）
class PrettyNum(models.Model): mobile = models.CharField(verbose_name="手机号", max_length=11) price = models.IntegerField(verbose_name="价格", default=0) level_choices = ( (1, "1级"), (2, "2级"), (3, "3级"), (4, "4级"), (5, "5级"), ) level = models.SmallIntegerField(verbose_name="级别", choices=level_choices, default=1) status_choices = ( (1, "已占用"), (2, "为占用"), ) status = models.SmallIntegerField(verbose_name="状态", choices=status_choices, default=2)
模拟创建一些数据：
mysql> select * from app01_prettynum; +----+-------------+-------+-------+--------+ | id | mobile | price | level | status | +----+-------------+-------+-------+--------+ | 1 | 12345678911 | 10 | 1 | 1 | | 2 | 12345678911 | 10 | 1 | 1 | | 3 | 12345678911 | 10 | 1 | 1 | +----+-------------+-------+-------+--------+
9.2 靓号列表
- URL
- 函数
- 获取所有的靓号
- 结合html+render将靓号罗列出来
id 手机号 价格 级别（中文） 状态（中文）
def pretty_list(request): """ 靓号列表 """ queryset = models.PrettyNum.objects.all().order_by("-id") return render(request, 'pretty_list.html', {"queryset": queryset})
{% extends 'layout.html' %} {% block content %} <div> <div class="container"> <div style="margin-bottom: 10px"> <a class="btn btn-success" href="/pretty/add"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添加靓号 </a> </div> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 靓号列表 </div> <!-- Table --> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>手机号</th> <th>价格</th> <th>级别</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> {% for obj in queryset %} <tr> <td>{{ obj.id }}</td> <td>{{ obj.mobile }}</td> <td>{{ obj.price }}</td> <td>{{ obj.get_level_display }}</td> <td>{{ obj.get_status_display }}</td> <td> <a class="btn-primary btn-xs" href="/user/{{ obj.id }}/edit">编辑</a> <a class="btn-danger btn-xs" href="/user/{{ obj.id }}/delete">删除</a> </td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> {% endblock %}
Django系统开发（下）：https://developer.aliyun.com/article/1427948
