Flask项目 Day4

Flask项目 Day4

1.csrf校验分析

CSRFProtect帮我们做了从cookie中取出随机值,从表单中取出随机,然后校验,并且响应校验结果
我们要做:在界面加载的时候,往cookie中添加一个随机值,王表单也添加csrf_token,并隐藏这个表单项

实现:

1.响应中设置cookie,统一设置:@after resquest 钩子装饰 在所有请求后统一设置cookie
gennerate_csrf() wtf.csrf的方法 生成随机值

2.ajax请求中添加这个csrf_token提交
放在请求头中 headers:{‘X-CSRFToken’:getCookie(‘csrf_token’)}
header请求头
其他网站获取不到这个网站的cookie,cookie是区别域名
退出get 不修改数据 不用csrf_token

2.首页的点击排行列表新闻展现

后端index接口查到数据传到模版,模版遍历查到的列表

New.query.order_by(News.click.desc()).limit(6)

查到的是模型对象,转为字典

模型中写to_dict是为了快速遍历对象成字典,方便操作

循环loop.index循环下标

定义过滤器实现不同css class类

class="{{ loop.index| index_class }}"

定义一个公用的工具类,里面定义一个方法 返回知道索引对应的类名
app.add_template_filter()

3.左边新闻列表页 实现自动加载更多逻辑

ajax请求局部

后台接口设计:
GET /new_list
传入json

1.获取参数:新闻分类id 页面id 每页数据per_page
2.校验参数
3.查询数据 用模型查数据 paginate查特定页 转换返回字典列表
4.返回响应 jsonify

json在线工具

前台逻辑设计:index.js
界面加载完成后加载新闻数据,依然使用get ajax请求后端接口

append()和html()区别:追加和全部替换

自动加载更多逻辑

js判断到底部触发,定义变量判断是否正在向后台获取数据

新闻分类加载不同数据

从数据库中读取分类 切换cid

4.新闻详情页

后台模块、接口设计:
url:’/news/int:news_id’
返回是渲染flask模版

你可能感兴趣的:(flask,实战项目)