首页新闻无限加载
无限加载的实现原理就是当用户往下滑动到一定程度时，触发某个事件向后端请求数据。
实现：
1.首先再index.js中，获取BOM对象，获取BOM对象的一些常量值
- 浏览器窗口的高度
- 要显示网页的高度
- 鼠标滚动的总距离
- 页面已经滚动的距离
2.这其中有一个请求标志位：标志是否向后端请求数据，默认为true
总距离减去已滚动的距离小于100时，表示页面没有数据了，如果这个标志位时false，就将他制为true，标志要向后端发送请求了。
在判断当前页是否小于总页数，如果小于，说明还有数据，执行更新数据函数，否则，表示没有数据，将标志位制为false。不能请求数据了
3.当用户访问index时，也就是第一次请求数据完成后，在updateNewsData()将该标志位制为false，表示不再向后端请求，并且获取总页数，用于判断是否还有数据。
4.如果是第一次请求，也就是请求第一页数据，那么就先清空ul显示部分。并且当前页加一，否则一致更新第一页。
//页面滚动加载相关
$(window).scroll(function () {
// 浏览器窗口高度
var showHeight = $(window).height();
// 整个网页的高度
var pageHeight = $(document).height();
// 页面可以滚动的距离
var canScrollHeight = pageHeight - showHeight;
// 页面滚动了多少,这个是随着页面滚动实时变化的
var nowScroll = $(document).scrollTop();
if ((canScrollHeight - nowScroll) < 100) {
// TODO 判断页数，去更新新闻数据
if (!house_data_querying){ //如果这个标志位为false
house_data_querying = true //置为true(正在向后台获取数据)
if (cur_page < total_page){ //如果这个当前页小于总页数
updateNewsData()
}else{
house_data_querying = false //没数据的话加将标志位制为false，不请求了
}
}
}
})
})
修改updateNewsData():
function updateNewsData() {
// TODO 更新新闻数据
var params = {
'page':cur_page,
'per_page':10,
'cid':currentCid
}
$.get('/newslist',params,function (resp) {
//将加载标志位制为false
house_data_querying = false
if (resp){
//设置totol_page
total_page = resp.total_page //服务器转过来的值
//当要显示第一页时，也就是第一次访问时，清空ul中数据
if (cur_page == 1) {
//清空原来数据
$(".list_con").html("")
}
cur_page++; //没请求一次，当前页加一
//显示数据
for(var i=0;i < resp.news_list.length;i++){
//获取单个新闻信息
var news = resp.news_list[i]
//拼接新闻内容
var content = '<li>'
content+='<a href="#" class="news_pic fl"><img src="' + news.index_image_url + '?imageView2/1/w/170/h/170"></a>'
content+='<a href="#" class="news_title fl">'+news.title+'</a>'
content+='<a href="#" class="news_detail fl">'+news.digest+'</a>\n'
content+='<div class="author_info fl">\n' +
' <div class="author fl">\n' +
// ' <img src="../../static/news/images/person.png" alt="author">\n' +
' <a href="#">来源：'+news.source+'</a>\n' +
' </div>\n' +
' <div class="time fl">'+news.create_time+'</div>\n' +
' </div>'
content+='</li>'
$('.list_con').append(content)
}
}
})
}
修改部分：
运行：
滑轮快要到底部时，会自动添加下一页的数据。
csrf的保护
再之前时各种操作中，我们都是在不开启csrf验证的情况下做的。
create_app():
如果开启的话，那么前端的post提交就会出现token丢失的错误，这是因为在提交表单时，会提交一个token值，这个token值用于验证是否是当前用户的正常操作。
那么接下来就实现开启csrf验证的步骤。
步骤：
1.开启csrf_token的验证
2.在创建app的函数create_app中编写钩子函数----after_request
@app.after_request
def after_request(response):
#调用生成csrf的函数
csrf_token = generate_csrf()
#通过cookie传递给前台
response.set_cookie('csrf_token',csrf_token)
return response
在该函数中生成csrf_token值，每次侠响应之前都会调用。
3.在mian.js中：
这个其实就是获取刚在生成的csrf_tokrn值。连同数据一并提交给后台验证。
4.后台开启CSRFProtect
# 开启csrf保护，只用于服务器验 证
CSRFProtect(app)
运行：
这是再登陆时，就可以登陆成功了
网友评论