项目详细图片验证码前端加后端

------------恢复内容开始------------

前端代码
<img src="" class="get_pic_code" onclick="generateImageCode()">

// TODO 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
function generateImageCode() {
    //第一步先获取uuid
    imageCodeId= generateUUID()
    //第二步url用拼接的方式获取generateUUID
    var url = "/passport/image_code?imageCodeId="+imageCodeId
    //第三步获取前端class  id用# class用.
    //attr是代表要修改标签当中的某个属性  吧src修改成url
    $(".get_pic_code").attr("src", url)
}

后端代码

def image_code():
    """"
        返回图片验证码逻辑思路
    1.接收参数(imageCodeId)
    2.校验imageCodeId是否存在
    3.生存图片验证码
    4.讲文字验证码保存到redis
    5.返回结果
        :return
    """
    # 1.接收参数(imageCodeId)
    imageCodeId = request.args.get("imageCodeId")
    # 2.校验imageCodeId是否存在
    #   用异常abort进行处理如果报错就显示403
    if not imageCodeId:
        abort(403)

    # 3.生存图片验证码
    # 先导入info里面的untils里面的captcha
　　

    # from info.untils.captcha.captcha import captcha
    name, imageCode, image = captcha.generate_captcha()
    # 4.讲文字验证码保存到redis  给图片验证码加个前缀inageCode: 用加号的形式吧字符串和变量进行拼接
    # 在保证不了完全运行的前提下要用异常进行检测
    try:
        sr.set("imageCode:"+imageCodeId, imageCode, ex=constants.IMAGE_CODE_REDIS_EXPIRES)
    except Exception as e:
        # 如果发生了异常就要写日志 首先要导入current_app  error是权限等级
        current_app.logger.error(e)
        abort(500)
    # 5返回结果
    # 在浏览器查看是乱码,去浏览器查看刷新图片的响应头Content-Type 然后把text格式更改程jpg图片就不会显示乱码了
    res = make_response(image)
    res.headers["Content-Type"]="image/jpg"
    return res


要记得注册蓝图

# 注册蓝图
　　　from info.modules.passport import passport_blue

　　　app.register_blueprint(passport_blue)

------------恢复内容结束------------