1 用户模型类
Django提供了认证系统,文档资料可参考此链接https://yiyibooks.cn/xx/Django_1.11.6/topics/auth/index.html
Django认证系统同时处理认证和授权。简单地讲,认证验证一个用户是否它们声称的那个人,授权决定一个通过了认证的用户被允许做什么。 这里的词语“认证”同时指代这两项任务,即Django的认证系统同时提供了认证机制和权限机制。
Django的认证系统包含:
- 用户
- 权限:二元(是/否)标志指示一个用户是否可以做一个特定的任务。
- 组:对多个用户运用标签和权限的一种通用的方式。
- 一个可配置的密码哈希系统
- 用户登录或内容显示的表单和视图
- 一个可插拔的后台系统
Django默认提供的认证系统中,用户的认证机制依赖Session机制,我们在本项目中将引入JWT认证机制,将用户的身份凭据存放在Token中,然后对接Django的认证系统,帮助我们来实现:
- 用户的数据模型
- 用户密码的加密与验证
- 用户的权限系统
1.1 Django用户模型类
Django认证系统中提供了用户模型类User保存用户的数据,默认的User包含以下常见的基本字段:
-
username
必选。 150个字符以内。 用户名可能包含字母数字,
_
,@
,+
.
和-
个字符。在Django更改1.10:max_length
从30个字符增加到150个字符。 -
first_name
可选(
blank=True
)。 少于等于30个字符。 -
last_name
可选(
blank=True
)。 少于等于30个字符。 -
email
可选(
blank=True
)。 邮箱地址。 -
password
必选。 密码的哈希及元数据。 (Django 不保存原始密码)。 原始密码可以无限长而且可以包含任意字符。
-
groups
与
Group
之间的多对多关系。 -
user_permissions
与
Permission
之间的多对多关系。 -
is_staff
布尔值。 指示用户是否可以访问Admin 站点。
-
is_active
布尔值。 指示用户的账号是否激活。 我们建议您将此标志设置为
False
而不是删除帐户;这样,如果您的应用程序对用户有任何外键,则外键不会中断。它不是用来控制用户是否能够登录。 在Django更改1.10:在旧版本中,默认is_active为False不能进行登录。 -
is_superuser
布尔值。 指定这个用户拥有所有的权限而不需要给他们分配明确的权限。
-
last_login
用户最后一次登录的时间。
-
date_joined
账户创建的时间。 当账号创建时,默认设置为当前的date/time。
1.1.1 常用方法
-
set_password
(raw_password)设置用户的密码为给定的原始字符串,并负责密码的。 不会保存
User
对象。当None
为raw_password
时,密码将设置为一个不可用的密码。 -
check_password
(raw_password)如果给定的raw_password是用户的真实密码,则返回True,可以在校验用户密码时使用。
1.1.2 管理器方法
管理器方法即可以通过User.objects.
进行调用的方法。
-
create_user
(username, email=None, password=None, *\extra_fields*)创建、保存并返回一个
User
对象。 -
create_superuser
(username, email, password, *\extra_fields*)与
create_user()
相同,但是设置is_staff
和is_superuser
为True
。
1.2 创建自定义的用户模型类
Django认证系统中提供的用户模型类及方法很方便,我们可以使用这个模型类,但是字段有些无法满足项目需求,如本项目中需要保存用户的手机号,需要给模型类添加额外的字段。
Django提供了django.contrib.auth.models.AbstractUser
用户抽象模型类允许我们继承,扩展字段来使用Django认证系统的用户模型类。
我们现在在meiduo/meiduo_mall/apps
中创建Django应用users,并在配置文件中注册users应用。
- 在创建好的应用models.py中定义用户的用户模型类。
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
我们自定义的用户模型类还不能直接被Django的认证系统所识别,需要在配置文件中告知Django认证系统使用我们自定义的模型类。
- 在配置文件中进行设置
AUTH_USER_MODEL = 'users.User'
AUTH_USER_MODEL
参数的设置以点.
来分隔,表示应用名.模型类名
。
注意:Django建议我们对于AUTH_USER_MODEL
参数的设置一定要在第一次数据库迁移之前就设置好,否则后续使用可能出现未知错误。
- 执行数据库迁移
python manage.py makemigrations
python manage.py migrate
2 注册
创建好用户模型类后,我们开始来实现第一个业务逻辑——用户注册。
2.1 设计接口的思路
- 分析要实现的业务逻辑,明确在这个业务中需要涉及到几个相关子业务,将每个子业务当做一个接口来设计。
- 分析接口的功能任务,明确接口的访问方式与返回数据:
- 接口的请求方式,如GET 、POST 、PUT等
- 接口的URL路径定义
- 需要前端传递的数据及数据格式(如路径参数、查询字符串、请求体表单、JSON等)
- 返回给前端的数据及数据格式
在前后端分离的应用模式中,我们作为后端开发人员设计后端接口时,可以不用考虑返回给前端数据后,前端如何处理,这是前端开发人员的工作,我们只需明确我们要保存的或者要返回的是什么数据即可。
明确上述每一点后,即可开始编写接口。
2.2 注册业务接口分析
在用户注册中,需要实现以下接口:
- 图片验证码
- 短信验证码
- 用户名判断是否存在
- 手机号判断是否存在
- 注册保存用户数据
图片验证码、短信验证码考虑到后续可能会在其他业务中也用到,因此我们将图片验证码独立,创建一个新应用verifications,在此应用中实现图片验证码、短信验证码。
3 图片验证码
3.1 后端接口设计:
访问方式: GET /image_codes/(?P<image_code_id>[\w-]+)/
请求参数: 路径参数
参数 | 类型 | 是否必须 | 说明 |
---|---|---|---|
image_code_id | uuid字符串 | 是 | 图片验证码编号 |
返回数据:验证码图片
视图原型:
图片验证码在一个新的应用中处理,新建应用verifications
# url('^image_codes/(?P<image_code_id>[\w-]+)/$', views.ImageCodeView.as_view()),
class ImageCodeView(APIView):
"""
图片验证码
"""
pass
这个ImageCodeView继承APIView即可,原因分析如下:
因为这个视图逻辑,不需要校验参数,因为这个参数由url路由中的正则就可以校验,所以这里压根就不用考虑数据校验,这里也不需要查询数据库,所以也不需要做序列化操作。那么其实说白了,就是不需要序列化器。
那么DRF提供的类视图中只有APIView,可不用序列化器,其他的类视图都需要设置序列化器。
注册如下:
3.2 具体视图实现
首先需要用到第三方的captcha,来生成图片验证码,所以需要copy资料:
copy到meduo_mall的libs中:
在verifications/views.py中实现视图:
class ImageCodeView(APIView):
"""
图片验证码
"""
def get(self, request, image_code_id):
"""
获取图片验证码
"""
# 生成验证码图片
text, image = captcha.generate_captcha()
redis_conn = get_redis_connection("verify_codes")
redis_conn.setex("img_%s" % image_code_id, constants.IMAGE_CODE_REDIS_EXPIRES, text)
# 固定返回验证码图片数据,不需要REST framework框架的Response帮助我们决定返回响应数据的格式
# 所以此处直接使用Django原生的HttpResponse即可
return HttpResponse(image, content_type="images/jpg")
说明:
django-redis提供了get_redis_connection的方法,通过调用get_redis_connection方法传递redis的配置名称可获取到redis的连接对象,通过redis连接对象可以执行redis命令。
这里有三点需要分析:
- get_redis_connection是获取redis连接对象的方法,参数为获取的是哪个redis连接配置项,如下:(verify_code专门存储图片验证码)
我们需要在配置文件中添加一个新的redis配置,用于存放验证码数据
CACHES = { "default": { "BACKEND": "django_redis.cache.RedisCache", "LOCATION": "redis://127.0.0.1:6379/0", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } }, "session": { "BACKEND": "django_redis.cache.RedisCache", "LOCATION": "redis://127.0.0.1:6379/1", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } }, "verify_codes": { "BACKEND": "django_redis.cache.RedisCache", "LOCATION": "redis://127.0.0.1:6379/2", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } } }
- 过期时间: 在verifications应用中新建constants,然后增加图片验证码过去时间
- 最后是使用HttpResponse返回的响应
问题一,为啥还能返回HttpResponse,不是应该返回Response对象么?
首先Response是间接继承HttpResponse的,而视图本身就应该返回的是HttpResponse。在DRF中可以返回Response,主要是因为Response继承了HttpResponse。
问题二,为啥不返回Response?
这是因为Response会将内容交给json渲染器进行数据格式转换,如下:
3.3 url配置
配置视图的url:
配置应用的url:
3.4 设置域名
我们现在为前端和后端分别设置两个不同的域名
位置 | 域名 |
---|---|
前端 | www.meiduo.site |
后端 | api.meiduo.site |
但是这个域名要真想处理的话,我们需要购买域名,那么我们又不想花钱,就是想用于测试怎么办?
我们可以配置本地域名,编辑/etc/hosts
文件,可以设置本地域名
Ubuntu中:
sudo vim /etc/hosts
在文件中增加两条信息
127.0.0.1 api.meiduo.site
127.0.0.1 www.meiduo.site
windows系统中若设置本地域名,hosts文件在如下目录:
C:\Windows\System32\drivers\etc
还有一点需要配置,我们想通过api.meiduo.site访问后端django项目,那就需要修改settings配置中的ALLOWED_HOSTS:
ALLOWED_HOSTS = ['api.meiduo.site', '127.0.0.1', 'localhost', 'www.meiduo.site']
既然后端限定要求api.meiduo.site访问,那么前端在访问后端接口的时候,每次都写api.meiduo.site会很麻烦,我们在前端front_end_pc/js目录中,创建host.js文件用以为前端保存后端域名
var host = 'http://api.meiduo.site:8000';
在所有需要访问后端接口的前端页面中都引入host.js,使用host
变量即可指代后端域名。
3.5 测试后端逻辑
接下来我们就可以测试一下图片验证码的后端逻辑了,启动程序,报错:
缺少PIL,这是因为我们用到了captcha,这个captcha是生成图片验证码的,要用到图片相关的包PIL。
我们安装Pillow即可:(为啥缺少的是PIL,但我们安装的缺是Pillow,这是因为PIL安装比较麻烦,会有各种问题,所以我们就安装了可以完全替代PIL的Pillow包)
再次启动:
访问url:
还需要确定一件事情就是redis数据库存储是否成功:
3.6 启动问题
大家在启动的时候,会发现比以前多了很多红色的Debug信息,这是以为我们自己添加了日志的配置。
3.7 前端Vue代码:
js/register.js
data: {
...
image_code_id: '', // 图片验证码编号
image_code_url: '', // 验证码图片路径
},
mounted: function() {
this.generate_image_code();
},
methods: {
// 生成uuid
generate_uuid: function(){
var d = new Date().getTime();
if(window.performance && typeof window.performance.now === "function"){
d += performance.now(); //use high-precision timer if available
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c =='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
},
// 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性
generate_image_code: function(){
// 生成一个编号
// 严格一点的使用uuid保证编号唯一, 不是很严谨的情况下,也可以使用时间戳
this.image_code_id = this.generate_uuid();
// 设置页面中图片验证码img标签的src属性
this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
},
...
}
3.8 对图片验证码代码进行测试
4 短信验证码
4.1 业务处理流程
- 检查图片验证码
- 检查是否在60s内有发送记录
- 生成短信验证码
- 保存短信验证码与发送记录
- 发送短信
4.2 后端接口设计:
访问方式: GET /sms_codes/(?P<mobile>1[3-9]\d{9})/?image_code_id=xxx&text=xxx
请求参数: 路径参数与查询字符串参数
参数 | 类型 | 是否必须 | 说明 |
---|---|---|---|
mobile | str | 是 | 手机号 |
image_code_id | uuid字符串 | 是 | 图片验证码编号 |
text | str | 是 | 用户输入的图片验证码 |
返回数据: JSON
返回值 | 类型 | 是否必传 | 说明 |
---|---|---|---|
message | str | 否 | OK,发送成功 |
视图原型:在应用verifications中创建视图SMSCodeView(GenericAPIView)
# url('^sms_codes/(?P<mobile>1[3-9]\d{9})/$', views.SMSCodeView.as_view()),
class SMSCodeView(GenericAPIView):
"""
短信验证码
传入参数:
mobile, image_code_id, text
"""
pass
4.3 后端实现
在verifications/serializers.py中定义序列化器,用以对参数校验
class ImageCodeCheckSerializer(serializers.Serializer):
"""
图片验证码校验序列化器
"""
image_code_id = serializers.UUIDField()
text = serializers.CharField(max_length=4, min_length=4)
def validate(self, attrs):
"""
校验
"""
image_code_id = attrs['image_code_id']
text = attrs['text']
# 查询真实图片验证码
redis_conn = get_redis_connection('verify_codes')
real_image_code_text = redis_conn.get('img_%s' % image_code_id)
if not real_image_code_text:
raise serializers.ValidationError('图片验证码无效')
# 删除图片验证码
redis_conn.delete('img_%s' % image_code_id)
# 比较图片验证码
real_image_code_text = real_image_code_text.decode()
if real_image_code_text.lower() != text.lower():
raise serializers.ValidationError('图片验证码错误')
# 判断是否在60s内
mobile = self.context['view'].kwargs['mobile']
send_flag = redis_conn.get("send_flag_%s" % mobile)
if send_flag:
raise serializers.ValidationError('请求次数过于频繁')
return attrs
在verifications/views.py中定义实现视图:
class SMSCodeView(GenericAPIView):
"""
短信验证码
传入参数:
mobile, image_code_id, text
"""
serializer_class = ImageCodeCheckSerializer
# GET /sms_codes/(?P<mobile>1[3-9]\d{9})/?image_code_id=xxx&text=xxx
def get(self, request, mobile):
# 校验参数(由序列化器完成)
serializer = self.get_serializer(data=request.query_params)
serializer.is_valid(raise_exception=True)
# 生成短信验证码
sms_code = "%06d" % random.randint(0, 999999)
print("短信验证码:", sms_code)
# 保存短信验证码
redis_conn = get_redis_connection("verify_codes")
redis_conn.setex("sms_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
# 保存发送记录
redis_conn.setex("send_flag_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, 1)
# 发送短信
# 使用云通讯第三方平台
try:
ccp = CCP()
expires = constants.SMS_CODE_REDIS_EXPIRES // 60
result = ccp.send_template_sms(mobile, [sms_code, expires], constants.SMS_CODE_TEMP_ID)
except Exception as e:
logger.error("发送验证码短信【异常】[ mobile: %s, message: %s]" % (mobile, e))
return Response({"message": "failed"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
else:
if result == 0:
return Response({"message": "OK"})
else:
logger.error("发送验证码短信【异常】[ mobile: %s]" % mobile)
return Response({"message": "failed"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
因为这里我们要用到序列化器,所以就继承了GenericAPIView,这样的话,可以指定serializer_class,然后通过get_serializer就可以实例化序列化器了。
注意: 有些人可能会问了,既然继承了GenericAPIView,那为啥不设置queryset属性,只设置了serializer_class属性了呢?注意,这里用到谁,就设置谁。GenericAPIView没有要求必须都设置的。
发送间隔常量如下:
4.3.1 send_flag标记问题
为啥要保存一个send_flag_xx?
这个send_flag什么时候用到了?这个是在发送短信验证码序列化器中用到了。
send_flag标记的目的在于防止用户1分钟内多次请求,获取短信验证码逻辑:
那有些同学说,这个逻辑在前端做处理了呀,1分钟倒计时之后才能再次发送短信验证码。是的,但是用户是可以绕过前端,使用postman来发起请求,获取短信验证码的。
还有个问题:那能不能不要这个标记,只存储sms_xxx行不行,利用他的有效期来处理这个逻辑行不?
不行的,因为短信验证码的有效期是:5分钟。
4.3.2 云通信集成
发送短信验证码,但是需要用到云通讯的ccp,所以需要引入云通讯工具:将资料中的yuntongxun文件夹,直接copy到utils下,copy结果:
然后修改一下配置信息:
把上图中的三个配置信息,修改为自己云通讯的三个配置,如下图:
4.3.3 补充redis管道
我们来看一个问题,我们在保存短信验证码和发送记录的时候,做了两次redis的操作
这其实是比较耗费性能的,因为都是网络操作,Redis服务配置如下:
即使是本机的服务也是要进行网络通信的。
那怎么办呢?使用redis管道:
# 保存短信验证码
redis_conn = get_redis_connection("verify_codes")
# redis_conn.setex("sms_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
# # 保存发送记录
# redis_conn.setex("send_flag_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, 1)
# redis管道
pl = redis_conn.pipeline()
pl.setex("sms_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
# 保存发送记录
pl.setex("send_flag_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, 1)
# 让管道通知redis执行命令
pl.execute()
注意: 最后一定要执行管道。
4.3.4 补充删除图片验证码的逻辑
我们要做一件事情,就是避免用户拿着同一个图片验证码,获取多次短信验证码。
如何避免呢?在获取到图片验证码之后,将redis中的图片验证码删除。
4.4 前端实现
修改register.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>美多商城-注册</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/host.js"></script>
<script type="text/javascript" src="js/vue-2.5.16.js"></script>
<script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
<div class="register_con">
<div class="l_con fl">
<a class="reg_logo"><img src="images/logo.png"></a>
<div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
<div class="reg_banner"></div>
</div>
<div class="r_con fr">
<div class="reg_title clearfix">
<h1>用户注册</h1>
<a href="/login.html">登录</a>
</div>
<div class="reg_form clearfix" id="app" v-cloak>
<form id="reg_form" @submit.prevent="on_submit">
<ul>
<li>
<label>用户名:</label>
<input type="text" v-model="username" @blur="check_username" name="user_name" id="user_name">
<span v-show="error_name" class="error_tip">{{ error_name_message }}</span>
</li>
<li>
<label>密码:</label>
<input type="password" v-model="password" @blur="check_pwd" name="pwd" id="pwd">
<span v-show="error_password" class="error_tip">密码最少8位,最长20位</span>
</li>
<li>
<label>确认密码:</label>
<input type="password" v-model="password2" @blur="check_cpwd" name="cpwd" id="cpwd">
<span v-show="error_check_password" class="error_tip">两次输入的密码不一致</span>
</li>
<li>
<label>手机号:</label>
<input type="text" v-model="mobile" @blur="check_phone" name="phone" id="phone">
<span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span>
</li>
<li>
<label>图形验证码:</label>
<input type="text" v-model="image_code" @blur="check_image_code" name="pic_code" id="pic_code" class="msg_input">
<img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">
<span v-show="error_image_code" class="error_tip">{{ error_image_code_message }}</span>
</li>
<li>
<label>短信验证码:</label>
<input type="text" v-model="sms_code" @blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input">
<a @click="send_sms_code" class="get_msg_code">{{ sms_code_tip }}</a>
<span v-show="error_sms_code" class="error_tip">{{ error_sms_code_message }}</span>
</li>
<li class="agreement">
<input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow">
<label>同意”美多商城用户使用协议“</label>
<span v-show="error_allow" class="error_tip2">请勾选同意</span>
</li>
<li class="reg_sub">
<input type="submit" value="注 册" name="">
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="footer no-mp">
<div class="foot_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
<p>电话:010-****888 京ICP备*******8号</p>
</div>
<script type="text/javascript" src="js/register.js"></script>
</body>
</html>
修改register.js
var vm = new Vue({
el: '#app',
data: {
host: host,
error_name: false,
error_password: false,
error_check_password: false,
error_phone: false,
error_allow: false,
error_image_code: false,
error_sms_code: false,
error_name_message: '',
error_image_code_message: '',
error_phone_message: '',
error_sms_code_message: '',
image_code_id: '', // 图片验证码id
image_code_url: '',
sms_code_tip: '获取短信验证码',
sending_flag: false, // 正在发送短信标志
username: '',
password: '',
password2: '',
mobile: '',
image_code: '',
sms_code: '',
allow: false
},
mounted: function(){
this.generate_image_code();
},
methods: {
// 生成uuid
generate_uuid: function(){
var d = new Date().getTime();
if(window.performance && typeof window.performance.now === "function"){
d += performance.now(); //use high-precision timer if available
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c =='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
},
// 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性
generate_image_code: function(){
// 生成一个编号
// 严格一点的使用uuid保证编号唯一, 不是很严谨的情况下,也可以使用时间戳
this.image_code_id = this.generate_uuid();
// 设置页面中图片验证码img标签的src属性
this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
},
check_username: function (){
var len = this.username.length;
if(len<5||len>20) {
this.error_name_message = '请输入5-20个字符的用户名';
this.error_name = true;
} else {
this.error_name = false;
}
},
check_pwd: function (){
var len = this.password.length;
if(len<8||len>20){
this.error_password = true;
} else {
this.error_password = false;
}
},
check_cpwd: function (){
if(this.password!=this.password2) {
this.error_check_password = true;
} else {
this.error_check_password = false;
}
},
check_phone: function (){
var re = /^1[345789]\d{9}$/;
if(re.test(this.mobile)) {
this.error_phone = false;
} else {
this.error_phone_message = '您输入的手机号格式不正确';
this.error_phone = true;
}
},
check_image_code: function (){
if(!this.image_code) {
this.error_image_code_message = '请填写图片验证码';
this.error_image_code = true;
} else {
this.error_image_code = false;
}
},
check_sms_code: function(){
if(!this.sms_code){
this.error_sms_code_message = '请填写短信验证码';
this.error_sms_code = true;
} else {
this.error_sms_code = false;
}
},
check_allow: function(){
if(!this.allow) {
this.error_allow = true;
} else {
this.error_allow = false;
}
},
// 发送手机短信验证码
send_sms_code: function(){
if (this.sending_flag == true) {
return;
}
this.sending_flag = true;
// 校验参数,保证输入框有数据填写
this.check_phone();
this.check_image_code();
if (this.error_phone == true || this.error_image_code == true) {
this.sending_flag = false;
return;
}
// 向后端接口发送请求,让后端发送短信验证码
axios.get(this.host + '/sms_codes/' + this.mobile + '/?text=' + this.image_code+'&image_code_id='+ this.image_code_id, {
responseType: 'json'
})
.then(response => {
// 表示后端发送短信成功
// 倒计时60秒,60秒后允许用户再次点击发送短信验证码的按钮
var num = 60;
// 设置一个计时器
var t = setInterval(() => {
if (num == 1) {
// 如果计时器到最后, 清除计时器对象
clearInterval(t);
// 将点击获取验证码的按钮展示的文本回复成原始文本
this.sms_code_tip = '获取短信验证码';
// 将点击按钮的onclick事件函数恢复回去
this.sending_flag = false;
} else {
num -= 1;
// 展示倒计时信息
this.sms_code_tip = num + '秒';
}
}, 1000, 60)
})
.catch(error => {
if (error.response.status == 400) {
this.error_image_code_message = '图片验证码有误';
this.error_image_code = true;
this.generate_image_code();
} else {
console.log(error.response.data);
}
this.sending_flag = false;
})
},
// 注册
on_submit: function(){
this.check_username();
this.check_pwd();
this.check_cpwd();
this.check_phone();
this.check_sms_code();
this.check_allow();
}
}
});
5 跨域CORS
我们为前端和后端分别设置了两个不同的域名
位置 | 域名 |
---|---|
前端 | www.meiduo.site |
后端 | api.meiduo.site |
现在,前端与后端分处不同的域名,我们需要为后端添加跨域访问的支持。
我们使用CORS来解决后端对跨域访问的支持。
使用django-cors-headers扩展
参考文档https://github.com/ottoyiu/django-cors-headers/
- 安装
pip install django-cors-headers
- 添加应用
INSTALLED_APPS = (
...
'corsheaders',
...
)
- 中间层设置
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
- 添加白名单
# CORS
CORS_ORIGIN_WHITELIST = (
'127.0.0.1:8080',
'localhost:8080',
'www.meiduo.site:8080',
'api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
- 凡是出现在白名单中的域名,都可以访问后端接口
- CORS_ALLOW_CREDENTIALS 指明在跨域访问中,后端是否支持对cookie的操作。