Flask项目之手机端租房网站的实战开发（五）

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！

接着上一篇博客继续往下写 ：https://blog.csdn.net/qq_41782425/article/details/85706012

目录

一丶图片验证码前端编写

二丶短信验证码后端编写

三丶测试向后端接口发送短信验证码

---

一丶图片验证码前端编写

1.当用户进入到注册页后，页面进行刷新，所以在static前端静态资源register.js中定义一个generateImageCode函数，当页面加载完后，形成图片验证码的后端地址， 设置到页面中，让浏览请求验证码图片，同理在register.html中onclick点击验证码图片时，也要触发generateImageCode函数

register.html

<div class="input-group-addon image-code" onclick="generateImageCode();"><img src=""></div>

register.js 

$(document).ready(function() {
    generateImageCode();}

 2.生成图片验证码编号两种方式：第一种是时间轴；第二种是UUID全局唯一标识符，这里我们使用UUID

• step1 在js中获取UUID的值（这里在网上找的一个代码）

function generateUUID() {
    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;
}

• step2 在generateImageCode函数中调用generateUUID，将生成的UUID赋值给imageCodeId变量，记得先使用var在函数外声明该变量

function generateImageCode() {
    // 生成图片验证码编号
    imageCodeId = generateUUID();
}

3.拼接二维码图片的url地址，设置register.html中图片二维码div标签class=image_code下的img标签的src地址为拼接后的url，也就是二维码图片的链接地址

 var url = "/api/v1.0/image_codes/" + imageCodeId;
    $(".image-code img").attr("src", url);

4.运行程序，清除浏览器缓存，输入http://127.0.0.1:5000/register.html后，查看注册页面二维码生成是否成功

5.在后端redis数据库中成功生成image_code_uuid的key了

 

6.效果图，鼠标连续点击图片验证码，请注意验证码

 二丶短信验证码后端编写

1.发送短信服务介绍，这里使用的是容联云，云通讯

• step1 需要在官网https://www.yuntongxun.com/进行注册，注册时会通过打电话形式告诉你验证码，注册成功后会赠送8元测试费用，如下图

• step2 然后选择测试平台，添加测试手机号，最多三个，验证成功才能添加上 

• step3 进入开发文档---Rest API----短信----短信发送接口，具体文档说明请到官网自寻查看

•  step4 我们直接去下载官方给开发人员封装好的工具SDK，找到Demo示例，然后在文章上方点击Demo下载，找到python语言对应的SDK进行下载即可

• step5 解压后的目录文件如下，请查看README.txt等说明文件，DEMO问案列，这里我们只需要将SDK文件拷贝到项目中的libs目录下，并命名为yuntongxun，然后再将DEMO文件夹中的SendTemplateSMS.py文件拷贝到yuntongxun目录下

2.封装发送短信辅助工具

• step1 在libs以及云通讯目录下创建init文件，使其变成python的包

• step2 在SendTemplateSMS.py文件中创建一个CCP的类，用于封装发送短信的辅助类，目的是在我们调用sendTemplateSMS方法的时候，只初始化一次REST SDK，使用python单例达到不管创建多少个对象，都只初始化一次

• step3 将云通讯开发者主账号中的ACCOUNT SID和AUTH TOKEN以及AppID，复制到代码中

• step4 编写测试脚本，内容分为验证码9527，有效期5分钟，使用测试模板1

• step5 运行sendTemplateSMS程序，最下面的statusCode为000000，代表短信发送成功，在官网短信接口有详细说明

• step6 此时手机便收到了短信

• step7 修改代码，不需要使用官方的代码将result字典数据进行遍历打印，而是只获取状态statusCode进行判断，如果为000000代表发送成功返回0，否则发送失败返回-1

查看运行结果，验证逻辑没有问题

• step8 将sendTemplateSMS重命名为sendSMS，为了后面使用方便 

3.定义获取短信接口

• step1 在接口文件verify_code中定义一个get_sms_code的视图函数

def get_sms_code()

• step2 构建路由规则，同理与构建图片验证码一样，使用restful风格，并且需要有一个短信验证码的编码，以手机进行编号，之前在分析图片验证码时，已经说过发送短信验证码时需携带图片验证码的文本内容以及图片验证码的编号，所以路由如下

# GET /api/v1.0/sms_codes/<mobile>?image_code=xxxx&image_code_id=xxxx

• step3 获取image_code以及image_code_id

image_code = request.args.get("image_code")
image_code_id = request.args.get("image_code_id")

•  step4 校验参数

# 校验参数
if not all([image_code, image_code_id]):
    # 参数不完整返回对应错误
    return jsonify(errno=RET.PARAMERR, errmsg="参数不完整")

• step5 业务逻辑处理，从redis数据库取出验证码与用户输入的验证码进行校验，期间需要对验证码是否存在进行判断

• step6 接下来判断手机号是否存在

• step7 随机生成6位数验证码（使用字符串格式化的方式来生成，从0到999999，当不足6位时，以0做填充）

sms_code = "%06d" % random.randint(0, 999999)

• step8 在redis数据库中保存真实的短信验证码

•  step9 发送短信

• step10 异常说明
• 放在try与except中的代码越少越好，会影响程序执行效率 

三丶测试向后端接口发送短信验证码

•  step1 打开Postman测试工具，发送接口路由127.0.0.1:5000/api/v1.0/sms_codes/180xxxxxx96?image_code&image_code_id

• step2 运行项目

• step3 在浏览器输入http://127.0.0.1:5000/register.html，进入项目注册页面

• step4 回到Postman工具，取消参数，什么都不传的情况下，出现如下错误信息，就是我们在程序中定义的错误信息

• step5 此时刷新http://127.0.0.1:5000/register.html注册页，查看验证码，并在redis数据中获取验证码

获取redis数据库中图片验证码的文本值与注册页图片二维码的值一样

• step6 当过了180s后也就是我们在constants.py中设置的图片验证码有效期，在Postman工具中发送地址，提示 我们定义的错误图片验证码失效，在程序中的逻辑为无法在redis数据库中获取image_code_id键的值，或者说不存在此键，返回结果为None

• step7 刷新注册页面，获取新的验证码，在Postman工具中向错误号码发送验证码，或者说是未在云通讯测试平台关联的号码发送验证码，则出现以下错误提示，这个提示就是我们在接口文件中写的res不等于0的时候，返回错误的json格式的错误信息

• step8 刷新http://127.0.0.1:5000/register.html，将最新的验证码存储到redis数据库，在Postman工具中向正确地址发送正确号码，返回的响应数据为发送成功，如下图所示

注册页界面

redis数据库中的图片验证码值

 Postman响应数据