注册验证码
核心思路,替换注册页面的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 # 总页数

flask中注册验证码和分页的更多相关文章

  1. Flask中数据库关联与分页与cache缓存(十二)

    1 一对多(One To Many) 表示一对多的关系时,在子表类 Post 中需要通过 foreign key (外键)引用父表类 User 在Post类中指定ForeignKey: class P ...

  2. FlASK中的endpoint问题

    先贴一点有关的flask代码,时间有限,我慢慢扩充 以下是flask源码中app.py中add_url_rule的代码. 主要是view_func  -- endpoint -- url 之间的对应关 ...

  3. Flask 中的 SQLAlchemy 使用教程

    Flask 是一个 python web micro framework.所谓微框架,主要是 flask 简洁与轻巧,自定义程度高.相比 django 更加轻量级. 之前一直折腾 django,得益于 ...

  4. Flask中全局变量的实现

    我们都知道在Flask中g,request,session和request是作为全局对象来提供信息的,既然是全局的又如何保持线程安全呢,接下来我们就看看flask是如何做到这点的.在源码中的ctx.p ...

  5. JAVA WEB项目中生成验证码及验证实例(附源码及目录结构)

    [我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...

  6. flask框架----整合Flask中的目录结构

    一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from ...

  7. 第九篇 Flask 中的蓝图(BluePrint)

    第九篇 Flask 中的蓝图(BluePrint)   蓝图,听起来就是一个很宏伟的东西 在Flask中的蓝图 blueprint 也是非常宏伟的 它的作用就是将 功能 与 主服务 分开怎么理解呢? ...

  8. Python框架学习之Flask中的常用扩展包

    Flask框架是一个扩展性非常强的框架,所以导致它有非常多的扩展包.这些扩展包的功能都很强大.本节主要汇总一些常用的扩展包. 一. Flask-Script pip install flask-scr ...

  9. Python框架学习之Flask中的蓝图与单元测试

    因为Flask框架的集成度很低,随着Flask项目文件的增多,会导致不太好管理.但如果对一个项目进行模块化管理的,那样子管理起来就会特别方便.而在Flask中刚好就提供了这么一个特别好用的工具蓝图(B ...

随机推荐

  1. JS数组映射详解

    现在这里占个坑位,免的忘了,需要整理一下最近的内容: 1.数组映射的使用 2.微信分享功能详解 3.jq自己封装 4.HTML的富文本应用

  2. CTeX安装警告

    CTeX在安装过程中总会覆盖系统全部的环境变量,之前曾经导致诸如ping.ipconfig以及CUDA全部无法工作,只能手动重装和手动恢复系统默认环境变量. 网上给出的解决方案有:在电脑未关机之前通过 ...

  3. [数]数学系列预习->补水题ver.

    ---恢复内容开始--- 话说要学反演了,contest一题都搞不定,整理题目暂且搁置,数学笨蛋来学一下数学_(:з」∠)_ ---恢复内容结束--- 是的,预习看了半天教学,没有整理,做题又都不会, ...

  4. thinkphp5和thinkphp3.2.3中URL重写出现No input file specified

    查询后解决办法是打开public目录下的.htaccess文件,把:RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 改为:RewriteRule ^(.*)$ i ...

  5. systemd的日志管理进程journald

    使用Journalctl查看并操作Systemd日志 systemd拥有强大的处理与系统日志记录功能.在使用其它工具时,日志往往被分散在多套系统当中,由不同的守护进程负责处理. Journal的实现归 ...

  6. webix的Form绑定支持数组Array

    绑定的原理 form.setValues:把树形对象,压平展开成一维的.比如: var data = { id: 11, name: { first: 'alex', last: 'wu' } }; ...

  7. 使用idea启动springMVC+Hibernate其他项目

    打开项目后打开Project Structure 点开左边的Libraries 加入依赖包 点开左边的Moudules 选中项目 新建Web,Spring,Hibernate三项 Hibernate添 ...

  8. my goal

    I want to get a good command of a programming language at the university, and I have to pass the tes ...

  9. MongoDB基本命令总结

    其实一直想整理下我常使用的MongoDB数据库的一些操作命令,终于有时间了~ MongoDB是一种开源的,免费的非关系型数据库(NoSql),不存在表.记录等概念,与通常的关系型数据库有些差异: Mo ...

  10. linux install ftp server

    first  yum install vsftpd 第二部:vi /etc/vsftpd/vsftpd.conf 添上下面一段话 anonymous_enable=YESlocal_enable=YE ...