flask返回静态页面html文件,flask html文件中的相关操作

摘要

前端数据与后端数据的交互，从后端获取数据展示到前端

1.挖坑与填坑

实现html的继承

挖坑 使用block函数， 挖的坑需要命名

{% block title %}{% endblock %}

{% block extCSS %}{% endblock %}

{% block header %}{% endblock %}

{% block content %}{% endblock %}

{% block foot %}{% endblock %}

{% block extJS %}{% endblock %}

填坑 继承使用extends， 其他直接填入挖坑的地方

{% extends 'base_main.html' %}

{% block title %} 创建学生信息 {% endblock %}

{% block content %}

学生姓名:

学生年龄:

{% endblock %}

2.分页系统 Paginate

page 当前页

pages 总页数

total 总条数

has_prev 是否有上页

has_next 是否有下页

prev_num 上一页

next_num 下一页

iter_pages 当前一共多少页

(1)views.py配置分页

@stu.route('/stupage/')

def stu_page():

page = int(request.args.get('page', 1)) # 获得页，设置默认为1

per_page = int(request.args.get('per_page', 10)) # 设置展示的每页的条数

paginate = Student.query.order_by('s_id').paginate(page, per_page, error_out=False) # 实例页

stus = paginate.items # 获取学生信息

return render_template('paginate.html', paginate=paginate, stus=stus)

(2)html 中操作

{% extends 'base_main.html' %}

{% block title %}

学生分页页面

{% endblock %}

{% block content %}

学生信息

{% for stu in stus %}

ID : {{ stu.s_id }}

姓名: {{ stu.s_name }}

年龄： {{ stu.s_age }}

{% endfor %}

当前页数:{{ paginate.page }}

总页数: {{ paginate.pages }}

总共有多少条信息：{{ paginate.total }}

{% if paginate.has_prev %}

上一页{{ paginate.prev_num}}

{% endif %}

{% if paginate.has_next %}

下一页 {{ paginate.next_num }}

{% endif %}

页码： {% for i in paginate.iter_pages() %}{{ i }}{% endfor %}

{% endblock %}