• 专题18：Django之Form，ModelForm

    原始思路实现添加用户功能的缺点：

    1）用户提交的数据没有校验

    2）如果用户输入的数据有错误，没有错误提示

    3）前端页面上的每一个字段都需要我们重新写一次

    4）关联的数据需要手动取获取并循环展示在页面

    1、Form

    在views.py中：

    1. # MyForm中继承的Form是Django自带的
    2. class MyForm(forms):   
    3.     # widget=forms.Input表示可以在HTML页面中可以显示成input框
    4.     user = forms.CharField(widget=forms.Input)  
    5.     pwd = forms.CharField(widget=forms.Input)
    6.     email = forms.CharField(widget=forms.Input)
    7.  
    8.  
    9. def user_add():
    10.     if method.request == "GET":
    11.         form = MyForm()  # 实例化一个MyForm对象
    12.         return render(request, "user_add.html", {"form": form})
    13.

    前端user_add.html中：

    1. <form method="post" action="/user/add/">
    2.     {{ form.user }}
    3.     {{ form.pwd }}
    4.     {{ form.email }}
    5. form>

     上面代码相当于如下代码，两者比较，明显上面使用了form的代码更加简洁

    1. <form method="post" action="/user/add/">
    2.     <input type="text" class="form-control" placeholder="请输入用户名称" name="user">
    3.     <input type="text" class="form-control" placeholder="请输入密码" name="pwd">
    4.     <input type="text" class="form-control" placeholder="请输入邮箱" name="email">
    5. form>

    还有一种比上面更简洁的写法，直接用for循环遍历form

    1. <form method="post" action="/user/add/">
    2.     {% for field in form %}
    3.         {{ field }}
    4.     {% endfor %}
    5. form>

    2、ModelForm（对某些数据库的表做增删改查，推荐用ModelForm）

    1）使用ModelForm增加用户

    上面的views.py的方法其实也有很麻烦的地方，就是如果我要用字段的话，那我就要在MyForm这个类中把所要用的字段都手动写一遍，如果字段很多的话，就比较麻烦，有没有更加简单的办法呢？

    答案是有的，注意看MyForm里面的字段是不是和models.py中类的字段很相似？看下图：

    1. class UserInfo(models.Model):
    2.     """员工表"""
    3.     name = models.CharField(verbose_name="姓名", max_length=16)
    4.     password = models.CharField(verbose_name="密码", max_length=64)
    5.     age = models.IntegerField(verbose_name="年龄")
    6.     account = models.DecimalField(verbose_name="工资", max_digits=10, decimal_places=2, default=0)
    7.  
    8.     create_time = models.DateField(verbose_name="入职时间")
    9.  
    10.     gender_choices = (
    11.         (1, "男"),
    12.         (2, "女")
    13.     )
    14.     # gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
    15.  
    16.     gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
    17.  
    18.     depart = models.ForeignKey(verbose_name="部门", to="Department", to_field="id",
    19.                                null=True, blank=True, on_delete=models.SET_NULL)

    其实，它们之间的内部之间是有关联的，我们如果使用ModelForm的话，可以这样写：

    views.py中：

    1. from django import forms
    2.  
    3. # 注意：如果要用ModelForm，则前面必须写这个类
    4. class MyModelForm(forms.ModelForm):
    5.     class Meta:
    6.         model = models.UserInfo
    7.         # 这里fields这个列表就把models.py中的UserInfo表中的字段关联到了ModelForm这里
    8.         fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]
    9.  
    10.  
    11. def user_add():
    12.     if method.request == "GET":
    13.         form = MyModelForm()  # 实例化一个MyModelForm对象
    14.         return render(request, "user_add.html", {"form": form})

    同时，ModelForm中的fields列表里的字段不仅可以是数据库的字段，也可以是我们自定义的字段，而新字段相当于新加字段到表中。如下所示：

    1. from django import forms
    2.  
    3. class MyModelForm(forms.ModelForm):
    4.     xxx = forms.CharField("...")
    5.     class Meta:
    6.         model = UserInfo
    7.         fields = ["name", "password", "age", "account", "create_time", "gender", "depart", "xxx"]
    8.  
    9. def user_add():
    10.     if method.request == "GET":
    11.         form = MyModelForm()  # 实例化一个MyModelForm对象
    12.         return render(request, "user_add.html", {"form": form})

    实操：

    views.py中：

    1. from django import forms
    2.  
    3. class UserModelForm(forms.ModelForm):
    4.     class Meta:
    5.         model = models.UserInfo
    6.         fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]
    7.  
    8. def user_model_form_add():
    9.     if method.request == "GET":
    10.         form = UserModelForm()  # 实例化一个MyModelForm对象
    11.         return render(request, "user_model_form_add.html", {"form": form})

    user_model_form_add.html中：

    1. <form method="post" action="/user/model/form/add/">
    2.     {% csrf_token %}
    3.     {% for field in form %}
    4.         {{ field.label }} :   {{ field }}
    5.     {% endfor %}
    6. form>

     运行后页面显示如下：

    那么问题来了，为什么部门这块显示的不是部门名称，而是一个个Department类的对象呢？ 

    首先，我们来分析一下models.py中的代码：

    1. from django.db import models
    2.  
    3. class Department(models.Model):
    4.     """部门表"""
    5.     # title是部门的名字，eg.title=招标部
    6.     title = models.CharField(verbose_name="标题", max_length=32)
    7.  
    8.  
    9. class UserInfo(models.Model):
    10.     """员工表"""
    11.     name = models.CharField(verbose_name="姓名", max_length=16)
    12.     password = models.CharField(verbose_name="密码", max_length=64)
    13.     age = models.IntegerField(verbose_name="年龄")
    14.     account = models.DecimalField(verbose_name="工资", max_digits=10, decimal_places=2, default=0)
    15.  
    16.     create_time = models.DateField(verbose_name="入职时间")
    17.  
    18.     gender_choices = (
    19.         (1, "男"),
    20.         (2, "女")
    21.     )
    22.  
    23.     gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
    24.  
    25.     depart = models.ForeignKey(verbose_name="部门", to="Department", to_field="id",
    26.                                null=True, blank=True, on_delete=models.SET_NULL)

    从上面代码中可以看出，models.py中的depart变量其实是从Department表中取到的一连串对象，前端页面显示的正是这一个个Department类的实例化对象。可是我们要让前端页面显示具体的部门名称，所以这里要引入一个知识点：

    当我们定义一个类，并且实例化一个该类的对象时，我们可以在类中定义一个__str()__，这样当我们打印这个对象时，输出的就是__str()__中return的值，比如：而这个页面的问题，也可以用这种方法，也就是在Department表中定义一个__str()__方法，return的就是self.title。代码如下：

    1. class Department(models.Model):
    2.     """部门表"""
    3.     # title是部门的名字，eg.title=招标部
    4.     title = models.CharField(verbose_name="标题", max_length=32)
    5.     def __str__(self):
    6.         return self.title

    上面的问题解决了，接下来，我们需要给这些输入框增加样式。具体怎么做呢？

     前端user_model_form_add.html中：

    1. {% extends 'layout.html' %}
    2. {% load static %}
    3.  
    4. {% block css %}
    5.     <link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
    6. {% endblock %}
    7.  
    8. {% block content %}
    9.     <div>
    10.     <div class="container">
    11.         <div class="panel panel-default">
    12.             <div class="panel-heading">
    13.                 <h3 class="panel-title">新建用户h3>
    14.             div>
    15.             <div class="panel-body">
    16.                 <form method="post" action="/user/model/form/add/" novalidate>
    17.                     {% csrf_token %}
    18.                     {% for field in form %}
    19. {#                        框外文字: 框内文字#}
    20.                         <div>{{ field.label }}: {{ field }}div>
    21.                         <span style="color: red">{{ field.errors.0 }}span>
    22.  
    23.                     {% endfor %}
    24.                     <button type="submit" class="btn btn-primary">保 存button>
    25.                 form>
    26.             div>
    27.         div>
    28.     div>
    29. div>
    30. {% endblock %}

    上面的代码中，样式唯一缺的就是form-control，我们要想办法把这个样式加上。具体时在views.py中通过widgets来加：

    1. from django import forms
    2.  
    3. class UserModelForm(forms.ModelForm):
    4.     class Meta:
    5.         model = models.UserInfo
    6.         fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]
    7.         widgets = {
    8.             "name": TextInput(attrs={"class": "form-control"}),
    9.             "password": PasswordInput(attrs={"class": "form-control"})
    10.         }
    11.  
    12. def user_model_form_add():
    13.     if method.request == "GET":
    14.         form = UserModelForm()  # 实例化一个MyModelForm对象
    15.         return render(request, "user_model_form_add.html", {"form": form})

    页面如下：

    这种方法虽然可以，但是当字段比较多的时候，像这样一个一个的写就会比较麻烦。在我们真正做开发的时候，肯定不会像这样一个一个的写，我们通常这样写：

    1. from django import forms
    2.  
    3. class UserModelForm(forms.ModelForm):
    4.     class Meta:
    5.         model = models.UserInfo
    6.         fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]
    7.     def __init__(self, *args, **kwargs):
    8.         super().__init__(*args, **kwargs)
    9.         # 循环找到所有插件，添加class="form-control"样式
    10.         for name, field in self.fields.items():
    11.             field.widget.attrs = {"class": "form-control", "place-holder": field.label}
    12.  
    13. def user_model_form_add():
    14.     if method.request == "GET":
    15.         form = UserModelForm()  # 实例化一个MyModelForm对象
    16.         return render(request, "user_model_form_add.html", {"form": form})

    如果我想让某个字段(比如age)不加样式，可以循环中判断：if name == "age": continue

    那么如何对用户输入的数据进行校验呢？

    1. from django import forms
    2.  
    3. class UserModelForm(forms.ModelForm):
    4.     class Meta:
    5.         model = models.UserInfo
    6.         fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]
    7.     def __init__(self, *args, **kwargs):
    8.         super().__init__(*args, **kwargs)
    9.         # 循环找到所有插件，添加class="form-control"样式
    10.         for name, field in self.fields.items():
    11.             field.widget.attrs = {"class": "form-control", "place-holder": field.label}
    12.  
    13. def user_model_form_add():
    14.     if method.request == "GET":
    15.         form = UserModelForm()  # 实例化一个MyModelForm对象
    16.         return render(request, "user_model_form_add.html", {"form": form})
    17.     elif method.request == "POST":
    18.         form = UserModelForm(data=request.POST)
    19.         # 如果校验成功，可以获取到form.cleaned_data，返回一个字典
    20.         # 如果数据合法，我们将这个新增的用户数据保存到数据库，这里注意：我们不再需要用ORM语句了（虽然用也可以），因为ModelForm知道我们获取用户数据可能会将其保存进数据库，所以我们直接调用form.save()就可以了，数据会直接保存到UserInfo这个表中，因为在上面的ModelForm中我们定义了model = models.UserInfo
    21.         if form.is_valid():
    22.             # print(form.cleaned_data)
    23.             form.save()
    24.             return redirect("/user/list/")
    25.         # 如果校验失败，则可以获取到它所有的错误信息
    26.         else:
    27.             # print(form.errors)
    28.             return render(request, 'user_model_form_add.html', {"form": form})

    前端页面通过field.errors.0来显示错误信息，field.errors是一个列表，我们只要显示这个列表的第0个元素就行。

    1. {% extends 'layout.html' %}
    2. {% load static %}
    3.  
    4. {% block css %}
    5.     <link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
    6. {% endblock %}
    7.  
    8. {% block content %}
    9.     <div>
    10.     <div class="container">
    11.         <div class="panel panel-default">
    12.             <div class="panel-heading">
    13.                 <h3 class="panel-title">新建用户h3>
    14.             div>
    15.             <div class="panel-body">
    16.                 <form method="post" action="/user/model/form/add/" novalidate>
    17.                     {% csrf_token %}
    18.                     {% for field in form %}
    19. {#                        框外文字: 框内文字#}
    20.                         <div>{{ field.label }}: {{ field }}div>
    21.                         <span style="color: red">{{ field.errors.0 }}span>
    22.  
    23.                     {% endfor %}
    24.                     <button type="submit" class="btn btn-primary">保 存button>
    25.                 form>
    26.             div>
    27.         div>
    28.     div>
    29. div>
    30. {% endblock %}

     以上的代码只能校验输入内容是否为空，那比如，我想规定姓名的长度必须大于3，那么我们需要在ModelForm的类中额外规定一下：name = forms.CharField(min_length=3, label="姓名")

    1. from django import forms
    2.  
    3. class UserModelForm(forms.ModelForm):
    4.  
    5.     name = forms.CharField(min_length=3, label="姓名")
    6.     class Meta:
    7.         model = models.UserInfo
    8.         fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]
    9.     def __init__(self, *args, **kwargs):
    10.         super().__init__(*args, **kwargs)
    11.         # 循环找到所有插件，添加class="form-control"样式
    12.         for name, field in self.fields.items():
    13.             field.widget.attrs = {"class": "form-control", "place-holder": field.label}
    14.  
    15. def user_model_form_add():
    16.     if method.request == "GET":
    17.         form = UserModelForm()  # 实例化一个MyModelForm对象
    18.         return render(request, "user_model_form_add.html", {"form": form})
    19.     elif method.request == "POST":
    20.         form = UserModelForm(data=request.POST)
    21.         # 如果校验成功，可以获取到form.cleaned_data，返回一个字典
    22.         # 如果数据合法，我们将这个新增的用户数据保存到数据库，这里注意：我们不再需要用ORM语句了（虽然用也可以），因为ModelForm知道我们获取用户数据可能会将其保存进数据库，所以我们直接调用form.save()就可以了，数据会直接保存到UserInfo这个表中，因为在上面的ModelForm中我们定义了model = models.UserInfo
    23.         if form.is_valid():
    24.             # print(form.cleaned_data)
    25.             form.save()
    26.             return redirect("/user/list/")
    27.         # 如果校验失败，则可以获取到它所有的错误信息
    28.         else:
    29.             # print(form.errors)
    30.             return render(request, 'user_model_form_add.html', {"form": form})

    2）使用ModelForm编辑用户信息

    1. {% extends 'layout.html' %}
    2.  
    3. {% block content %}
    4.     <div>
    5.     <div class="container">
    6.         <div class="panel panel-default">
    7.             <div class="panel-heading">
    8.                 <h3 class="panel-title">编辑用户h3>
    9.             div>
    10.             <div class="panel-body">
    11.                 <form method="post" novalidate>
    12.                     {% csrf_token %}
    13.                     {% for field in form %}
    14.                         <div>{{ field.label }}: {{ field }}div>
    15.                         <span style="color: red">{{ field.errors.0 }}span>
    16.  
    17.                     {% endfor %}
    18.                     <button type="submit" class="btn btn-primary">保 存button>
    19.                 form>
    20.             div>
    21.         div>
    22.     div>
    23. div>
    24. {% endblock %}
    1. def user_edit(request, nid):
    2.     """编辑用户"""
    3.     # 根据ID获取到需要编辑的那一行的数据(对象)
    4.     row_object = models.UserInfo.objects.filter(id=nid).first()
    5.     if request.method == 'GET':
    6.         # 在ModelForm中写instance=row_object，则Django会默认将该对象中的每一个值写在输入框中
    7.         form = UserModelForm(instance=row_object)
    8.         return render(request, 'user_edit.html', {"form": form})
    9.  
    10.     # 把用户post的数据更新到row_object这一行，并赋值给form
    11.     elif request.method == "POST":
    12.         form = UserModelForm(data=request.POST, instance=row_object)
    13.         if form.is_valid():
    14.             form.save()
    15.             return redirect('/user/list/')
    16.         else:
    17.             return render(request, 'user_edit.html', {"form": form})

  • 相关阅读:
    使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面
    NVIDIA DPU — BlueField DPU Hardware
    平安人寿“内鬼”泄露近4万条公民信息
    反向散射耦合RFID系统的原理及特点，带你更深入的了解
    飞书事件订阅的应用
    动态内存管理
    TCP/IP协议
    MySQL数据库————存储过程和函数
    技术干货 | GreatDB新一代读写分离架构，如何炼就近乎0损耗的性能？
    使用逆滤波算法deconvwnr恢复图像回复图像时，产生了很多横竖条纹。解决办法
  • 原文地址：https://blog.csdn.net/Vincent_Zhang233/article/details/127926745