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.效果展示
頁面展示:
數據庫展示: