zoukankan      html  css  js  c++  java
  • 注册验证码

    注册验证码。
    核心思路,替换注册页面的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()

  • 相关阅读:
    Notes of Daily Scrum Meeting(12.18)
    Notes of Daily Scrum Meeting(12.17)
    Notes of Daily Scrum Meeting(12.16)
    Notes of Daily Scrum Meeting(12.8)
    Notes of Daily Scrum Meeting(12.5)
    Notes of Daily Scrum Meeting(12.3)
    Notes of Daily Scrum Meeting(11.12)
    Linux中profile、bashrc、bash_profile之间的区别和联系
    Linux GCC编译
    mysql 5.7.16 远程连接
  • 原文地址:https://www.cnblogs.com/manqian/p/10764785.html
Copyright © 2011-2022 走看看