网站域名登记证明文件,在百度上如何上传自己的网站,长链接转短链接在线工具,网页设计制作成品美多商城完整教程#xff08;附代码资料#xff09;主要内容讲述#xff1a;欢迎来到美多商城#xff01;#xff0c;项目准备。展示用户注册页面#xff0c;创建用户模块子应用。用户注册业务实现#xff0c;用户注册前端逻辑。图形验证码#xff0c;图形验证码接口设…
美多商城完整教程附代码资料主要内容讲述欢迎来到美多商城项目准备。展示用户注册页面创建用户模块子应用。用户注册业务实现用户注册前端逻辑。图形验证码图形验证码接口设计和定义。短信验证码避免频繁发送短信验证码。账号登录用户名登录。登录登录开发文档。用户基本信息查询并渲染用户基本信息。收货地址省市区三级联动。收货地址展示地址前后端逻辑。商品数据库表设计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/jpgpass2.总路由 # verificationsurl(r^, include(verifications.urls)),3.子路由 # 图形验证码url(r^image_codes/(?Puuid[\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_typeimage/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 lilabel图形验证码:/labelinput typetext nameimage_code idpic_code classmsg_inputimg :srcimage_code_url clickgenerate_image_code alt图形验证码 classpic_codespan classerror_tip请填写图形验证码/span
/li3.图形验证码展示和存储效果 2. Vue实现图形验证码校验 1.register.html lilabel图形验证码:/labelinput typetext v-modelimage_code blurcheck_image_code nameimage_code idpic_code classmsg_inputimg :srcimage_code_url clickgenerate_image_code alt图形验证码 classpic_codespan classerror_tip v-showerror_image_code[[ error_image_code_message ]]/span
/li2.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.图形验证码校验效果 短信验证码
短信验证码逻辑分析 知识要点
保存短信验证码是为注册做准备的。为了避免用户使用图形验证码恶意测试后端提取了图形验证码后立即删除图形验证码。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._instance2.封装发送短信单例方法 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 -13.测试单例类发送模板短信结果 if __name__ __main__:# 注意 测试的短信模板编号为1CCP().send_template_sms(17600992168, [123456, 5], 1)4. 知识要点
容联云通讯只是发送短信的平台之一还有其他云平台可用比如阿里云等实现套路都是相通的。将发短信的类封装为单例属于性能优化的一种方案。
短信验证码后端逻辑
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: JSONpass3. 短信验证码后端逻辑实现
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 lilabel短信验证码:/labelinput typetext v-modelsms_code blurcheck_sms_code namesms_code idmsg_code classmsg_inputa clicksend_sms_code classget_msg_code[[ sms_code_tip ]]/aspan classerror_tip v-showerror_sms_code[[ error_sms_code_message ]]/span
/li2.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_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.接收短信验证码参数 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 lilabel短信验证码:/labelinput typetext v-modelsms_code blurcheck_sms_code namesms_code idmsg_code classmsg_inputa clicksend_sms_code classget_msg_code[[ sms_code_tip ]]/aspan v-showerror_sms_code classerror_tip[[ error_sms_code_message ]]/span{% if sms_code_errmsg %}span classerror_tip{{ sms_code_errmsg }} /span{% endif %}
/li未完待续 同学们请等待下一期
全套笔记资料代码移步 前往gitee仓库查看
感兴趣的小伙伴可以自取哦欢迎大家点赞转发~
