zoukankan      html  css  js  c++  java
  • flask中注册验证码和分页

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

    1、准备好文件夹:captcha
    2、导包
    from utils.captcha.captcha import captcha
    3、验证码生成方式
    # 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'
    4、js逻辑
    (1)生成唯一标识
    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;
    }
    (2)替换注册页面的验证码图片
    var imageCodeId = ""
    var preimageCodeId = ""
    // TODO 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性
    function generateImageCode() {

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

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

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

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

    分页

    1、引入分页插件样式
    <link rel="stylesheet" href="../../static/admin/css/jquery.pagination.css">
    2、引入jquery分页插件, 引入jquery.js 要放在 引入 jquery.pagination
    <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script>

    <script type="text/javascript" src="../../static/admin/js/jquery.pagination.min.js"></script>

    3、应用分页插件
    <div class="box">
    <div id="pagination" class="page"></div>
    </div>

    <script>
    $(function() {
    $("#pagination").pagination({
    // data.current_pag 当前页
    currentPage: {{data.current_page}},
    // data.total_page 总页数
    totalPage: {{data.total_page}},
    // 点击页码所执行的函数
    callback: function(current) {
    var keyword = $(".input_txt").val()
    window.location.href="http://127.0.0.1:5000/admin/newsreview?page="+current
    }
    });
    });
    </script>

    4、后台逻辑
    # 分页查询方式 使用paginate ,参数1:想要的页码 参数2:每页显示的条数
    news_list = News.query.filter(News.title.like('%' + keyword + '%')).paginate(page, 2, False)

    5、组织数据
    # 数据
    d = {}
    d['newslist'] = news_list.items # 经过筛选的新闻列表
    d['current_page'] = news_list.page # 当前页
    d['total_page'] = news_list.pages # 总页数

  • 相关阅读:
    适配器模式
    自己DIY word2010脚注和尾注没有的格式
    Linux单网卡,双IP,双网关配置,并搭建squid proxy上网
    about using gnuplot
    ReadDirectoryChangesW 函数 流沙
    Jquery easyui 异步树 流沙
    Overlapped I/O 学习 流沙
    jQuery.get(url,[data],[callback]) 流沙
    MsgWaitForMultipleObjectsEx用法 流沙
    Oracle smon_scn_time 表 说明
  • 原文地址:https://www.cnblogs.com/huanghaobing/p/10738630.html
Copyright © 2011-2022 走看看