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()

  • 相关阅读:
    质量属性论文
    四月份-读书笔记 构建之法
    基于二元模型的拼音输入法
    融云单聊
    Gogs私有git仓库 + Drone构建CI/CD
    仿jq ajax封装支付宝小程序request.js
    Electron 和 Angular 构建桌面应用程序
    css多行溢出省略号
    package-lock和package.json
    控制窗体的小程序
  • 原文地址:https://www.cnblogs.com/manqian/p/10764785.html
Copyright © 2011-2022 走看看