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

  • 相关阅读:
    Vijos P1448 校门外的树【多解,线段树,树状数组,括号序列法+暴力优化】
    Vijos P1785 同学排序【模拟】
    Vijos P1784 数字统计【模拟】
    Vijos P1497 立体图【模拟】
    将你的wordpress博客添加到百度个性首页
    改变wordpress图片上传后的压缩质量
    优化dedecms设置文章url自定义规则
    dedecms首页调用随机文章全自动时时更新
    怎样在wordpress后台显示日志 ID
    sql批量修改wordpress文章发布时间
  • 原文地址:https://www.cnblogs.com/manqian/p/10764785.html
Copyright © 2011-2022 走看看