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.效果展示

頁面展示：
數據庫展示：

總結

以上是生活随笔為你收集整理的Flsak项目--图片验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。