目录
大致效果
添加用户代码
引入ModelForm
ModelForm 与一般表单的区别:
ModelForm 与传统 Form 的区别:
使用ModelForm制作用户管理
新建用户
编辑用户:
删除数据
完整代码
在学完前面的部门管理案例后,自己独立写出个用户管理应该不难,基本逻辑和大致代码都和前面一样,大家可以自己试试。
大致效果
基于ModelForm用户管理 系统
添加用户代码
但是,按照之前的方式写的话,在表单方面还是会有些繁琐,这里指的是后端代码和前端html。因为用户表涉及到的字段有很多,这就导致视图函数中要写很多行接收用户提交数据,而且添加用户的前端页面也会非常长。像之前那些写的话,用户添加相关文件就会是这样的:
user_list.html:
{% extends 'layout.html' %}
{% block content %}<div class="container-fluid"><div class="my-div"><div style="margin-bottom: 10px"><a class="btn btn-primary" href="/user/add/">{# target="_blank"使得跳转打开新页面#}<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新建用户</a></div><div><div class="panel-heading"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>用户列表</div><div class="bs-example" data-example-id="contextual-table"><table class="table"><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 queryset %}<tr><th scope="row">{{ obj.id }}</th><td>{{ obj.name }}</td><td>{{ obj.password }}</td><td>{{ obj.age }}</td><td>{{ obj.account }}</td><td>{{ obj.create_time|date:"Y-m-d H:i:s" }}</td>
{# creat_time也是,Django内部自带的一种写法,相当于在内部建立一个date函数,将匹配模板和create_time作为参数传递进去,也不允许加百分号#}
{# <td>{{ obj.depart_id }}</td>#}
{# 在模板语法中不允许自己加(),如果是要括号的,模板会自动帮你加#}<td>{{ obj.get_gender_display }}</td># Django内部提供了一种方法,对应models.py中带有choices属性的字段,要是想要获取对应元组的内容,只需要使用 get_内容_display<td>{{ obj.depart.title }}</td><td><a class="btn btn-primary btn-xs" href="">编辑</a><a class="btn btn-danger btn-xs" href="">删除</a></td></tr>{% endfor %}</table></div></div></div></div>
{% endblock %}
user_add.html:
{% extends 'layout.html' %}
{% block content %}<div class="container-fluid" style="margin-top: 10px"><div class="my-div"><div class="container"><div class="panel panel-default" style="width: 750px;margin-top: 10px"><!-- Default panel contents --><div class="panel-heading" style="margin-top: 0">新建 用户</div><div class="panel-body"><form class="form-horizontal" method="POST">{% csrf_token %}<!-- 姓名输入框 --><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">姓名</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入姓名" name="name"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">密码</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入密码" name="pwd"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">年龄</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入年龄" name="age"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">余额</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入账户余额" name="account"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">入职时间</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入入职时间" name="ctime"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">性别</label><div class="col-sm-5"><label><select class="form-control" name="gender">{% for item in gender_choices %}<option value={{ item.0 }}>{{ item.1 }}</option>{% endfor %}</select></label></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">部门</label><div class="col-sm-5"><label><select class="form-control" name="depart">{% for item in queryset %}<option value="{{ item.id }}">{{ item.title }}</option>{% endfor %}</select></label></div></div><!-- 管理员密码输入框 --><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">管理员密码</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd"></div></div><!-- 提交按钮 --><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提 交</button></div></div></form></div></div></div></div>
</div>
{% endblock %}
views.py:
def user_list(request):# 获取用户列表queryset = UserInfo.objects.all()return render(request, "user_list.html",{"queryset":queryset})def user_add(request):Department.objects.all()context = {'gender_choices': UserInfo.gender_choices,'queryset': Department.objects.all()}if request.method == "GET":return render(request, "user_add.html",context)name = request.POST.get("name")pwd = request.POST.get("pwd")age = request.POST.get("age")account = request.POST.get("account")ctype = request.POST.get("ctime")gender = request.POST.get("gender")depart_id = request.POST.get("depart")UserInfo.objects.create(name=name,password=pwd, age=age, account=account, create_time=ctype, depart_id =depart_id, gender=gender)return redirect("/user/list")
引入ModelForm
下面介绍一种更加便捷的表单方法——ModelForm
在Django开发中,ModelForm
是 Django 提供的一个用于简化表单处理的工具,它能通过模型(Model)自动生成表单,而不需要手动定义每个字段。ModelForm
是 Django 中的一个强大功能,能够帮助开发者减少重复的代码,特别是在需要处理与模型关联的表单时。
ModelForm
与一般表单的区别:
特性 | ModelForm | 一般表单 |
---|---|---|
自动与数据库字段绑定 | 自动与模型字段绑定 | 不会自动绑定,字段需要手动定义 |
字段映射 | 字段通过模型自动映射到表单字段 | 需要手动创建字段并定义属性 |
验证机制 | 自动应用模型中的验证规则 | 需要手动编写字段的验证逻辑 |
数据保存 | 自动保存到数据库 | 需要手动处理数据保存逻辑 |
创建表单字段 | 自动生成字段 | 需要手动定义表单字段 |
ModelForm
是由传统Form更新而来,继承了Form,但会更加便捷一点
ModelForm
与传统 Form
的区别:
特性 | ModelForm | 传统 Form |
---|---|---|
关联模型 | 自动与模型字段关联 | 不关联模型,需要手动定义字段 |
字段定义 | 通过模型字段自动生成 | 需要手动定义所有字段 |
验证机制 | 自动继承模型的验证规则 | 需要手动为每个字段定义验证规则 |
数据保存 | 自动将表单数据保存到模型实例 | 需要手动提取数据并保存到数据库 |
生成表单字段 | 自动生成HTML表单字段 | 需要手动创建表单字段 |
ModelForm
主要用于那些与模型直接关联的表单,简化了表单字段的定义和数据的保存过程。与传统的 Form
相比,ModelForm
自动从模型中获取字段和验证规则,因此减少了开发工作量。缺点是对于那些没有直接模型支持的表单,或者需要更复杂逻辑的表单,ModelForm
可能不如手动定义的传统 Form
灵活。
使用ModelForm制作用户管理
新建用户
"""ModelForm示例"""
# 引入forms
from django import forms
class UserForm(forms.ModelForm):# 继承ModelFormclass Meta:# model等于表名model = UserInfo# 具体要用到的列名fields = ['name','password','age','account','create_time','depart','gender']def user_m_form_add(request):"""添加用户,ModelForm版本"""# 实例化前面的ModelFormform = UserForm()return render(request, "user_MForm_add.html",{"form":form})
简单得在html文件中运用:
<form class="form-horizontal" method="POST">{% csrf_token %}<!-- 输入框 -->{% for items in form %}{{ items.label }} : {{ items }}{% endfor %}<!-- 提交按钮 --><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提 交</button></div></div></form>
这样的话,页面显示的就是前面ModelForm中创建的fields中的列:
这样的话,数字数据输入框会自动加一个加减箭头,性别会自动加男女选项下拉框,部门也会自动加关联部门表中的id下拉框。但我们想要的效果是部门处要是具体的部门,而不是对应的id,因为ModelForm在循环取值过程中,取到的是一个一个的对象,若直接print这个对象,就会是这样的效果:
可以在部门表后面加上_ _str_ _方法,作用是使得外部有地方直接打印对象时,会打印_ _str_ _函数中返回的内容,这里是部门id所对应的title名称。
def __str__(self):return self.title
这里的 { { items.label }},取的是标签,即字段的另一个名称,在models文件中的verbose_name参数即是友好的中文名称,{ { items.label }}可以使得遍历每个字段并创建输入框时在前面加字段的另一名称。
name = models.CharField(verbose_name="姓名",max_length=32)
但是这样生成的页面和原来手写的页面还是有点不一样
这是因为虽然ModelForm能简化我们的步骤,但是他是统一自动生成的html标签,样式格式是不会变的,怎么解决呢?
可以在UserForm中添加widgets插件
有两种方式添加:
1、在Meta中添加
添加widgets插件:
widgets = {'name': forms.TextInput(attrs={'class':'form-control'}),'password': forms.PasswordInput(attrs={'class':'form-control'}),}
但是这样,如果字段足够多的情况下,还是得一行一行写,也比较繁琐。
2、重写init方法
def __init__(self,*args,**kwargs):super(UserForm,self).__init__(*args,**kwargs)# 循环找到所有的插件for name,field in self.fields.items():field.widget.attrs = {'class':'form-control'}
这段代码通过循环找到所有的字段名,再赋予样式。
编辑用户:
编辑用户和部门表的编辑一样,只需要将用户点击编辑行数据展示出来,然后用户修改,自动更新,并跳转到显示页面上。
当然这是一般的方法,使用ModelForm的话会更加便捷。
还是使用前面新建数据创建的ModelForm,只需创建实例即可使用。将用户点击编辑行的id传给视图函数,创建实例传参instance=根据id获取到的数据对象,这样即可在输入框中显示原始数据;用UserForm接收用户提交的数据,使用ModelForm的form.save()函数进行更新,这比直接写更新语句要便捷得多,但是这样会导致一个问题,即程序并不知道要更新的是哪行数据,所有程序会自动将用户添加数据作为一个新数据添加到数据库中,并且原来的数据不变,这并不是我们想要的结果,解决方法也很简单,只需要再次获取到ID对应数据对象,在UserForm中添加参数instance=数据对象,再更新,即可实现便捷。
def user_edit(request,nid):row_object = UserInfo.objects.filter(id=nid).first()if request.method == "GET":# 根据ID去数据库获取要编辑的那一行数据(对象)# 加上instance=row_object会默认将对应ID的数据显示到页面输入框中,这就比之前的部门管理要方便很多form = UserForm(instance=row_object)return render(request,"user_edit.html",{"form":form})# 如果不加下面这行代码,并且UserForm中加instance,那么数据库中就不是更新数据,因为程序不知道要更新哪一行数据,所有程序会自动新添加一行数据,原来数据保持不变form = UserForm(data=request.POST,instance=row_object)if form.is_valid():form.save()return redirect("/user/list/")return render(request,"user_edit.html",{"form":form})
删除数据
由于删除数据本身就比较简洁了,不必追求花样,用部门管理中的删除逻辑就行:
view.py
def user_delete(request,nid):UserInfo.objects.filter(id=nid).delete()return redirect("/user/list/")
完整代码
urls.py:
# 用户管理path("user/list/", views.user_list),path("user/add/", views.user_add),path("user/MForm_add/", views.user_m_form_add),path("user/<int:nid>/edit/", views.user_edit),path("user/<int:nid>/delete/", views.user_delete),
views.py:
def user_list(request):# 获取用户列表queryset = UserInfo.objects.all()for obj in queryset:# Django内部提供了一种方法,对应models.py中带有choices属性的字段,要是想要获取对应元组的内容,只需要使用 get_内容_display()函数,# 就是自动获取到元素对应元组中的内容,在html中不是函数,在视图函数中是函数# print(obj.get_gender_display())# print(obj.create_time.strftime("%Y-%m-%d"))# ids = Department.objects.filter(id=obj.depart_id).first()# print(ids.title)# 像这样按照id去部门表中查找title值当然是可以的,但Django内部提供了一种更加便捷的方式,用于多表间的关联# 帮助跨表,获取数据很容易var = obj.depart.titleprint(var)return render(request, "user_list.html",{"queryset":queryset})def user_add(request):Department.objects.all()context = {'gender_choices': UserInfo.gender_choices,'queryset': Department.objects.all()}if request.method == "GET":return render(request, "user_add.html",context)name = request.POST.get("name")pwd = request.POST.get("pwd")age = request.POST.get("age")account = request.POST.get("account")ctype = request.POST.get("ctime")gender = request.POST.get("gender")depart_id = request.POST.get("depart")UserInfo.objects.create(name=name,password=pwd, age=age, account=account, create_time=ctype, depart_id =depart_id, gender=gender)return redirect("/user/list")"""ModelForm示例"""from django import forms
class UserForm(forms.ModelForm):class Meta:model = UserInfofields = ['name','password','age','account','create_time','depart','gender']# 1、还是比较繁琐# widgets = {# 'name': forms.TextInput(attrs={'class':'form-control'}),# 'password': forms.PasswordInput(attrs={'class':'form-control'}),# }# 2、循环到所有的插件再赋予form-control样式def __init__(self,*args,**kwargs):super(UserForm,self).__init__(*args,**kwargs)# 循环找到所有的插件for name,field in self.fields.items():field.widget.attrs = {'class':'form-control'}
def user_m_form_add(request):"""添加用户,ModelForm版本"""if request.method == "GET":form = UserForm()return render(request, "user_MForm_add.html",{"form":form})# 用户提交POST请求,校验数据form = UserForm(data=request.POST)# 注意!要是数据填写错误,表单数据就传不过来print(request.POST)if form.is_valid():print(form.cleaned_data)# 自动帮我们保存到ModelForm定义的数据库中form.save()return redirect("/user/list")else:print(form.errors)def user_edit(request,nid):row_object = UserInfo.objects.filter(id=nid).first()if request.method == "GET":# 根据ID去数据库获取要编辑的那一行数据(对象)# 加上instance=row_object会默认将对应ID的数据显示到页面输入框中,这就比之前的部门管理要方便很多form = UserForm(instance=row_object)return render(request,"user_edit.html",{"form":form})# 如果不加下面这行代码,并且UserForm中加instance,那么数据库中就不是更新数据,因为程序不知道要更新哪一行数据,所有程序会自动新添加一行数据,原来数据保持不变form = UserForm(data=request.POST,instance=row_object)if form.is_valid():form.save()return redirect("/user/list/")return render(request,"user_edit.html",{"form":form})def user_delete(request,nid):UserInfo.objects.filter(id=nid).delete()return redirect("/user/list/")
user_list.html:
{% extends 'layout.html' %}
{% block content %}<div class="container-fluid"><div class="my-div">
{# <div style="margin-bottom: 10px">#}
{# <a class="btn btn-primary" href="/user/add/">#}{# target="_blank"使得跳转打开新页面#}
{# <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>#}
{# 新建用户</a>#}
{# </div>#}<div style="margin-bottom: 10px"><a class="btn btn-primary" href="/user/MForm_add/">{# target="_blank"使得跳转打开新页面#}<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新建用户</a></div><div><div class="panel-heading"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>用户列表</div><div class="bs-example" data-example-id="contextual-table"><table class="table"><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 queryset %}<tr><th scope="row">{{ obj.id }}</th><td>{{ obj.name }}</td><td>{{ obj.password }}</td><td>{{ obj.age }}</td><td>{{ obj.account }}</td><td>{{ obj.create_time|date:"Y-m-d" }}</td>
{# creat_time也是,Django内部自带的一种写法,相当于在内部建立一个date函数,将匹配模板和create_time作为参数传递进去,也不允许加百分号#}
{# <td>{{ obj.depart_id }}</td>#}
{# 在模板语法中不允许自己加(),如果是要括号的,模板会自动帮你加#}<td>{{ obj.get_gender_display }}</td><td>{{ obj.depart.title }}</td><td><a class="btn btn-primary btn-xs" href="/user/{{ obj.id }}/edit/">编辑</a><a class="btn btn-danger btn-xs" href="/user/{{ obj.id }}/delete/">删除</a></td></tr>{% endfor %}</table></div></div></div></div>
{% endblock %}
user_add.html:
{% extends 'layout.html' %}
{% block content %}<div class="container-fluid" style="margin-top: 10px"><div class="my-div"><div class="container"><div class="panel panel-default" style="width: 750px;margin-top: 10px"><!-- Default panel contents --><div class="panel-heading" style="margin-top: 0">新建 用户</div><div class="panel-body"><form class="form-horizontal" method="POST">{% csrf_token %}<!-- 姓名输入框 --><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">姓名</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入姓名" name="name"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">密码</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入密码" name="pwd"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">年龄</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入年龄" name="age"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">余额</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入账户余额" name="account"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">入职时间</label><div class="col-sm-5"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入入职时间" name="ctime"></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">性别</label><div class="col-sm-5"><label><select class="form-control" name="gender">{% for item in gender_choices %}<option value={{ item.0 }}>{{ item.1 }}</option>{% endfor %}</select></label></div></div><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">部门</label><div class="col-sm-5"><label><select class="form-control" name="depart">{% for item in queryset %}<option value="{{ item.id }}">{{ item.title }}</option>{% endfor %}</select></label></div></div><!-- 管理员密码输入框 --><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">管理员密码</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd"></div></div><!-- 提交按钮 --><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提 交</button></div></div></form></div></div></div></div>
</div>
{% endblock %}
user_MForm_add.html:
{% extends 'layout.html' %}
{% block content %}<div class="container-fluid" style="margin-top: 10px"><div class="my-div"><div class="container"><div class="panel panel-default" style="width: 750px;margin-top: 10px"><!-- Default panel contents --><div class="panel-heading" style="margin-top: 0">新建 用户</div><div class="panel-body"><form class="form-horizontal" method="POST" action="/user/MForm_add/">{% csrf_token %}<!-- 输入框 -->{% for items in form %}<div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">{{ items.label }}</label><div class="col-sm-5">
{# <input type="text" class="form-control" id="inputDepartmentName" placeholder="" name="{{ items.label }}">#}{{ items }}
{# 要是有错误信息,会显示#}<span style="color: red">{{ items.errors.0 }}</span>
{# 直接手写{{ items }},因为他会自动帮我们生成html标签#}</div></div>
{# {{ items.label }} : {{ items }}#}{% endfor %}<!-- 提交按钮 --><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提 交</button></div></div></form></div></div></div></div>
</div>{% endblock %}
user_edit.html:
{% extends 'layout.html' %}{% block content %}<div class="container"><div class="panel panel-default" style="width: 750px;margin-top: 10px"><div class="panel-heading" style="margin-top: 0">编辑 用户</div><div class="panel-body"><form class="form-horizontal" method="POST" action="/user/MForm_add/">{% csrf_token %}<!-- 输入框 -->{% for items in form %}<div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">{{ items.label }}</label><div class="col-sm-5">{{ items }}<span style="color: red">{{ items.errors.0 }}</span></div></div>{% endfor %}<!-- 提交按钮 --><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提 交</button></div></div></form></div></div></div>
{% endblock %}
感谢您的三连!!!