【银角大王——Django课程——用户表的基本操作】

Django课程——用户表的基本操作

- 模板的继承
- 用户管理
- - 用户列表展示
  - 新建用户
  - - Django组件
    - - 原始方法【麻烦，太原始】
      - form组件
      - modelform组件
    - 使用modelsform组件编写添加页面

模板的继承

（1）先写一个页面模板————这个案例中的模板基本上就是一个导航栏，然后就是链接的框架导入——占位符可以用在任何需要的地方
代码：


{% load static %}<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    为啥只能使用这种引用，好无语，配置文件中应该咋改嘞-->
<!--    <link rel="stylesheet" type="text/css" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">-->
<!--    <link rel="stylesheet" type="text/css" href="../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">-->
<!--    去除圆角样式-->
<!--    <style>-->
<!--        .navbar{ -->
<!--        border-radius:0;-->
<!--        }-->
<!--    </style>--><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.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><a href="/depart/list/">部门管理 </a></li><li><a href="/user/list/">用户管理 </a></li><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><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></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="#">个人资料</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>{% block content %}{% endblock %}</div><!--这个不知道会不会有效哦--><script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js' %}"></script><script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script></body>
</html>

在这里插入图片描述

（2）继承模板，并完整添加占位符的内容

代码：


{% load static %}<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    为啥只能使用这种引用，好无语，配置文件中应该咋改嘞-->
<!--    <link rel="stylesheet" type="text/css" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">-->
<!--    <link rel="stylesheet" type="text/css" href="../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">-->
<!--    去除圆角样式-->
<!--    <style>-->
<!--        .navbar{ -->
<!--        border-radius:0;-->
<!--        }-->
<!--    </style>--><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.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><a href="/depart/list/">部门管理 </a></li><li><a href="/user/list/">用户管理 </a></li><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><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></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="#">个人资料</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>{% block content %}{% endblock %}</div><!--这个不知道会不会有效哦--><script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js' %}"></script><script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script></body>
</html>

在这里插入图片描述

用户管理

用户列表展示

（1）在urls中编写
在这里插入图片描述
代码：

urlpatterns = [#用户管理path('user/list/', views.user_list),]

（2）在views.py中编写函数
在这里插入图片描述

#用户管理
#用户列表显示
def user_list(request):#获取所有用户列表query_set=models.UseInfo.objects.all();#循环遍历#for obj in query_set:#strftime("%Y-%m-%d")取时间显示函数#get_列名_display()————————找这种性别类型，已经用元组定义了的，choices#所属部门——外键连接，显示方法#obj.depart_id 数据库中原始的数据#关联系跨表——取外键对应值——对象#obj.depart.title#原始方法拿##xx=models.Department.objects.filter(id=obj.depart_id).first()#xx.title# print(obj.id,obj.name,obj.account,obj.from_time.strftime("%Y-%m-%d"),obj.get_gender_display(),obj.depart.title)return render(request,'user_list.html',{"query_set":query_set})

（3）继承了模板的用户列表

{% extends 'layout.html' %}{% block content %}<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="panel panel-default"><!-- Default panel contents --><div class="panel-heading"><span class="glyphicon glyphicon-list" aria-hidden="true"></span>用户列表</div><div class="panel-body"><p>欢迎进入到用户管理页面，请安全操作！</p></div><!-- Table --><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 obj in query_set %}<tr><td>{{obj.id}}</td><td>{{obj.name}}</td><td>{{obj.password}}</td><td>{{obj.age}}</td><td>{{obj.account}}</td><td>{{obj.from_time|date:"Y-m-d"}}</td><td>{{obj.depart.title}}</td><td>{{obj.get_gender_display}}</td><td>
<!--                Django框架中传递参数的正则表达式--><a class="btn btn-primary btn-xs"  href="#">编辑</a>
<!--                通过get请求传递参数跳转页面--><a class="btn btn-danger btn-xs" href="#" >删除</a></td></tr>{% endfor %}</tbody></table></div></div>{% endblock%}

（4）入职时间，性别，部门外键的用法，看代码的时候要发现——在函数中和在页面渲染中的方法不一样。

入职时间：

obj.from_time.strftime("%Y-%m-%d")

<td>{{obj.from_time|date:"Y-m-d"}}</td>

性别：
在表结构中的定义

obj.get_gender_display()

<td>{{obj.get_gender_display}}</td>

部门属性——它是一个外键：在框架中生成的表名称将自动加一个id，表示这是与其他表连接的

depart=models.ForeignKey(to="Department",to_field="id",on_delete=models.CASCADE)

<td>{{obj.depart.title}}</td>

效果图：
在这里插入图片描述

新建用户

Django组件

原始方法【麻烦，太原始】

form组件

用法：(此代码只是用来展示用法——不可直接复制)
在views中定义一个类：该类封装所有的属性——实例化后来使用

#views.py文件
class MyForm(Form):user=forms.CharField(widget=formsInput)pwd=forms.CharField(widget=formsInput)email=forms.CharField(widget=formsInput)....def user_add(request):if request.method=="GET":#直接实例化，然后再HTML中去使用form=MyForm()return render(request,'user_add.html',{'form':form})

<!--html文件-->
<form method='post'>
<!--不用在像以前一样，写input框，直接封装为特定的框-->
<!--{{form.user}}-->
<!--{{form.pwd}}-->
<!--也可以直接循环form来简洁代码-->
{% for field in form %}{{field}}
{% endfor %}
</form>

modelform组件

用法：它是基于models.py文件来的
也就是基于表
在这里插入图片描述

#views.py文件
class MyForm(ModelForm):#可在自定义xx=form.CharField...("...")class Meta:model=UserInfofields=["name","password","age","xx".....]
def user_add(request):if request.method=="GET":#直接实例化，然后再HTML中去使用form=MyForm()return render(request,'user_add.html',{'form':form})

<!--html文件-->
<form method='post'>
<!--不用在像以前一样，写input框，直接封装为特定的框-->
<!--{{form.user}}-->
<!--{{form.pwd}}-->
<!--也可以直接循环form来简洁代码-->
{% for field in form %}{{field}}
{% endfor %}
</form>

使用modelsform组件编写添加页面

原始方法的缺点：

用户提交数据没有校验
页面上没有响应的提示错误
页面上的字段需要我们都写一遍，太重复
关联的数据，手动去获取并要循环展示在页面上

（1）在urls.py中编写
在这里插入图片描述
代码如下：

urlpatterns = [path('user/model/form/add/',views.user_model_form_add),
]

（2）在view.py编写
在这里插入图片描述
代码如下：

#############################################modelForm实例####################################################
#modelForm实例
from django import formsclass UserModelForm(forms.ModelForm):class Meta:model = models.UseInfofields = ["name","password","age","account","from_time","depart","gender"]# widgets={#     "name":forms.TextInput(attrs={"class":"form-control"}),#     "password": forms.PasswordInput(attrs={"class": "form-control"}),### }def __init__(self,*args,**kwargs):super().__init__(*args ,**kwargs)#循环找到所有插件，添加了class=“form-control”样式for name ,field in self.fields.items():# print(name,field)#某一项去除样式# if name=="password":#     continuefield.widget.attrs = {"class":"form-control","placeholder":field.label}

（3）在HTML中编写
在这里插入图片描述
代码如下：

{% extends 'layout.html' %}{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title"> 新建用户 </h3></div><div class="panel-body"><form method="post">
<!--                    隐含参数-->{% csrf_token %}{% for field in form %}<div class="form-group"><label >{{ field.label }}</label>{{ field }}<!--                        <input type="text" class="form-control"  placeholder="标题" name="user">--></div>{% endfor %}<button type="submit" class="btn btn-primary">提 交</button></form></div></div></div>{% endblock %}<!-- <form method="post">-->
<!--   {% csrf_token %}-->
<!--&lt;!&ndash;     label通过表中中文命名连接（verbose_name='姓名'）&ndash;&gt;-->
<!--     {% for field in form %}--><!--            {{ field.label}}:{{field}}--><!--     {% endfor %}--><!--&lt;!&ndash;   {{form.name.label}}:{{form.name}}&ndash;&gt;-->
<!--&lt;!&ndash;   {{form.password.label}}:{{form.password}}&ndash;&gt;-->
<!--&lt;!&ndash;   {{form.age.label}}:{{form.age}}&ndash;&gt;--><!-- </form>-->