Django项目之电商购物商城 – 校验用户输入密码是否合法
需要开发文档和前端资料的可私聊
一. 创建用户逻辑操作
1. 创建用户app – users
python manage.py startapp users
2.注册app
'users.apps.UsersConfig',
3. 创建视图
from django.shortcuts import render from django.views import View class RegisterView(View): def get(self , request): return render(request , 'register.html') def post(self , request): pass
4. 分发路由
from django.urls import path from users import views urlpatterns = [ path('register/' , views.RegisterView.as_view()) ]
注册界面展示
二. 创建用户模型类
- 创建用户模型类 , 继承Django原有user表
from django.db import models from django.contrib.auth.models import AbstractUser # Create your models here. class User(AbstractUser): # 创建手机号字段 mobile = models.IntegerField(max_length=11 , unique=True) class Meta: db_table = 'User'
- 修改配置
AUTH_USER_MODEL = 'user.User'
- 迁移数据库
python manage.py makemigrations python manage.py migrate
三. 接受用户数据进行校验
1. 前端校验
let vm = new Vue({ // 通过ID选择器找到绑定的html标签的内容 el : '#app', // 修改vue的模板语法 delimiters : ['[[',']]'], data : { // v-model username:'', password:'', password2:'', mobile:'', allow:'', image_code_url:'', uuid:'', image_code:'', sms_code:'', sms_code_tip:'获取短信验证码', // 该变量作为标记，默认允许访问 sand_flag:false, // v-show error_name:false, error_password:false, error_password2:false, error_mobile:false, error_allow:false, error_image_code:false, error_sms_code:false, // 自定义错误信息 error_name_message:'', error_sms_code_message:'', }, // 这个方法会在页面加载之后被调用 mounted(){ this.generate_image_code(); }, // 定义事件方法 methods:{ // 校验短信验证码 check_sms_code() { if(this.sms_code.length != 5){ this.error_sms_code = true; } else { this.error_sms_code = false; } }, //发送短信验证码 send_sms_code() { // 判断作为标记的变量是否允许访问 if (this.sand_flag == true ){ // 当标记为true时，说明短时间内已经发送请求了，不允许访问停止方法。 return; } // 标记允许访问，可以实现发送Ajax请求 // 修改标记为不允许访问的状态 this.sand_flag = true; let url = '/ver/sms_code/'+this.mobile+'/?uuid='+this.uuid+'&image_code='+this.image_code; axios.get(url ,{responseType: 'json'}) // 请求成功 .then(response => { console.log(response.data.errsg) // 实现发送短信验证码的倒计时 if (response.data.code == '0'){ let number = 60; console.log(123) let t = setInterval(() => { console.log(4536) // 倒计时结束 if(number == 1){ // 倒计时结束 // 停止回调函数的执行 clearInterval(t) this.sms_code_tip = '获取短信验证码'; // 倒计时结束之后，重新生成图片验证码 this.generate_image_code(); // 倒计时结束，把标记修改为允许访问的状态 this.sand_flag = false; } else { number -= 1 ; this.sms_code_tip = number +'秒'; } } , 1000) } else { // 短信验证码发送失败 this.error_sms_code_message = response.data.errsg; this.error_sms_code = true; } // 把标记修改为允许访问的状态 this.sand_flag = false; }) // 请求失败 .catch(error =>{ console.log(error.response) // 把标记修改为允许访问的状态 this.sand_flag = false; }) }, // 校验图片验证码 check_image_code(){ if(this.image_code.length != 4){ this.error_image_code = true; } else { this.error_image_code = false; } }, // 生成 图片验证码的url generate_image_code(){ // 通过生成uuid来对用户进行标识 this.uuid = generateUUID() this.image_code_url = '/ver/image_code/'+this.uuid+'/' }, // 校验用户名 check_username(){ // 定义用户名的规则 let re = /^[A-Za-z0-9_]{5,15}$/; // 判断接收到的数据是否符合条件 if(re.test(this.username)){ // 数据合法 this.error_name = false; } else { // 用户名不合法 this.error_name = true; this.error_name_message = "用户名不合法 ， 应当使用A-Za-z0-9_" } // 判断用户是否重复 // 前提保证用户名合法 if(this.error_name == false){ // 发送ajax请求 let url = '/user/username/'+ this.username +'/count/'; axios.get( url , {responseType :'json'} ) // 请求成功 .then(response => { // 获取后端传递过来的数据 response.data if(response.data.count == 1){ // 用户已存在 this.error_name_message = '用户名已存在'; this.error_name = true; } else { this.error_name = false; } }) // 请求失败 .catch(error =>{ console.log(error.response) }) } }, // 校验密码 check_password(){ // 密码中合法的字符 let re=/^[0-9a-zA-Z]{6,20}$/; if(re.test(this.password)){ // 符合要求 ， 密码字符合法 this.error_password = false; } else { // 密码不合法 ，显示错误信息 this.error_password = true; } }, // 校验两次密码是否一致 check_password2(){ if(this.password2 == this.password){ this.error_password2 = false; } else { this.error_password2 = true; } }, // 校验手机号 check_mobile(){ let re =/^1[3-9]\d{9}$/; if(re.test(this.mobile)){ this.error_mobile = false; } else { this.error_mobile = true; } }, // 校验勾选框是否勾选 check_allow(){ if(this.allow){ this.error_allow = false; } else { this.error_allow = true; } }, // 校验表单中数据是否全部合格 on_submit(){ // 调用所有校验数据的方法 this.check_username(); this.check_password(); this.check_password2(); this.check_mobile(); this.check_allow(); // 判断error的对应值是否为true ， 如果其中有一个为true则限制提交 if(this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_allow == true){ // 禁止表单提交 window.event.returnValue = false; } }, } })
2. 后端校验数据是否合法, 两次输入密码是否一致 – 定义forms表单
- 在当前app中创建forms模块
from django import forms class RegisterForms(forms.Form): username = forms.CharField(min_length=5,max_length=15, error_messages={ "min_length":"用户名太短", "max_length":"用户名太长", "required":"用户名不允许为空" }) password = forms.CharField(min_length=6, max_length=20, error_messages={ "min_length": "密码名太短", "max_length": "密码名太长", "required": "密码不允许为空" }) password2 = forms.CharField(min_length=6, max_length=20, error_messages={ "min_length": "用户名太短", "max_length": "用户名太长", "required": "用户名不允许为空" }) mobile = forms.IntegerField(min_length=11, max_length=11, error_messages={ "min_length": "手机号不合法", "max_length": "手机号不合法", "required": "手机号不允许为空" }) # 校验两次输入是否一致 def clean(self): clean_data = super(RegisterForms, self).clean() pw = clean_data.get('password') pw2 = clean_data.get('password2') if pw != pw2: raise forms.ValidationError return clean_data
- 将forms组件传入视图进行数据校验
class RegisterView(View): def get(self , request): return render(request , 'register.html') def post(self , request): # 将用户数据传入forms组件进行校验 register_forms = RegisterForms(request.POST) # 这里先返回httpresponse进行测试 if register_forms.is_valid(): return HttpResponse("注册成功") return HttpResponse("注册失败")
- 下节介绍用户名重复校验 , 图形验证码制作 , 以及短信验证码生成
