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 # 总页数
最新文章
- 托马斯微积分答案.djvu的书签
- BZOJ3052——糖果公园
- outlook经常无故崩溃解决办法
- asp.net Ajax Post 请求一般处理程序
- RatingBar设置显示星星个数
- RedHat7安装Sublime Text 3
- WEB性能测试:你应该带上VisualStudio2010
- flash 中无法导出swf文件的解决方法
- Jasper_plug_install
- 学习vue 20天,我写了点东西
- 【NO.1】Jmeter-安装JDK- 配置Jmeter运行的环境 - 是使用Jmeter的前提
- PHP对象和接口抽象类注意事项
- jQuery系列 第二章 jQuery框架使用准备
- Android studio 中添加依赖model时依赖所需的准备
- qemu对虚拟机的内存管理(一)
- 由javascript的闭包引申到程序语言编译上的自由变量作用域的考量
- Apache+php安装和配置 windows
- Android中用文件初始化sqlite 数据库(二)
- ipfs cluster 模式部署使用(docker-compose 环境运行)
- Java高级工程师需要弄明白的20个知识点
热门文章
- Ubuntu连网的问题
- vue+富文本编辑器UEditor
- 详解Linux下swig 3.0.12的手动安装过程
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.6 Defining Projections and Extents
- Ubuntu系统建立交叉编译环境
- python反射和面向对象的知识并简述基本的异常
- JavaScript Basic Memo
- Base包equivalent
- @Dependson注解与@ConditionalOnBean注解的区别
- 实现对HashMap的value排序