【Django开发】0到1美多商城项目md教程第4篇:图形验证码,1. 图形验证码接口设计【附代码文档】

美多商城完整教程(附代码资料)主要内容讲述:欢迎来到美多商城!,项目准备。展示用户注册页面,创建用户模块子应用。用户注册业务实现,用户注册前端逻辑。图形验证码,图形验证码接口设计和定义。短信验证码,避免频繁发送短信验证码。账号登录,用户名登录。登录,登录开发文档。用户基本信息,查询并渲染用户基本信息。收货地址,省市区三级联动。收货地址,展示地址前后端逻辑。商品数据库表设计,SPU和SKU。准备商品数据,容器化方案Docker。首页广告,展示首页商品频道分类。商品列表页,列表页面包屑导航。商品搜索,Haystack扩展建立索引。商品详情页,统计分类商品访问量。购物车管理,添加购物车。购物车管理,删除购物车。订单,结算订单。提交订单,使用乐观锁并发下单。对接系统,订单支付功能。页面静态化,首页广告页面静态化。MySQL读写分离,MySQL主从同步。

全套笔记资料代码移步: 前往gitee仓库查看

感兴趣的小伙伴可以自取哦,欢迎大家点赞转发~


全套教程部分目录:


部分文件图片:

图形验证码

图形验证码接口设计和定义

1. 图形验证码接口设计

1.请求方式

选项方案
请求方法GET
请求地址image_codes/(?P[\w-]+)/
>
2.请求参数:路径参数
参数名类型是否必传说明
uuidstring唯一编号
>
3.响应结果:image/jpg

2. 图形验证码接口定义

1.图形验证码视图

class ImageCodeView(View):"""图形验证码"""def get(self, request, uuid):""":param request: 请求对象:param uuid: 唯一标识图形验证码所属于的用户:return: image/jpg"""pass

2.总路由

# verificationsurl(r'^', include('verifications.urls')),

3.子路由

# 图形验证码url(r'^image_codes/(?P<uuid>[\w-]+)/$', views.ImageCodeView.as_view()),

图形验证码后端逻辑

1. 准备captcha扩展包

提示:captcha扩展包用于后端生成图形验证码

可能出现的错误

  • 报错原因:环境中没有Python处理图片的库:PIL

解决办法

  • 安装Python处理图片的库:pip install Pillow

2. 准备Redis数据库

准备Redis的2号库存储验证码数据

"verify_code": { # 验证码"BACKEND": "django_redis.cache.RedisCache","LOCATION": "redis://127.0.0.1:6379/2","OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}},

3. 图形验证码后端逻辑实现

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_type='image/jpg')

图形验证码前端逻辑

1. Vue实现图形验证码展示

1.register.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

<li><label>图形验证码:</label><input type="text" name="image_code" id="pic_code" class="msg_input"><img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code"><span class="error_tip">请填写图形验证码</span>
</li>

3.图形验证码展示和存储效果

2. Vue实现图形验证码校验

1.register.html

<li><label>图形验证码:</label><input type="text" v-model="image_code" @blur="check_image_code" name="image_code" id="pic_code" class="msg_input"><img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code"><span class="error_tip" v-show="error_image_code">[[ error_image_code_message ]]</span>
</li>

2.register.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.图形验证码校验效果

短信验证码

短信验证码逻辑分析

知识要点

  1. 保存短信验证码是为注册做准备的。
  2. 为了避免用户使用图形验证码恶意测试,后端提取了图形验证码后,立即删除图形验证码。
  3. Django不具备发送短信的功能,所以我们借助第三方的容联云通讯短信平台来帮助我们发送短信验证码。

容联云通讯短信平台

1. 容联云通讯短信平台介绍

1.容联云官网

  • 容联云通讯网址:[
  • 注册并登陆

2.容联云管理控制台

3.容联云创建应用

4.应用申请上线,并进行资质认证

5.完成资质认证,应用成功上线

6.添加测试号码

7.短信模板

2. 容联云通讯短信SDK测试

1.模板短信SDK下载

  • [

    2.模板短信SDK使用说明

  • [

    3.集成模板短信SDK

  • CCPRestSDK.py:由容联云通讯开发者编写的官方SDK文件,包括发送模板短信的方法

  • ccp_sms.py:调用发送模板短信的方法

4.模板短信SDK测试

  • ccp_sms.py文件中
# -*- 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 模板Iddef sendTemplateSMS(to, datas, tempId):# 初始化REST SDKrest = 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__':# 注意: 测试的短信模板编号为1sendTemplateSMS('17600992168', ['123456', 5], 1)

5.模板短信SDK返回结果说明

{'statusCode': '000000', // 状态码。'000000'表示成功,反之,失败'templateSMS': {'smsMessageSid': 'b5768b09e5bc4a369ed35c444c13a1eb', // 短信唯一标识符'dateCreated': '20190125185207' // 短信发送时间}
}

3. 封装发送短信单例类

1.封装发送短信单例类

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._instance

2.封装发送短信单例方法

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 0else:# 返回-1,表示发送失败return -1

3.测试单例类发送模板短信结果

if __name__ == '__main__':# 注意: 测试的短信模板编号为1CCP().send_template_sms('17600992168', ['123456', 5], 1)

4. 知识要点

  1. 容联云通讯只是发送短信的平台之一,还有其他云平台可用,比如,阿里云等,实现套路都是相通的。
  2. 将发短信的类封装为单例,属于性能优化的一种方案。

短信验证码后端逻辑

1. 短信验证码接口设计

1.请求方式

选项方案
请求方法GET
请求地址/sms_codes/(?P1[3-9]\d{9})/
>
2.请求参数:路径参数和查询字符串
参数名类型是否必传说明
mobilestring手机号
image_codestring图形验证码
uuidstring唯一编号
>
3.响应结果:JSON
字段说明
code状态码
errmsg错误信息

2. 短信验证码接口定义

class SMSCodeView(View):"""短信验证码"""def get(self, reqeust, mobile):""":param reqeust: 请求对象:param mobile: 手机号:return: JSON"""pass

3. 短信验证码后端逻辑实现

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

<li><label>短信验证码:</label><input type="text" v-model="sms_code" @blur="check_sms_code" name="sms_code" id="msg_code" class="msg_input"><a @click="send_sms_code" class="get_msg_code">[[ sms_code_tip ]]</a><span class="error_tip" v-show="error_sms_code">[[ error_sms_code_message ]]</span>
</li>

2.register.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.发送短信验证码事件处理

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_code+'&uuid='+ 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.接收短信验证码参数

sms_code_client = request.POST.get('sms_code')

2.保存注册数据之前,对比短信验证码

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

<li><label>短信验证码:</label><input type="text" v-model="sms_code" @blur="check_sms_code" name="sms_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>{% if sms_code_errmsg %}<span class="error_tip">{{ sms_code_errmsg }} </span>{% endif %}
</li>

未完待续, 同学们请等待下一期

全套笔记资料代码移步: 前往gitee仓库查看

感兴趣的小伙伴可以自取哦,欢迎大家点赞转发~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/785104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java基础知识总结(32)

反射 类加载器 当JVM启动时&#xff0c;会形成由3个类加载器组成的初始类加载器层次结构。 Bootstrap ClassLoader&#xff1a;根类加载器。它负责加载Java的核心类。 Extension ClassLoader&#xff1a;扩展类加载器。它负责加载 JRE 的扩展目录&#xff08;%JAVA_HOME%/jr…

网安基础2-Sniffer的使用与防范

1. 嗅探器sniffer的工作原理 能捕获经过该网络设备的报文&#xff0c;通过分析网络流量&#xff0c;找出关键信息&#xff0c;解决网络问题。 不同于键盘捕获程序&#xff0c;如keylogger利用中断或钩子技术&#xff0c;Sniffer将网络接口置成适当的模式&#xff0c;如杂收。…

【小黑送书—第十八期】>>让工作自动化起来!无所不能的Python(文末送书)

随着我国企业数字化和信息化的深入&#xff0c;企业对办公自动化的效率和灵活性要求越来越高。Python作为一种开源的软件应用开发方式&#xff0c;通过提供强大丰富的库文件包&#xff0c;极大地简化了应用开发过程&#xff0c;降低了技术门槛。Python开发有哪些优势、挑战以及…

搭建vite+vue3项目时遇到的问题

搭建项目(vitevue3) 第一步:先安装开发工具 下载node.js https://nodejs.cn/download/ node自带npm 可通过npm -v /node -v查看npm和node是否安装成功以及版本号 以及查看vue/cli是否安装 第二步:创建项目(使用vite) 下载vite: npm install -g create-vite 创建项目:create-v…

产品经理的进阶之路

点击下载《产品经理的进阶之路》 1. 前言 本文深入剖析了产品经理这一职业从产品专员起步,逐步晋升为产品经理、高级产品经理,直至产品总监的整个职业发展路径。在每个阶段,产品经理都需承担不同的工作职责,展现出独特的职业特点。 2. 产品专员 关键词【产品需求/原型/文…

栈和队列相关

栈的顺序存储结构 #define maxsize 50 typedef int ElemType; typedef struct {ElemType data[maxsize];int top; }SqStack; 顺序栈的基本算法 初始化栈 void InitStack(SqStack *s){s.top-1;return; } 判断栈空 bool IsEmptyStack(SqStack *s){if(s.top-1){return true;…

广度优先搜索(BFS)算法详解

文章目录 广度优先搜索&#xff08;BFS&#xff09;算法详解与C实现BFS的工作原理BFS的实现C中BFS的实现 BFS的应用场景注意事项 广度优先搜索&#xff08;BFS&#xff09;算法详解与C实现 广度优先搜索&#xff08;Breadth-First Search&#xff0c;BFS&#xff09;是一种遍历…

《QDebug 2024年3月》

一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.Qt5 ApplicationWindow 不能使用父组件 Window 的 transientParent 属性 ApplicationWindow 使用 transientParent 报错&#xff1a; "ApplicationWindow.transientParent" is not available due to compone…

集合框架——Map

双列集合 特点&#xff1a; 双列集合一次需要存一对数据&#xff0c;分别为键和值键不能重复&#xff0c;值可以重复键和值是一一对应的&#xff0c;每个键只能找到自己对应的值键值这个整体 称为&#xff1a;键值对 键值对对象 Entry对象 Map集合的常用方法 public class …

ssm框架配置文件例子

emmm。。。。 就是说&#xff0c;正常ssm的配置文件长啥样&#xff1f; 就最基础的&#xff1f; 贴一下&#xff0c;备忘吧。 第一个&#xff1a;applicationContext.xml <beans xmlns"http://www.springframework.org/schema/beans"xmlns:context"http…

软考 - 系统架构设计师 - 敏捷开发方法

前言 敏捷开发方法是一种以人为核心、迭代、循序渐进的软件开发方法。它强调团队合作、客户需求和适应变化&#xff0c;旨在通过快速迭代和反馈来快速交付高质量的软件产品。 敏捷开发方法的优势在于能够快速响应变化、提高开发效率和质量、增强团队协作和沟通&#xff0c;并降…

Python程序设计 多重循环

教学案例六 多重循环 1.n之内的素数 输入n&#xff0c;显示n之内的所有素数 每行显示10个素数 例如&#xff0c;若输入500&#xff0c;结果如图所示 neval(input()) #代码开始 c 0for i in range(2, n1):for j in range(2, i):if i % j 0:breakelse:c 1print("{:5d}…

四年旅程,一路成长——小雨的创作纪念日

四年旅程&#xff0c;一路成长——小雨的创作纪念日 收到来信&#xff0c;回顾与再开始回首起点&#xff0c;初探技术世界持续前行&#xff0c;从坚持到自信今日之感&#xff0c;持续分享与感恩【3.19故事对话】我一定可以&#xff01;“新”认知状态变化感受复盘 朝着未来&…

Kubernetes(K8s)技术解析

1. K8s简介 Kubernetes&#xff08;简称K8s&#xff09;是一个开源的容器编排平台&#xff0c;旨在简化容器化应用程序的部署、扩展和管理。为开发者和运维人员提供了丰富的功能和灵活的解决方案&#xff0c;帮助他们更轻松地构建、部署和管理云原生应用程序。以下是关于Kubern…

C# OpenCvSharp-HoughCircles(霍夫圆检测) 简单计数

目录 效果 项目 代码 下载 效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using O…

http模块 服务器端如何响应(获取)静态资源?

一、静态资源与动态资源介绍&#xff1a; &#xff08;1&#xff09;静态资源 内容长时间不改变的资源。eg&#xff1a;图片、视频、css js html文件、字体文件... &#xff08;2&#xff09;动态资源 内容经常更新的资源。eg&#xff1a;百度首页、淘宝搜索列表... 二、服…

vue3从精通到入门7:ref系列

Vue 3 的 Ref 是一个集合&#xff0c;包括多个与响应式引用相关的功能&#xff0c;这些功能共同构成了 Vue 3 响应式系统的重要组成部分。以下是更全面的介绍&#xff1a; 1.ref ref 接受一个内部值并返回一个响应式且可变的 ref 对象。这个对象具有一个 .value 属性&#xf…

每天学习一个Linux命令之uniq

每天学习一个Linux命令之uniq 介绍 在Linux操作系统中&#xff0c;有许多强大的命令可以帮助我们提高工作效率。本篇博客将详细介绍一个非常有用的命令&#xff1a;uniq。uniq命令用于从已排序的文件或标准输入中删除重复的行&#xff0c;并将结果输出到标准输出中。 命令格…

【小熊猫 ide】更新支持mingw 支持c++20

没有format 头文件 GCC版本对C++的支持情况即使我使用11,也没有format 头文件小熊猫 ide https://wwe.lanzoui.com/b01os0mwd最新11可以自己更新https://royqh1979.gitee.io/redpandacpp/docsy/docs/gcc13 才支持format [7GCC 13 has added support for std::format.](https:/…

算法刷题笔记(3.25-3.29)

算法刷题笔记 3.25-3.29 1. 相同的树2. 二叉树的最近公共祖先3. 二叉搜索树中第K小的元素通过双端队列duque 中序遍历 4. 二叉树的锯齿形层序遍历new LinkedList<Integer>(levelList)双端队列复制 数组需要左右顺序&#xff0c;考虑双端队列 5. 岛屿数量6. 字典序排数&am…