- 一.注册功能的逻辑功能,配置相关配置
- 一.1 编写(model)模型类
- 一.2配置setting文件
- 一.3 迁移和之行迁移
- 一.4 路由分发
- 二 实现编写和实现功能
- 二.1 编写视图(views) 用户注册
- 二.1.①用户注册路由配置
- 二.2 确认密码
- 二.2.①确认密码路由
- 二.3手机号注册
- 二.3.① 手机号注册的路由
- 二.4.确认密码 二次确认密码 '和上面顺序写反了问题不大'
- 二.4.①二次确认密码的路由
- 二.5.生成图片验证码！！！！
- 二.5.①生成验证码路由
- 二.6校验验证码
- 二.6.①校验验证码路由
- 二.7 校验注册
- 二.7.①注册路由
- 三.注册前端编写
- 三.1用户名校验
- 三.2 前端手机号校验
- 三.3 前端密码校验
- 三.4.确认密码(二次确认)前端校验
- 三.5.前端图片校验注册
- 三.6.前端注册校验(难)
- 四. 使用APIPOST检查后端代码
- 四.1用户
- 四.2 手机号
- 四.3密码
- 四.4图片
- 四.5注册
定义一个User(用户)的模型类
一.2配置setting文件这个配置文件前几篇很熟悉了不多说了
中间件
把csrf防跨站伪造关闭
导入
'corsheaders.middleware.CorsMiddleware'
数据库配置
ip白名单
配置允许cookie访问,请求方式 请求头
python manage.py makemigrations users #迁移 python manage.py migrate users # 执行迁移一.4 路由分发
主路由
在子应用下创建一个py文件urls 用于存放 子路由
用户注册
class CheckUserNameView(APIView):
def get(self,request,username):
# 判断用户名是否输入，没有输入username = ""
if not username:
return Response({
'code':400,
'msg':'用户名不可用不'
})
# 程序走到这一步，代表 username 一定有东西
if not (6 <= len(username) <= 32): #len 函数 判断一个字符串的长度
# 查询一下数据库有没有username的这条数据
return Response({
'code':400,
'msg':'用户长度不符合'
})
user_count = User.objects.filter(username=username).count()
if user_count:
return Response({
'code':400,
'msg':'用户名已存在'
})
return Response({
"code":200,
'msg':'用户名可以使用'
})
二.1.①用户注册路由配置
动态路由,str:username的参数
path('check/username//', views.CheckUserNameView.as_view()),
二.2 确认密码
post请求,
判断 如果pwd 为空的话 返回一个 code400,msg 请输入密码
简单判断
长度 不是 小于等于6 和 大于等于32 返回 code 400 msg:长度不符合规定
最后返回一个response code 200 密码可用使用
放个代码块方便复制 :
def post(self,request):
pwd = request.data.get('pwd1')
print(pwd)
# 校验 密码
if pwd == '':
return Response({
'code':400,
'msg':'请输入密码'
})
else:
if not (6 <= len(pwd) <= 32) :
return Response({
'code':400,
'msg': '长度格式不符合规定'
})
return Response({
'code':200,
'msg':'密码可用'
})
二.2.①确认密码路由
路由
path("check/password/", views.CheckPasswordView.as_view()),
二.3手机号注册
正则匹配一下手机号要求
1开头 第二位3-9 第三位0-9 在加上 9位 共11位,
简单小判断
如果不是的返回一个 长度不符合
过滤保存
判断 存在的话 里面有 就返回一个存在
最后 response 可以使用
path('check/mobile//', views.CheckMobileView.as_view()),
二.4.确认密码 二次确认密码 ‘和上面顺序写反了问题不大’
获取接收两个参数
简单小判断 如果密码 不等于确认密码
return 一个 response 密码不一致
最后 返回一个 response code 200 msg 可以使用
path('check/password2/', views.CheckPwdView.as_view()),
二.5.生成图片验证码！！！！
get 请求
导包 pycham自带的 随即生成字符串 random
把字符串变成图片的一个 导包 captcha 导入一下
实例化验证码
生成器生成验证图片
链接到redis数据库
host 127.0.0.1 端口6379, 密码是自己的密码 db 到 1的数据库
可以到redis里面看看
可以看到是空的
打开前端 运行前端
点击可以获取图片
控制台出的什么？
get 一下看看
对应的数
注释的很清楚 不逼逼了:
def post(self,request):
code = request.data.get("code") #用户输入的验证码
uuid = request.data.get("uuid") #用户的唯一标志
# 1.链接数据库，取出uuid对应的验证码
import redis
r = redis.Redis(host="127.0.0.1", password=123456,db=1)
sys_code = r.get(uuid)
# 如果uuid对应的数据为空的话，说明验证码已过期
if not sys_code:
return Response({
"code":400,
"msg":'验证码已过期'
})
sys_code_str = sys_code.decode()
# 2.用户输入的验证码和数据库的验证码做比对
if sys_code_str != code:
# 如果不一致，验证码错误
return Response({
"code":400,
"msg":'验证码错误'
})
# 如果一致，说明验证码通过
return Response({
"code":200,
"msg":'校验通过'
})
二.6.①校验验证码路由
path('check/img/code/', views.CheckCodeView.as_view()),
# 校验验证码
二.7 校验注册
简单了和上面差不多 不多说了
post请求 获取相应的数据 然后小判断 返回response
class RegView(APIView):
def post(self,request):
username = request.data.get('username')
password = request.data.get('password')
mobile = request.data.get('mobile')
agree = request.data.get('agree')
if not int(agree): # 字符串的0 不可用not 判断
return Response({
'code':400,
'msg':'请勾选协议'
})
if not username or not password or not mobile:
return Response({
'code':400,
'msg':'参数输入有误'
})
try:
User.objects.create(
username=username,
password=password,
mobile=mobile,
)
return Response({
'code':200,
'msg':'成功'
})
except Exception as e:
print(e)
return Response({
'code':400,
'msg':'失败'
})
二.7.①注册路由
path('reg/',views.RegView.as_view()),
三.注册前端编写
三.1用户名校验
// 用户名的校验方法
let validateName = (rule, value, callback) => {
console.log("校验用户名，规则", rule, "用户名", value, "回调函数", callback)
// TODO 校验用户名
// 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
// 成功 return callback();
this.$axios.get('user/check/username/' + value + '/').then(resp=>{
console.log(resp);
if(resp.data.code == 200){
return callback();
}else{
return callback(new Error(resp.data.msg));
}
}).catch(err=>{
console.log(err);
// alert('页面报错')
})
三.2 前端手机号校验
axios请求,get 地址 then 成功走下面 失败走catch
// 密码的校验方法
let validatePass = (rule, value, callback) => {
console.log("校验密码，规则", rule, "密码", value, "回调函数", callback)
// TODO 校验密码
// 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
// 成功 return callback();
this.$axios.post('user/check/password/',{pwd1:this.RegisterUser.pass}).then(resp=>{
console.log(resp);
if(resp.data.code == 200){
return callback();
}else{
return callback(new Error(resp.data.msg));
}
}).catch(err=>{
console.log(err);
// alert('校验密码页面报错')
})
三.4.确认密码(二次确认)前端校验
// 确认密码的校验方法
let validateConfirmPass = (rule, value, callback) => {
console.log("校验确认密码，规则", rule, "二次输入的密码", value, "回调函数", callback)
// TODO 校验确认密码
// 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
// 成功 return callback();
this.$axios.post('user/check/password/',{pwd1:this.RegisterUser.pass,pwd2:this.RegisterUser.confirmPass}).then(resp=>{
console.log(resp);
if(resp.data.code == 200){
return callback();
}else{
return callback(new Error(resp.data.msg));
}
}).catch(err=>{
console.log(err);
// alert('校验密码页面报错')
})```
## 三.5前端图片校验
```python
// 校验图片验证码
let validateImageCode = (rule, value, callback) => {
console.log("校验验证码，规则", rule, "二验证码", value, "回调函数", callback)
// TODO 校验验证码
// 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
// 成功 return callback();
this.$axios.post("/user/check/img/code/",{
"uuid":this.imageCodeID,
"code":value,
}).then(resp=>{
if(resp.data.code == 200){
return callback();
}else{
return callback(new Error(resp.data.msg))
}
}).catch(err=>{
console.log(err)
alert('校验图片页面报错')
})
三.5.前端图片校验注册
this.$axios.post("/user/check/img/code/",{
"uuid":this.imageCodeID,
"code":value,
}).then(resp=>{
if(resp.data.code == 200){
return callback();
}else{
return callback(new Error(resp.data.msg))
}
}).catch(err=>{
console.log(err)
alert('校验图片页面报错')
})
};
三.6.前端注册校验(难)
在这里插入代码片this.$refs["ruleForm"].validate((valid) => {
if (valid) {
// TODO 注册用户
this.$axios.post("/user/reg/",{
"username":this.RegisterUser.name,
"password":this.RegisterUser.pass,
"mobile":this.RegisterUser.mobile,
"agree":this.aggree,
}).then(res=>{
if (res.data.code == 200){
// alert("注册成功")
// 清空注册输入的内容
this.RegisterUser.name = ""
this.RegisterUser.pass = ""
this.RegisterUser.mobile = ""
this.RegisterUser.confirmPass = ""
this.RegisterUser.imageCode = ""
this.aggree = false
//关闭注册弹窗
this.isRegister = false
this.notifySucceed(res.data.msg);
}else{
// alert("注册失败")
this.nottifyError(res.data.msg);
}
}).catch(err=>{
console.log(err)
alert("页面报错")
})
} else {
return false;
}
});
四. 使用APIPOST检查后端代码
四.1用户
长度符合 code200
长度不符合 code 400
符合长度并符合要求 1开头 第二位3-9
注意一下画圈地方
长度不够我们之前定义的 至少6位 就 code 一个400
检验图片
结束
