• 注册验证码


    注册验证码。
    核心思路,替换注册页面的img标签的src属性。

    1、准备好文件夹:captcha
    2、导包 py
    from utils.captcha.captcha import captcha
    3、验证码生成方式 py
    @index_blue.route('/getimage')
    def get_image():
    # name, text, StringIO.value
    # text : 验证码图片对应到到文本
    # image_url : 验证码图片IO流。理解为:二进制数据,并没有实际转换成图片呢
    name, text, image_url = captcha.generate_captcha()
    session['img_code'] = text
    response = make_response(image_url) # 生成图片到响应
    # 告诉浏览器,我要返回到是一张图片
    response.headers['Content-Type'] = 'image/jpg'
    return response
    4、js逻辑
    导入
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    (1)生成唯一标识 html
    验证码:<input type="text" name="imgcode"><img src="" alt="验证码" id="a" onclick="generateImageCode()">

    <script>
    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;
    }

    </script>
    (2)替换注册页面的验证码图片 html
    var imageCodeId = ""
    var preimageCodeId = ""
    // TODO 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性
    function generateImageCode() {

    //生成一个随机字符串uuid
    imageCodeId = generateUUID()

    //拼接请求路径,和一个字符串没有什么两样
    image_url = "/get_image?cur_id="+imageCodeId + "&pre_id="+preimageCodeId

    //将image_Url设置到img标签中src, IMG标签只要设置了里面的src属性,会自动去请求跟上的地址
    $("#a").attr("src",image_url)

    // 记录上一次的uuid
    preimageCodeId = imageCodeId
    }
    generateImageCode()

  • 相关阅读:
    linux下LD_PRELOAD的用处
    三个通用的脚本,处理MySQL WorkBench导出表的JSON数据进SQLITE3
    ubuntu 18.04下,KMS_6.9.1服务器启动后,客户端连接一段时间因为libnice而crash的问题修复
    Daliy Algorithm(线段树&组合数学) -- day 53
    Daliy Algorithm(链表&搜索&剪枝) -- day 52
    Daliy Algorithm(二分&前缀和) -- day 51
    每日算法
    动态规划--01背包模型
    每日算法
    每日算法
  • 原文地址:https://www.cnblogs.com/manqian/p/10764785.html
Copyright © 2020-2023  润新知