Python_美多商城（用户注册）_2
展示用户注册页面
创建用户模块子应用
1. 创建用户模块子应用
1.准备
apps包，用于管理所有应用
2.在
apps包下创建应用users
$ cd ~/projects/meiduo_project/meiduo_mall/meiduo_mall/apps
$ python ../../manage.py startapp users
2. 查看项目导包路径
重要提示：
- 若要知道如何导入users应用并完成注册，需要知道项目导包路径
已知导包路径
meiduo_project/meiduo_mall已知 'users'应用所在目录
meiduo_project/meiduo_mall/meiduo_mall/apps/users得到导入'users'应用的导包路径是：
meiduo_mall/apps/users
3. 注册用户模块子应用
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'meiduo_mall.apps.users', # 用户模块应用
]
注册完users应用后，运行测试程序。
============================
追加导包路径
思考：
- 是否可以将注册users应用做的更加简便？
- 按照如下形式，直接以应用名users注册
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'users', # 用户模块应用
]
分析：
- 已知导包路径
meiduo_project/meiduo_mall- 已知'users'应用所在目录
meiduo_project/meiduo_mall/meiduo_mall/apps/users- 若要直接以应用名'users'注册
- 需要一个导包路径：
meiduo_project/meiduo_mall/meiduo_mall/apps解决办法
* 追加导包路径：`meiduo_project/meiduo_mall/meiduo_mall/apps`
1. 追加导包路径
1.查看项目BASE_DIR
2.追加导包路径
2. 重新注册用户模块应用
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'users', # 用户模块应用
]
重新注册完users应用后，运行测试程序。
3. 知识要点
- 查看导包路径
- 通过查看导包路径，可以快速的知道项目中各个包该如何的导入。
- 特别是接手老项目时，可以尽快的适应项目导包的方式。
- 追加导包路径
- 通过追加导包路径，可以简化某些目录复杂的导包方式。
==================================
展示用户注册页面
1. 准备用户注册模板文件
加载页面静态文件
美多商城-注册
2. 定义用户注册视图
class RegisterView(View):
"""用户注册"""
def get(self, request):
"""
提供注册界面
:param request: 请求对象
:return: 注册界面
"""
return render(request, 'register.html')
3. 定义用户注册路由
1.总路由
urlpatterns = [
# users
url(r'^', include('users.urls', namespace='users')),
]
2.子路由
urlpatterns = [
# 注册
url(r'^register/$', views.RegisterView.as_view(), name='register'),
]==========================
用户模型类
定义用户模型类
1. Django默认用户认证系统
- Django自带用户认证系统
- 它处理用户账号、组、权限以及基于cookie的用户会话。
- Django认证系统位置
django.contrib.auth包含认证框架的核心和默认的模型。django.contrib.contenttypes是Django内容类型系统，它允许权限与你创建的模型关联。
- Django认证系统同时处理认证和授权
- 认证：验证一个用户是否它声称的那个人，可用于账号登录。
- 授权：授权决定一个通过了认证的用户被允许做什么。
- Django认证系统包含的内容
- 用户：用户模型类、用户认证。
- 权限：标识一个用户是否可以做一个特定的任务，MIS系统常用到。
- 组：对多个具有相同权限的用户进行统一管理，MIS系统常用到。
- 密码：一个可配置的密码哈希系统，设置密码、密码校验。
2. Django默认用户模型类
- Django认证系统中提供了用户模型类User保存用户的数据。
- User对象是认证系统的核心。
-
Django认证系统用户模型类位置
-
django.contrib.auth.models.User
-
-
父类AbstractUser介绍
- User对象基本属性
- 创建用户(注册用户)必选：
username、password - 创建用户(注册用户)可选：
email、first_name、last_name、last_login、date_joined、is_active 、is_staff、is_superuse - 判断用户是否通过认证(是否登录)：
is_authenticated
- 创建用户(注册用户)必选：
- 创建用户(注册用户)的方法
user = User.objects.create_user(username, email, password, **extra_fields) - 用户认证(用户登录)的方法
from django.contrib.auth import authenticate user = authenticate(username=username, password=password, **kwargs) - 处理密码的方法
- 设置密码：
set_password(raw_password) - 校验密码：
check_password(raw_password)
- 设置密码：
- User对象基本属性
3. 自定义用户模型类
思考：为什么要自定义用户模型类？
- 观察注册界面会发现，美多商城
注册数据中必选用户mobile信息。- 但是Django默认用户模型类中没有mobile字段，所以要自定义用户模型类。
如何自定义用户模型类？
- 继承自AbstractUser（可通过阅读Django默认用户模型类的源码得知） 。
- 新增
mobile字段。
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, unique=True, verbose_name='手机号')
class Meta:
db_table = 'tb_users'
verbose_name = '用户'
verbose_name_plural = verbose_name
def __str__(self):
return self.username
4. 知识要点
- Django自带用户认证系统，核心就是User对象，并封装了一系列可用的方法和属性。
- Django用户认证系统包含了一系列对用户的操作，比如：模型类，认证，权限，分组，密码处理等。
- Django用户认证系统中的用户模型类可以自定义，继承自AbstractUser。
- Django用户认证系统说明文档
====================================
迁移用户模型类
1. 指定用户模型类
思考：为什么Django默认用户模型类是User？
- 阅读源代码：'django.conf.global_settings'
AUTH_USER_MODEL = 'auth.User'结论：
- Django用户模型类是通过全局配置项 AUTH_USER_MODEL 决定的
配置规则：
AUTH_USER_MODEL = '应用名.模型类名'
# 指定本项目用户模型类
AUTH_USER_MODEL = 'users.User'
2. 迁移用户模型类
1.创建迁移文件
python manage.py makemigrations
2.执行迁移文件
python manage.py migrate
3. 知识要点
- 用户认证系统中的用户模型类，是通过全局配置项 AUTH_USER_MODEL 决定的。
- 如果迁移自定义用户模型类，必须先配置 AUTH_USER_MODEL 。
===========================
用户注册业务实现
用户注册业务逻辑分析
1. 用户注册业务逻辑分析
用户注册接口设计和定义
1. 设计接口基本思路
- 对于接口的设计，我们要根据具体的业务逻辑，设计出适合业务逻辑的接口。
- 设计接口的思路：
- 分析要实现的业务逻辑：
- 明确在这个业务中涉及到几个相关子业务。
- 将每个子业务当做一个接口来设计。
- 分析接口的功能任务，明确接口的访问方式与返回数据：
- 请求方法（如GET、POST、PUT、DELETE等）。
- 请求地址。
- 请求参数（如路径参数、查询字符串、表单、JSON等）。
- 响应数据（如HTML、JSON等）。
- 分析要实现的业务逻辑：
2. 用户注册接口设计
1.请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | POST |
| 请求地址 | /register/ |
2.请求参数：表单参数
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| username | string | 是 | 用户名 |
| password | string | 是 | 密码 |
| password2 | string | 是 | 确认密码 |
| mobile | string | 是 | 手机号 |
| sms_code | string | 是 | 短信验证码 |
| allow | string | 是 | 是否同意用户协议 |
3.响应结果：HTML
register.html
| 响应结果 | 响应内容 |
|---|---|
| 注册失败 | 响应错误提示 |
| 注册成功 | 重定向到首页 |
3. 用户注册接口定义
1.注册视图
class RegisterView(View):
"""用户注册"""
def get(self, request):
"""
提供注册界面
:param request: 请求对象
:return: 注册界面
"""
return render(request, 'register.html')
def post(self, request):
"""
实现用户注册
:param request: 请求对象
:return: 注册结果
"""
pass
2.总路由
urlpatterns = [
# users
url(r'^', include('users.urls', namespace='users')),
]
3.子路由
urlpatterns = [
# 注册
url(r'^register/$', views.RegisterView.as_view(), name='register'),
]============================
用户注册前端逻辑
为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。
1. 用户注册页面绑定Vue数据
1.准备div盒子标签
......
2.register.html
- 绑定内容：变量、事件、错误提示等
2. 用户注册JS文件实现用户交互
1.导入Vue.js库和ajax请求的库
2.准备register.js文件
绑定内容：变量、事件、错误提示等
let vm = new Vue({
el: '#app',
// 修改Vue读取变量的语法
delimiters: ['[[', ']]'],
data: {
username: '',
password: '',
password2: '',
mobile: '',
allow: '',
error_name: false,
error_password: false,
error_password2: false,
error_mobile: false,
error_allow: false,
error_name_message: '',
error_mobile_message: '',
},
methods: {
// 校验用户名
check_username(){
},
// 校验密码
check_password(){
},
// 校验确认密码
check_password2(){
},
// 校验手机号
check_mobile(){
},
// 校验是否勾选协议
check_allow(){
},
// 监听表单提交事件
on_submit(){
},
}
});
3.用户交互事件实现
methods: {
// 校验用户名
check_username(){
let re = /^[a-zA-Z0-9_-]{5,20}$/;
if (re.test(this.username)) {
this.error_name = false;
} else {
this.error_name_message = '请输入5-20个字符的用户名';
this.error_name = true;
}
},
// 校验密码
check_password(){
let re = /^[0-9A-Za-z]{8,20}$/;
if (re.test(this.password)) {
this.error_password = false;
} else {
this.error_password = true;
}
},
// 校验确认密码
check_password2(){
if(this.password != this.password2) {
this.error_password2 = true;
} else {
this.error_password2 = false;
}
},
// 校验手机号
check_mobile(){
let re = /^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(){
if(!this.allow) {
this.error_allow = true;
} else {
this.error_allow = false;
}
},
// 监听表单提交事件
on_submit(){
this.check_username();
this.check_password();
this.check_password2();
this.check_mobile();
this.check_allow();
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;
}
},
}
4. 知识要点
- Vue绑定页面的套路
- 导入Vue.js库和ajax请求的库
- 准备div盒子标签
- 准备js文件
- html页面绑定变量、事件等
- js文件定义变量、事件等
- 错误提示
- 如果错误提示信息是固定的，可以把错误提示信息写死，再通过v-show控制是否展示
- 如果错误提示信息不是固定的，可以使用绑定的变量动态的展示错误提示信息，再通过v-show控制是否展示
- 修改Vue变量的读取语法，避免和Django模板语法冲突
delimiters: ['[[', ']]']
- 后续的页面中如果有类似的交互和刷新效果，也可按照此套路实现
==========================
用户注册后端逻辑
1. 接收参数
提示：用户注册数据是从注册表单发送过来的，所以使用
request.POST来提取。
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')
2. 校验参数
前端校验过的后端也要校验，后端的校验和前端的校验是一致的
# 判断参数是否齐全
# 判断用户名是否是5-20个字符
# 判断密码是否是8-20个数字
# 判断两次密码是否一致
# 判断手机号是否合法
# 判断是否勾选用户协议
# 判断参数是否齐全
if not all([username, password, password2, mobile, allow]):
return http.HttpResponseForbidden('缺少必传参数')
# 判断用户名是否是5-20个字符
if not re.match(r'^[a-zA-Z0-9_-]{5,20}$', username):
return http.HttpResponseForbidden('请输入5-20个字符的用户名')
# 判断密码是否是8-20个数字
if not re.match(r'^[0-9A-Za-z]{8,20}$', password):
return http.HttpResponseForbidden('请输入8-20位的密码')
# 判断两次密码是否一致
if password != password2:
return http.HttpResponseForbidden('两次输入的密码不一致')
# 判断手机号是否合法
if not re.match(r'^1[3-9]\d{9}$', mobile):
return http.HttpResponseForbidden('请输入正确的手机号码')
# 判断是否勾选用户协议
if allow != 'on':
return http.HttpResponseForbidden('请勾选用户协议')
提示：这里校验的参数，前端已经校验过，如果此时参数还是出错，说明该请求是非正常渠道发送的，所以直接禁止本次请求。
3. 保存注册数据
- 这里使用Django认证系统用户模型类提供的 create_user() 方法创建新的用户。
- 这里 create_user() 方法中封装了 set_password() 方法加密密码。
# 保存注册数据
try:
User.objects.create_user(username=username, password=password, mobile=mobile)
except DatabaseError:
return render(request, 'register.html', {'register_errmsg': '注册失败'})
# 响应注册结果
return http.HttpResponse('注册成功，重定向到首页')
如果注册失败，我们需要在页面上渲染出注册失败的提示信息。
{% if register_errmsg %}
{{ register_errmsg }}
{% endif %}
4. 响应注册结果
- 重要提示：注册成功，重定向到首页
1.创建首页广告应用：contents
$ cd ~/projects/meiduo_project/meiduo_mall/meiduo_mall/apps
$ python ../../manage.py startapp contents
2.定义首页广告视图：IndexView
class IndexView(View):
"""首页广告"""
def get(self, request):
"""提供首页广告界面"""
return render(request, 'index.html')
3.配置首页广告路由：绑定命名空间
# contents
url(r'^', include('contents.urls', namespace='contents')),
# 首页广告
url(r'^$', views.IndexView.as_view(), name='index'),
4.测试首页广告是否可以正常访问
http://127.0.0.1:8000/
5.响应注册结果：重定向到首页
# 响应注册结果
return redirect(reverse('contents:index'))
5. 知识要点
- 后端逻辑编写套路：
- 业务逻辑分析
- 接口设计和定义
- 接收和校验参数
- 实现主体业务逻辑
- 响应结果
- 注册业务逻辑核心思想：
- 保存用户注册数据
====================================
状态保持
说明：
- 如果需求是注册成功后即表示用户登入成功，那么此时可以在注册成功后实现状态保持
- 如果需求是注册成功后不表示用户登入成功，那么此时不用在注册成功后实现状态保持
美多商城的需求是：注册成功后即表示用户登入成功
1. login()方法介绍
- 用户登入本质：
- 状态保持
- 将通过认证的用户的唯一标识信息（比如：用户ID）写入到当前浏览器的 cookie 和服务端的 session 中。
- login()方法：
- Django用户认证系统提供了
login()方法。 - 封装了写入session的操作，帮助我们快速登入一个用户，并实现状态保持。
- Django用户认证系统提供了
-
login()位置：
-
django.contrib.auth.__init__.py文件中。login(request, user, backend=None)
-
- 状态保持 session 数据存储的位置：Redis数据库的1号库
SESSION_ENGINE = "django.contrib.sessions.backends.cache" SESSION_CACHE_ALIAS = "session"
2. login()方法登入用户
# 保存注册数据
try:
user = User.objects.create_user(username=username, password=password, mobile=mobile)
except DatabaseError:
return render(request, 'register.html', {'register_errmsg': '注册失败'})
# 登入用户，实现状态保持
login(request, user)
# 响应注册结果
return redirect(reverse('contents:index'))
3. 查看状态保持结果
4. 知识要点
- 登入用户，并实现状态保持的方式：
login(request, user, backend=None)
=====================
用户名重复注册
1. 用户名重复注册逻辑分析
2. 用户名重复注册接口设计和定义
1.请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | GET |
| 请求地址 | /usernames/(?P |
2.请求参数：路径参数
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| username | string | 是 | 用户名 |
3.响应结果：JSON
| 响应结果 | 响应内容 |
|---|---|
| code | 状态码 |
| errmsg | 错误信息 |
| count | 记录该用户名的个数 |
3. 用户名重复注册后端逻辑
class UsernameCountView(View):
"""判断用户名是否重复注册"""
def get(self, request, username):
"""
:param request: 请求对象
:param username: 用户名
:return: JSON
"""
count = User.objects.filter(username=username).count()
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'OK', 'count': count})
4. 用户名重复注册前端逻辑
if (this.error_name == false) {
let url = '/usernames/' + this.username + '/count/';
axios.get(url,{
responseType: 'json'
})
.then(response => {
if (response.data.count == 1) {
this.error_name_message = '用户名已存在';
this.error_name = true;
} else {
this.error_name = false;
}
})
.catch(error => {
console.log(error.response);
})
}
5. 知识要点
- 判断用户名重复注册的核心思想：
- 使用用户名查询该用户名对应的记录是否存在，如果存在，表示重复注册了，反之，没有重复注册。
- axios发送异步请求套路：
- 处理用户交互
- 收集请求参数
- 准备请求地址
- 发送异步请求
- 得到服务器响应
- 控制界面展示效果
=====================================
手机号重复注册
1. 手机号重复注册逻辑分析
2. 手机号重复注册接口设计和定义
1.请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | GET |
| 请求地址 | /mobiles/(?P |
2.请求参数：路径参数
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| mobile | string | 是 | 手机号 |
3.响应结果：JSON
| 响应结果 | 响应内容 |
|---|---|
| code | 状态码 |
| errmsg | 错误信息 |
| count | 记录该用户名的个数 |
3. 手机号重复注册后端逻辑
class MobileCountView(View):
"""判断手机号是否重复注册"""
def get(self, request, mobile):
"""
:param request: 请求对象
:param mobile: 手机号
:return: JSON
"""
count = User.objects.filter(mobile=mobile).count()
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'OK', 'count': count})
4. 手机号重复注册前端逻辑
if (this.error_mobile == false) {
let url = '/mobiles/'+ this.mobile + '/count/';
axios.get(url, {
responseType: 'json'
})
.then(response => {
if (response.data.count == 1) {
this.error_mobile_message = '手机号已存在';
this.error_mobile = true;
} else {
this.error_mobile = false;
}
})
.catch(error => {
console.log(error.response);
})
}===========================