摘要
前端數(shù)據(jù)與后端數(shù)據(jù)的交互，從后端獲取數(shù)據(jù)展示到前端
1.挖坑與填坑
實現(xiàn)html的繼承
- 挖坑 使用block函數(shù)， 挖的坑需要命名
<!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 %} 創(chuàng)建學(xué)生信息 {% endblock %}
{% block content %}
<form action="" method="POST">
學(xué)生姓名:<input type="text" name="username" placeholder="請輸入學(xué)生姓名">
學(xué)生年齡:<input type="text" name="age" placeholder="請輸入學(xué)生年齡">
<input type="submit" value="提交">
</form>
{% endblock %}
2.分頁系統(tǒng) Paginate
page 當(dāng)前頁
pages 總頁數(shù)
total 總條數(shù)
has_prev 是否有上頁
has_next 是否有下頁
prev_num 上一頁
next_num 下一頁
iter_pages 當(dāng)前一共多少頁
（1）views.py配置分頁
@stu.route('/stupage/')
def stu_page():
page = int(request.args.get('page', 1)) # 獲得頁，設(shè)置默認為1
per_page = int(request.args.get('per_page', 10)) # 設(shè)置展示的每頁的條數(shù)
paginate = Student.query.order_by('s_id').paginate(page, per_page, error_out=False) # 實例頁
stus = paginate.items # 獲取學(xué)生信息
return render_template('paginate.html', paginate=paginate, stus=stus)
（2）html 中操作
{% extends 'base_main.html' %}
{% block title %}
學(xué)生分頁頁面
{% endblock %}
{% block content %}
<h2> 學(xué)生信息</h2>
{% for stu in stus %}
ID : {{ stu.s_id }}
姓名: {{ stu.s_name }}
年齡： {{ stu.s_age }}
<br>
{% endfor %}
<br>
當(dāng)前頁數(shù):{{ paginate.page }}
<br>
總頁數(shù): {{ 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 %}
