python知识点回顾今日讲解
用户注册功能
注册逻辑用户表设计用户名重复性校验密码的校验手机号重复性校验 作业考试强化
python知识点回顾路由匹配可变的字符串
path('check/username//', CheckUsername.as_view())
正则匹配
In [2]: import re In [3]: a = re.findall(r'^[a-zA-Z]*(?Pd+)[a-zA-Z]*$', 'sad131231dasda') In [4]: a Out[4]: ['131231'] In [4]: mobile = re.findall(r"1d{10}", '我的手机号是8615239159680') Out[4]: ['15239159680']
True 与 False的判断
[]、（）、{}、""、 None、0、作为判断条件是均为False
if not re.findall(r"2d{10}", '我的手机号是8615239159680'):
#代表没有匹配到
模型类查询
#查询用户对象 user = User.objects.get(username=username) #查询集合 user_query_set = User.objects.filter(username=username)今日讲解 用户注册
根据用户注册效果图，提取出用户模型类字段，进一步分析出 注册逻辑，并完成主要功能。
用户注册页面效果图
- 生成页面的图片验证码，需要两种触发方式： 默认执行，点击执行获取输入的用户名
- 利用正则校验用户名的合法性当用户名正则校验通过，向 后端 发送请求，校验 用户名是否重复
- 利用正则校验密码的合法性
- 校验 确认密码和密码 是否一致
- 利用正则校验手机号的合法性当手机号正则校验通过，向 后端 发送请求，校验手机号是否重复
- 校验验证码是否存在
用户表： 用户名、密码、手机号
可以自定义模型类，包含这些字段，在真正的项目开发中，不会自己重写一遍，而是继承 django内置的用户模型类： AbstractUser, 重写自己的字段， 但是需要在 settings.py 中 指明当前的用户模型类
from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class User(AbstractUser):
mobile = models.CharField(max_length=11, verbose_name='手机号')
class meta:
db_table = 'user_t'
verbose_name = '用户'
verbose_name_plural = verbose_name
def __str__(self):
return self.username
在配置文件中指明使用的模型类
# 指定用户模型类 AUTH_USER_MODEL = 'users.User' # app.模型类
迁移模型类
python manage.py makemigrations users python manage.py migrate users用户名重复性校验
API设计
# 用户名传递问题 GET /users/check/username/xxxx/
django
主路由匹配，分布式路由匹配通过路由匹配，获取路径中的用户名，传递给视图类中的get函数。在处理函数中，根据用户名，进行查询，得到对应的用户数量，结果>0则说明重复，否则不重复。返回结果
- 路由匹配
from django.urls import path
from .views import *
urlpatterns = [
path('check/username//', CheckUsername.as_view()),
]
- 视图接口
from rest_framework.views import APIView
from rest_framework.response import Response
from users.models import *
# Create your views here.
class CheckUsername(APIView):
def get(self, request, username):
"""
1. 用户名格式不正确，返回 404
2. 用户名格式正确，用户名重复，返回 400
3. 用户名格式正确，也不重复，返回 200
"""
# 1. 判断用户名格式
# 要求字母开头，中间为字母、数字、下划线，长度5-16
if not re.find(r'^[a-zA-Z][a-zA-Z0-9_]{4,15}$', username):
return Response({"code":404, 'msg':"用户名格式不正确"})
# 2. 根据用户名查询用户
n = User.objects.filter(username=username).count()
# 3. 判断
if n == 0:
return Response({"code": 200, 'msg': 'OK'})
else:
return Response({"code": 400, 'msg': '用户名重复'})
Vue前端用户名校验
用户在文本框输入用户名使用v-model做数据的双向绑定输入完成之后，触发 失焦事件(blur), 执行 校验 用户名的 方法， 具体如下：
// 用户名的校验方法
let validateName = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入用户名"));
}
// 用户名以字母开头,长度在5-16之间,允许字母数字下划线
const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
if (userNameRule.test(value)) {
// 前端校验，用户名复合规则
//请求后端， 判断用户名是否重复
this.$axios
.get("/users/check/username/" + this.RegisterUser.name + "/"
)
.then((res) => {
// 200代表用户名不重复，可以注册
console.log("校验用户名是否重复：", res);
if (res.data.code == 200) {
this.$refs.ruleForm.validateField("checkPass");
return callback();
} else {
// 用户名重复或者不符合规则
return callback(new Error(res.data.msg));
}
})
.catch((err) => {
return Promise.reject(err);
});
} else {
// 前端校验，用户名不符合规则
return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
}
};
密码的校验
// 密码的校验方法
let validatePass = (rule, value, callback) => {
if (value === "") {
return callback(new Error("请输入密码"));
}
// 密码以字母开头,长度在6-18之间,允许字母数字和下划线
const passwordRule = /^[a-zA-Z]w{5,17}$/;
if (passwordRule.test(value)) {
this.$refs.ruleForm.validateField("checkPass");
return callback();
} else {
return callback(
new Error("字母开头,长度6-18之间,允许字母数字和下划线")
);
}
};
// 确认密码的校验方法
let validate/confirm/iPass = (rule, value, callback) => {
if (value === "") {
return callback(new Error("请输入确认密码"));
}
// 校验是否以密码一致
if (this.RegisterUser.pass != "" && value === this.RegisterUser.pass) {
this.$refs.ruleForm.validateField("checkPass");
return callback();
} else {
return callback(new Error("两次输入的密码不一致"));
}
};
手机号重复性校验
API设计
# 手机号传递 GET /users/check/mobile/xxxx/
django
- 路由匹配
from django.urls import path
from user.views import *
urlpatterns = [
path('check/mobile//', CheckMobile.as_view()),
]
- 视图接口
class CheckMobile(APIView):
def get(self, request, mobile):
"""
1. 手机号格式不正确，返回 404
2. 手机号重复，返回 400
3. 手机号格式正确，也不重复，返回 200
"""
# 1. 校验手机号格式，前后端都需校验
#手机号以1开头,第二位3-9之间的数字，长度为11,只允许数字
if not re.findall(r"^1[3-9]d{9}$", mobile):
return Response({"code":404, 'msg':"手机号格式不正确"})
# 2. 根据手机号查询用户数量
n = User.objects.filter(mobile=mobile).count()
# 3. 判断并返回结果
if n == 0:
return Response({"code":200, 'msg': 'OK'})
else:
return Response({"code":400, 'msg': '手机号重复'})
Vue前端手机号校验
用户在文本框输入手机号通过 v-model 获取 手机号输入完成之后，触发 失焦事件(blur), 执行 校验 手机号的 方法，具体如下：
// 手机号的校验方法
let validateMobile = (rule, value, callback) => {
if (value === "") {
return callback(new Error("请输入手机号"));
}
// 手机号以1开头,第二位3-9之间的数字，长度为11,只允许数字
const mobileRule = /^1[3-9]d{9}$/;
if (mobileRule.test(value)) {
this.$axios.get("/users/check/mobile/" + this.RegisterUser.mobile + "/")
.then(res=>{
console.log("验证手机号是否可用:", res)
if(res.data.code == 200){
this.$refs.ruleForm.validateField("checkPass");
return callback();
}else{
return callback(new Error(res.data.msg))
}
}).catch(err=>{
return Promise.reject(err)
})
} else {
return callback(new Error("手机号不符合格式"));
}
};
作业
创建django项目，实现跨域配置，并定义User模型类。
创建 Vue项目，实现 axios 默认配置
实现后端用户名测试接口，实现 用户名重复性校验和合法性校验(由字母、数字组成，5-20位)
实现后端手机号 测试接口， 实现 手机号合法性校验和重复性校验
Vue前端实现用户注册页面：用户名、密码、手机号
当用户输入完成 用户名之后，立即测试 该用户名是否合法以及是否重复
当用户输入完成 手机号之后，立即测试 该手机号是否合法以及是否重复
以下所有功能使用 drf + Vue实现
- 创建goods 应用创建模型类
- 品牌Brand：品牌名商品Goods：商品名、价格、所属品牌(外键)
