bbs项目解读

1.注册功能

具体的效果图如下：

注册功能涉及到的逻辑步骤：

1.搭建前端html页面
2.向后端提交用户输入数据
3.对用户输入的数据格式进行校验
4.页面输入数据格式错误，及时向用户进行提示/正确则保存到数据库

所以，提到校验和提交数据，这就需要我们用到forms组件！！

回顾一下forms组件的功能：
1.生成页面可用的html标签
2.对用户提交的数据进行校验
3.保留上次内容并提示用户

但是！！我们在做项目的时候，不可避免的可能需要用到很多forms组件！之前我们都是写在views.py里面的，但是这样太过冗余，为了接耦合，我们可以新建一个文件夹里面专门放forms组件！！

1.         myforms文件夹
2.                 regform.py
3.                 loginform.py
4.                 userform.py
5.                 orderform.py

复制代码

接下来我们详细解读一下forms组件部分、视图函数部分和前端html部分的代码~~
forms组件部分

1. from django import forms  # forms组件使用的时候需要先导入
2. from app01 import models   # 当校验提交的用户名是否和数据库中的用户名一样时需要导入模型层
4. class MyForms2(forms.Form):  # 定义一个forms组件类，该类继承forms.Form
5.     # forms.CharField为input框，在内部可以通过widget指定input框的类型和样式attrs={}
6.     # min_length最小位数，max_length最大位数，label字段名，不写是默认的类中定义的字段首字母大写的形式
7.     # error_messages为页面输入数据格式不正确时提示的信息
8.     username = forms.CharField(min_length=3,max_length=8,label='用户名',
9.                                 widget=forms.TextInput(attrs={'class':'form-control'}),
10.                                error_messages={
11.                                    'required':'用户名不能为空',
12.                                    'min_length':'用户名最少3位',
13.                                    'max_length':'用户名最多8位'
14.                                }
15.                                )
16.     password = forms.CharField(label='密码',min_length=3,max_length=8,
17.                                widget=forms.PasswordInput(attrs={'class':'form-control'}),
18.                                error_messages={
19.                                    'required': '密码不能为空',
20.                                    'min_length': '密码最少3位',
21.                                    'max_length': '密码最多8位'
22.                                }
23.                                )
24.     confirm_password = forms.CharField(label='确认密码',min_length=3,max_length=8,
25.                                        widget=forms.PasswordInput(attrs={'class': 'form-control'}),
26.                                        error_messages={
27.                                            'required': '密码不能为空',
28.                                            'min_length': '密码最少3位',
29.                                            'max_length': '密码最多8位'
30.                                        }
31.                                        )
32.     email = forms.EmailField(label='邮箱',
33.                              widget=forms.EmailInput(attrs={'class': 'form-control'}),
34.                             error_messages={
35.                                 'invalid':'邮箱格式不正确',
36.                                 'required':'邮箱不能为空',
37.                             }
38.                              )
40.     # 钩子函数，校验的第二道关卡，自定义校验规则，然后返回到前端提示
41.     def clean_username(self): #类里面定义的字段对象会自动创建一个（clear_字段对象名）的函数
42.         # 获取用户名，self.cleaned_data返回的是一个字典{}，.get拿到key对应的值
43.         username = self.cleaned_data.get('username')
44.         # 判断数据库中是否存在当前用户名
45.         is_exist = models.UserInfo.objects.filter(username=username)
46.         if is_exist:
47.             # 有则，报错
48.             self.add_error('username','用户名已经存在')
49.         # 将钩子函数钩去出来数据再放回去
50.         return username
52.     def clean(self):
53.         password = self.cleaned_data.get('password')
54.         confirm_password = self.cleaned_data.get('confirm_password')
55.         if password != confirm_password:
56.             self.add_error('confirm_password','两次密码不一致')
57.         # 将钩子函数钩出来数据再放回去，全拿出来就需要全放回去
58.         return self.cleaned_data

复制代码

视图函数部分

1. from django.shortcuts import render
2. from app02.myform2 import MyForms2
3. from django.http import HttpResponse
4. from app01 import models
6. def register2(request):
7.     # 产生一个空对象，将forms组件的字段传进来，再传到html页面
8.     form_obj = MyForms2()
9.     # form表单提交post触发
10.     if request.method == 'POST':
11.         # 获取form表单里面的普通键值对
12.         form_obj = MyForms2(request.POST)
13.         # 获取form表单的文件数据
14.         file = request.FILES.get('file')
15.         # 判断数据是否合法
16.         if form_obj.is_valid():
17.             # 移除确认密码，为**打散传到数据库做铺垫
18.             form_obj.cleaned_data.pop('confirm_password')
19.             # 用户提交了文件则触发
20.             if file:
21.                 # 往{}这样的字典里添加了一个avatar的key和值
22.                 form_obj.cleaned_data['avatar'] = file
23.             # 把字典打散了添加到数据库
24.             models.UserInfo.objects.create_user(**form_obj.cleaned_data)
25.             # 数据合法之后，返回到另一个页面
26.             return HttpResponse('ok')
27.     return render(request,'register2.html',locals())

复制代码

html部分

1. 向后端提交数据可以用form表单也可以用ajax提交
3. 法1：form表单提交
5.   
6.    
7.         
8. {#            这里我们采用了form表单向后端提交数据，form默认是提交的urlencoded的编码格式，#}
9. {#            urlencoded的格式form表单只会将普通键值对封装到request.POST中，添加enctype="multipart/form-data",#}
10. {#            可以获取普通键值对和文件。#}
11.             <form action="" novalidate method="post" enctype="multipart/form-data">
12.             {% csrf_token %}
13.                 <h1 >注册</h1>
14.                 {% for form in form_obj %}
15.                     
16.                         <label for="">{{ form.label }}</label>
17.                         {{ form }}
18. {#                       这里是只有当以form表单提交的时候才会展示报错信息，如果以ajax就不该以这样的方式添加报错信息#}
19.                     {{ form.errors.0 }}
20.                     
21.                 {% endfor %}
22.                
23. {#                    插入的图片可以指定宽度width，以此来规定图片的大小#}
24.                     <label for="myimg">头像<img src="https://www.cnblogs.com/static/img/default.png" alt="" width="80" id="myimg2" ></label>
25. {#                    添加display：none 来隐藏file文本框#}
26.                 <input type="file" name="file" id="myimg" >
27.                
28.             <input type="submit" value="提交" >
29.             </form>
30.         
31.    
33. </body>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！