律师网站建设与维护,wordpress制作企业,做网站策划书文档,黄骅市领导班子最新调整本系列文章md笔记#xff08;已分享#xff09;主要讨论django商城项目相关知识。项目利用Django框架开发一套前后端不分离的商城项目#xff08;4.0版本#xff09;含代码和文档。功能包括前后端不分离#xff0c;方便SEO。采用Django Jinja2模板引擎 Vue.js实现前后端…
本系列文章md笔记已分享主要讨论django商城项目相关知识。项目利用Django框架开发一套前后端不分离的商城项目4.0版本含代码和文档。功能包括前后端不分离方便SEO。采用Django Jinja2模板引擎 Vue.js实现前后端逻辑Nginx服务器反向代理Nginx服务器静态首页、商品详情页、uwsgi服务器美多商场业务场景后端服务MySQL、Redis、Celery、RabbitMQ、Docker、FastDFS、Elasticsearch、Crontab外部接口容联云、QQ互联、支付宝。
全套笔记和代码自取移步gitee仓库 gitee仓库获取完整文档和代码
感兴趣的小伙伴可以自取哦欢迎大家点赞转发~ 共 11 章132 子模块 图形验证码
图形验证码接口设计和定义
1. 图形验证码接口设计 1.请求方式 |选项|方案| |---|---| |请求方法|GET| |请求地址|image_codes/(?P[\w-])/| 2.请求参数路径参数 |参数名|类型|是否必传|说明| |---|---|---|---| |uuid|string|是|唯一编号| 3.响应结果image/jpg 2. 图形验证码接口定义 1.图形验证码视图 python class ImageCodeView(View): 图形验证码
def get(self, request, uuid)::param request: 请求对象:param uuid: 唯一标识图形验证码所属于的用户:return: image/jpgpass2.总路由 python
verifications
url(r^, include(verifications.urls)), 3.子路由 python
图形验证码
url(r^image_codes/(?P [\w-])/$, views.ImageCodeView.as_view()),
图形验证码后端逻辑
1. 准备captcha扩展包 提示captcha扩展包用于后端生成图形验证码 可能出现的错误 报错原因环境中没有Python处理图片的库PIL 解决办法 安装Python处理图片的库pip install Pillow
2. 准备Redis数据库 准备Redis的2号库存储验证码数据 python verify_code: { # 验证码 BACKEND: django_redis.cache.RedisCache, LOCATION: redis://127.0.0.1:6379/2, OPTIONS: { CLIENT_CLASS: django_redis.client.DefaultClient, } },
3. 图形验证码后端逻辑实现
python class ImageCodeView(View): 图形验证码
def get(self, request, uuid)::param request: 请求对象:param uuid: 唯一标识图形验证码所属于的用户:return: image/jpg# 生成图片验证码text, image captcha.generate_captcha()# 保存图片验证码redis_conn get_redis_connection(verify_code)redis_conn.setex(img_%s % uuid, constants.IMAGE_CODE_REDIS_EXPIRES, text)# 响应图片验证码return http.HttpResponse(image, content_typeimage/jpg)图形验证码前端逻辑
1. Vue实现图形验证码展示 1.register.js js mounted(){ // 生成图形验证码 this.generate_image_code(); }, methods: { // 生成图形验证码 generate_image_code(){ // 生成UUID。generateUUID() : 封装在common.js文件中需要提前引入 this.uuid generateUUID(); // 拼接图形验证码请求地址 this.image_code_url /image_codes/ this.uuid /; }, ...... } 2.register.html html 图形验证码: 请填写图形验证码 3.图形验证码展示和存储效果 2. Vue实现图形验证码校验 1.register.html html 图形验证码: [[ error_image_code_message ]] 2.register.js js check_image_code(){ if(!this.image_code) { this.error_image_code_message 请填写图片验证码; this.error_image_code true; } else { this.error_image_code false; } }, 3.图形验证码校验效果 短信验证码
短信验证码逻辑分析 知识要点
保存短信验证码是为注册做准备的。为了避免用户使用图形验证码恶意测试后端提取了图形验证码后立即删除图形验证码。Django不具备发送短信的功能所以我们借助第三方的容联云通讯短信平台来帮助我们发送短信验证码。
容联云通讯短信平台
1. 容联云通讯短信平台介绍 1.容联云官网 容联云通讯网址https://www.yuntongxun.com/注册并登陆 2.容联云管理控制台 3.容联云创建应用 4.应用申请上线并进行资质认证 5.完成资质认证应用成功上线 6.添加测试号码 7.短信模板 2. 容联云通讯短信SDK测试 1.模板短信SDK下载 https://www.yuntongxun.com/doc/ready/demo/1_4_1_2.html 2.模板短信SDK使用说明 http://doc.yuntongxun.com/p/5a533e0c3b8496dd00dce08c 3.集成模板短信SDK CCPRestSDK.py由容联云通讯开发者编写的官方SDK文件包括发送模板短信的方法 ccp_sms.py调用发送模板短信的方法 4.模板短信SDK测试 ccp_sms.py文件中
python
-- coding:utf-8 --
from verifications.libs.yuntongxun.CCPRestSDK import REST
说明主账号登陆云通讯网站后可在控制台-应用中看到开发者主账号ACCOUNT SID
_accountSid 8aaf070862181ad5016236f3bcc811d5
说明主账号Token登陆云通讯网站后可在控制台-应用中看到开发者主账号AUTH TOKEN
_accountToken 4e831592bd464663b0de944df13f16ef
请使用管理控制台首页的APPID或自己创建应用的APPID
_appId 8aaf070868747811016883f12ef3062c
说明请求地址生产环境配置成app.cloopen.com
_serverIP sandboxapp.cloopen.com
说明请求端口 生产环境为8883
_serverPort 8883
说明REST API版本号保持不变
_softVersion 2013-12-26
云通讯官方提供的发送短信代码实例
发送模板短信
param to 手机号码
param datas 内容数据 格式为数组 例如{12,34}如不需替换请填
param $tempId 模板Id
def sendTemplateSMS(to, datas, tempId): # 初始化REST SDK rest REST(_serverIP, _serverPort, _softVersion) rest.setAccount(_accountSid, _accountToken) rest.setAppId(_appId)
result rest.sendTemplateSMS(to, datas, tempId)
print(result)
for k, v in result.items():if k templateSMS:for k, s in v.items():print(%s:%s % (k, s))else:print(%s:%s % (k, v))if name main: # 注意 测试的短信模板编号为1 sendTemplateSMS(17600992168, [123456, 5], 1) 5.模板短信SDK返回结果说明 json { statusCode: 000000, // 状态码。000000表示成功反之失败 templateSMS: { smsMessageSid: b5768b09e5bc4a369ed35c444c13a1eb, // 短信唯一标识符 dateCreated: 20190125185207 // 短信发送时间 } }
3. 封装发送短信单例类 1.封装发送短信单例类 python class CCP(object): 发送短信的单例类
def __new__(cls, *args, **kwargs):# 判断是否存在类属性_instance_instance是类CCP的唯一对象即单例if not hasattr(CCP, _instance):cls._instance super(CCP, cls).__new__(cls, *args, **kwargs)cls._instance.rest REST(_serverIP, _serverPort, _softVersion)cls._instance.rest.setAccount(_accountSid, _accountToken)cls._instance.rest.setAppId(_appId)return cls._instance2.封装发送短信单例方法 python def send_template_sms(self, to, datas, temp_id): 发送模板短信单例方法 :param to: 注册手机号 :param datas: 模板短信内容数据格式为列表例如[123456, 5]如不需替换请填 :param temp_id: 模板编号默认免费提供id为1的模板 :return: 发短信结果 result self.rest.sendTemplateSMS(to, datas, temp_id) if result.get(statusCode) 000000: # 返回0表示发送短信成功 return 0 else: # 返回-1表示发送失败 return -1 3.测试单例类发送模板短信结果 python if __name__ __main__: # 注意 测试的短信模板编号为1 CCP().send_template_sms(17600992168, [123456, 5], 1)
4. 知识要点
容联云通讯只是发送短信的平台之一还有其他云平台可用比如阿里云等实现套路都是相通的。将发短信的类封装为单例属于性能优化的一种方案。
短信验证码后端逻辑
1. 短信验证码接口设计 1.请求方式 |选项|方案| |---|---| |请求方法|GET| |请求地址|/sms_codes/(?P1[3-9]\d{9})/| 2.请求参数路径参数和查询字符串 |参数名|类型|是否必传|说明| |---|---|---|---| |mobile|string|是|手机号| |image_code|string|是|图形验证码| |uuid|string|是|唯一编号| 3.响应结果JSON |字段|说明| |---|---| |code|状态码| |errmsg|错误信息|
2. 短信验证码接口定义
python class SMSCodeView(View): 短信验证码
def get(self, reqeust, mobile)::param reqeust: 请求对象:param mobile: 手机号:return: JSONpass3. 短信验证码后端逻辑实现
python class SMSCodeView(View): 短信验证码
def get(self, reqeust, mobile)::param reqeust: 请求对象:param mobile: 手机号:return: JSON# 接收参数image_code_client reqeust.GET.get(image_code)uuid reqeust.GET.get(uuid)# 校验参数if not all([image_code_client, uuid]):return http.JsonResponse({code: RETCODE.NECESSARYPARAMERR, errmsg: 缺少必传参数})# 创建连接到redis的对象redis_conn get_redis_connection(verify_code)# 提取图形验证码image_code_server redis_conn.get(img_%s % uuid)if image_code_server is None:# 图形验证码过期或者不存在return http.JsonResponse({code: RETCODE.IMAGECODEERR, errmsg: 图形验证码失效})# 删除图形验证码避免恶意测试图形验证码try:redis_conn.delete(img_%s % uuid)except Exception as e:logger.error(e)# 对比图形验证码image_code_server image_code_server.decode() # bytes转字符串if image_code_client.lower() ! image_code_server.lower(): # 转小写后比较return http.JsonResponse({code: RETCODE.IMAGECODEERR, errmsg: 输入图形验证码有误})# 生成短信验证码生成6位数验证码sms_code %06d % random.randint(0, 999999)logger.info(sms_code)# 保存短信验证码redis_conn.setex(sms_%s % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)# 发送短信验证码CCP().send_template_sms(mobile,[sms_code, constants.SMS_CODE_REDIS_EXPIRES // 60], constants.SEND_SMS_TEMPLATE_ID)# 响应结果return http.JsonResponse({code: RETCODE.OK, errmsg: 发送短信成功})短信验证码前端逻辑
1. Vue绑定短信验证码界面 1.register.html html 短信验证码: [[ sms_code_tip ]] [[ error_sms_code_message ]] 2.register.js js check_sms_code(){ if(this.sms_code.length ! 6){ this.error_sms_code_message 请填写短信验证码; this.error_sms_code true; } else { this.error_sms_code false; } },
2. axios请求短信验证码 1.发送短信验证码事件处理 js send_sms_code(){ // 避免重复点击 if (this.sending_flag true) { return; } this.sending_flag true;
// 校验参数
this.check_mobile();
this.check_image_code();
if (this.error_mobile true || this.error_image_code true) {this.sending_flag false;return;
}// 请求短信验证码
let url /sms_codes/ this.mobile /?image_code this.image_codeuuid this.uuid;
axios.get(url, {responseType: json
}).then(response {if (response.data.code 0) {// 倒计时60秒var num 60;var t setInterval(() {if (num 1) {clearInterval(t);this.sms_code_tip 获取短信验证码;this.sending_flag false;} else {num - 1;// 展示倒计时信息this.sms_code_tip num 秒;}}, 1000, 60)} else {if (response.data.code 4001) {this.error_image_code_message response.data.errmsg;this.error_image_code true;} else { // 4002this.error_sms_code_message response.data.errmsg;this.error_sms_code true;}this.generate_image_code();this.sending_flag false;}}).catch(error {console.log(error.response);this.sending_flag false;})}, 2.发送短信验证码效果展示 补充注册时短信验证逻辑
1. 补充注册时短信验证后端逻辑 1.接收短信验证码参数 python sms_code_client request.POST.get(sms_code) 2.保存注册数据之前对比短信验证码 python redis_conn get_redis_connection(verify_code) sms_code_server redis_conn.get(sms_%s % mobile) if sms_code_server is None: return render(request, register.html, {sms_code_errmsg:无效的短信验证码}) if sms_code_client ! sms_code_server.decode(): return render(request, register.html, {sms_code_errmsg: 输入短信验证码有误})
2. 补充注册时短信验证前端逻辑 1.register.html html 短信验证码: [[ sms_code_tip ]] [[ error_sms_code_message ]] {% if sms_code_errmsg %} {{ sms_code_errmsg }} {% endif %}
未完待续 同学们请等待下一期
全套笔记和代码自取移步gitee仓库 gitee仓库获取完整文档和代码
感兴趣的小伙伴可以自取哦欢迎大家点赞转发~
