摘要
前端数据与后端数据的交互，从后端获取数据展示到前端
1.挖坑与填坑
实现html的继承
- 挖坑 使用block函数， 挖的坑需要命名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>{% block title %}{% endblock %}</title>
{% block extCSS %}{% endblock %}
</head>
<body>
{% block header %}{% endblock %}
{% block content %}{% endblock %}
{% block foot %}{% endblock %}
{% block extJS %}{% endblock %}
</body>
</html>
- 填坑 继承使用extends， 其他直接填入挖坑的地方
{% extends 'base_main.html' %}
{% block title %} 创建学生信息 {% endblock %}
{% block content %}
<form action="" method="POST">
学生姓名:<input type="text" name="username" placeholder="请输入学生姓名">
学生年龄:<input type="text" name="age" placeholder="请输入学生年龄">
<input type="submit" value="提交">
</form>
{% 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 %}
<h2> 学生信息</h2>
{% for stu in stus %}
ID : {{ stu.s_id }}
姓名: {{ stu.s_name }}
年龄： {{ stu.s_age }}
<br>
{% endfor %}
<br>
当前页数:{{ paginate.page }}
<br>
总页数: {{ paginate.pages }}
<br>
总共有多少条信息：{{ paginate.total }}
<br>
{% if paginate.has_prev %}
<a href="/stupage/?page={{ paginate.prev_num}}">上一页</a>{{ paginate.prev_num}}
{% endif %}
{% if paginate.has_next %}
<a href="/stupage/?page={{ paginate.next_num }}">下一页</a> {{ paginate.next_num }}
{% endif %}
<br>
页码： {% for i in paginate.iter_pages() %}<a href="/stupage/?page={{ i }}">{{ i }}</a>{% endfor %}
{% endblock %}
网友评论