前端页面设计的前端知识项目使用vue实现局部刷新，通过数据的双向绑定实现与用户的交互。让我们来看看要求。用户输入内容后，前端需要做一些简单的规则校验。我们希望在用户输入后实时检测，如果有错误，可以显示在输入框底部。
请输入5-20个字符的用户span>请输入8-20digitsThepassword上面是用户和密码的输入框。用户输入用户名后，光标离开输入框，可以实时检测输入内容的正确性。当输入有问题时，在输入框下方显示错误信息。v-model实现数据的双向绑定，v-on实现事件绑定，v-show控制是否显示dom。以下是添加vue
[[error_name_message]]请输入8-20个字符的密码将用户输入的用户名绑定到username变量，光标消失触发绑定时间check_username，绑定v-show到布尔变量error_name，控制是否显示字符串变量error_name_message，其他输入框与此操作类似。注册业务实现前端注册业务逻辑注册表单代码：
{{csrf_input}}- [[error_name_message]]
- 请输入8-20位数字的密码
- 两次输入的密码不一致</li>
- [[error_mobile_message]]
- 请填写图形验证码
- 获取短信验证码请填写短信验证码
请检查用户协议 {%ifregister_errmsg%}{{register_errmsg}}{%endif%}
导入vue.js和ajax请求js库准备register.js文件register.js文件主要处理注册页面的交互事件，将注册表单提交到服务器请求下面是实现的前端验证逻辑和表单提交逻辑方法:{//检查用户名check_us恩恩ame(){让re=/^[a-zA-Z0-9_-]{5,20}$/;if(re.test(this.username)){this.error_name=false;}否则{这个。error_name_message='请输入5-20个字符的用户名';this.error_name=true;}},//验证密码check_password(){letre=/^[0-9A-Za-z]{8,20}$/;this.error_password=!re.test(this.password);},//验证密码check_password2(){if(this.password!==this.password2){this.error_password2=true;}else{this.error_password2=false;}},//检查电话号码check_mobile(){letre=/^1[3-9]\d{9}$/;if(re.test(this.mobile)){this.error_mobile=false;}else{this.error_mobile_message='您输入的手机号码格式不正确';this.error_mobile=true;}},//检查协议是否被检查check_allow(){this.error_allow=!this.allow;},//监听表单提交事件on_submit(){this.check_用户名（）;this.check_password();this.check_password2();this.check_mobile();this.check_allow();#如果其中一个输入字段不符合规则，则被禁止=true||this.error_allow===true){//禁用表单提交window.event.returnValue=false;}},}后端业务注册逻辑在用户输入用户名后，我们往往希望能够快速给出用户名是否符合注册要求。前面只是验证了用户名的规则，我们还想知道其他是否已经在系统中注册过？否则，当用户完成输入并提交注册时，用户名或手机号已被注册。体验不是很好，需要请服务器判断光标是否离开用户名输入框。挂号的。defineroutingpath('register/',views.RegisterView.as_view(),name='register'),#name添加命名空间路径('usernames/',views.UsernameCountView.as_view(),name="username"),re_path(r'mobiles/(?P1[3-9]\d{9})',views.MobileCountView.as_view(),name='mobile')编写视图类classUsernameCountView(View):defget(self,request,username):"""查询用户名是否存在于系统中:paramrequest:请求对象:paramusername:前端传过来的用户名:return:"""count=User.objects.filter(username=username).count()返回http.JsonResponse({'code':1001,'msg':'Useralreadyexists'})ifcount==1\elsehttp.JsonResponse({'code':1000,'msg':''})这里没有对响应进行统一的处理和封装，后面会介绍。然后就是注册视图类的写法：classRegisterView(View):"""用户注册视图类"""defget(self,request):'''获取注册页面'''returnrender(request,'register.html')defpost(self,request):""""""username=request.POST.get('username')password=request.POST.get('password')password2=request.POST.get('password2')mobile=request.POST.get('mobile')allow=request.POST.get('allow')#判断参数是否完整ifnotall([username,password,password2,mobile,allow]):returnhttp.HttpResponseForbidden('缺少强制参数')#判断用户名是否为5-20个字符ifnotre.match(r'^[a-zA-Z0-9_-]{5,20}$',username):returnhttp.HttpResponseForbidden('Pleaseenterausernamewith5-20characters')#判断密码是否为8-20位数字ifnotre.match(r'^[0-9A-Za-z]{8,20}$',password):returnhttp.HttpResponseForbidden('请输入8-20位数字的密码')#判断是否两次密码一致ifpassword!=password2:returnhttp.HttpResponseForbidden('两次输入的密码不一致')#判断手机号是否合法ifnotre.match(r'^1[3-9]\d{9}$',mobile):returnhttp.HttpResponseForbidden('请输入正确的手机号')#判断是否勾选用户协议ifallow!='on':returnhttp.HttpResponseForbidden('请勾选用户协议')try:user=User.objects.create_user(username=username,password=password,mobile=mobile)exceptDatabaseErrorase:returnrender(request,'register.html',{'register_errmsg':e.args})#注册成功并保存会话login(request,user)returnredirect(reverse('contents:index'))django提供的login方法，封装了写入session的操作，帮助我们快速登录一个用户，并实现状态维护，将认证用户的唯一标识信息（如用户ID）写入到cookie中当前浏览器和服务器会话request.session[SESSION_KEY]=user._meta.pk.value_to_string(user)request.session[BACKEND_SESSION_KEY]=backendrequest.session[HASH_SESSION_KEY]=session_auth_hashsession会存储在redis中，在创建项目时配置session存储之前SESSION_ENGINE="django.contrib.sessions.backends.cache"SESSION_CACHE_ALIAS="session"欢迎来到我的博客，有更多关于实测的内容！！
