0. 图片验证码的使用流程
2.后端接口编写
verify_code.py中编写接口代码:
# coding:utf-8from . import api
from ihome.utils.captcha.captcha import captcha
from ihome import redis_store, constants, db
from flask import current_app, jsonify, make_response, request
from ihome.utils.response_code import RET
from ihome.models import User
from ihome.libs.yuntongxun.sms import CCP
import random
# from ihome.tasks.task_sms import send_sms
from ihome.tasks.sms.tasks import send_sms# GET 127.0.0.1/api/v1.0/image_codes/<image_code_id>
@api.route("/image_codes/<image_code_id>")
def get_image_code(image_code_id):"""获取图片验证码: params image_code_id: 图片验证码编号:return: 正常:验证码图片 异常:返回json"""# 业务逻辑处理# 生成验证码图片# 名字,真实文本, 图片数据name, text, image_data = captcha.generate_captcha()# 将验证码真实值与编号保存到redis中, 设置有效期# redis: 字符串 列表 哈希 set# "key": xxx# 使用哈希维护有效期的时候只能整体设置# "image_codes": {"id1":"abc", "":"", "":""} 哈希 hset("image_codes", "id1", "abc") hget("image_codes", "id1")# 单条维护记录,选用字符串# "image_code_编号1": "真实值"# "image_code_编号2": "真实值"# redis_store.set("image_code_%s" % image_code_id, text)# redis_store.expire("image_code_%s" % image_code_id, constants.IMAGE_CODE_REDIS_EXPIRES)# 记录名字 有效期 记录值try:redis_store.setex("image_code_%s" % image_code_id, constants.IMAGE_CODE_REDIS_EXPIRES, text)except Exception as e:# 记录日志current_app.logger.error(e)# return jsonify(errno=RET.DBERR, errmsg="save image code id failed")return jsonify(errno=RET.DBERR, errmsg="保存图片验证码失败")# 返回图片resp = make_response(image_data)resp.headers["Content-Type"] = "image/jpg"return resp
并在__init__.py文件中导入蓝图:
3.开发流程以及接口文档编写
接口文档1. 接口名字
2. 描述(描述清楚接口的功能)
3. url
4. 请求方式
5. 传入参数
6. 返回值
------------------------------示例如下--------------------------------
1.接口:获取图片验证码2.描述:前端访问,可以获取到验证码图片3.url: /api/v1.0/image_codes/<image_code_id>4.请求方式: GET5.传入参数:格式:路径参数 (参数是查询字符串、请求体的表单、json、xml)名字 类型 是否必须 说明image_code_id 字符串 是 验证码图片的编号6.返回值:格式: 正常:图片, 异常:json名字 类型 是否必传 说明errno 字符串 否 错误代码errmsg 字符串 否 错误内容实例:'{"errno": "4001", "errmsg": "保存图片验证码失败"}'
4.前端编写
静态文件static中,编写register.py文件:
并编写register.js文件,生成图片的编号以及请求图片的url地址。
5.效果展示
页面展示:
数据库展示: