Flask可以将数据库的表展示到网页上,如果数据过多,就需要借助flask中的paginate来对数据进行翻页操作,只需要两个操作就可实现数据的翻页
1.app.py
#将MySQL的数据以表格的形式展示到网页
@app.route('/admin/')
def manager():
page = int(request.args.get('page', 1))
per_page = int(request.args.get('per_page', 10))
paginate = Person.query.paginate(page=page, per_page=per_page, error_out=False)
pagedata = paginate.items
titles = ['序号', '用户名','电脑系统名', '年龄', '性别', '电话号码', '喜欢景点类型', '搜索景点类型', '搜索景点名称', '搜索景点评分', '账号创建时间']
return render_template('manager.html',paginate=paginate, pagedata=pagedata,titles=titles)
Person为数据库的表的模式
2.manager.html
<!DOCTYPE html>
{% extends 'base_main.html' %}
{% block content %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游推荐系统!</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
margin-left:-5px;
width: 70px;
height: 50px;
background-color: #deffff;
color:white;
}
li::before {
content: "";
display: block;
padding-top: 20%;
background-color: #deffff;
}
body {
background-image: url("https://img.zcool.cn/community/01d6d05c245575a8012029ac04c993.jpg@2o.jpg");
filter: brightness(100%);
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
}
a.reset-style {
background-color: initial;
}
input {
width: 150px;
height: 25px;
}
</style>
</head>
<body >
<div >
<div style="text-align:center"><h2>flask使用paginate翻页</h2></div>
<table border="1" align="center" style="background-color: #ffffff;font-family:'楷体', sans-serif;text-align:center" >
<thead>
<tr>
{% for i in titles %}
<td>{{ i }}</td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for data in pagedata %}
<tr>
<td style="width:45px;">{{ loop.index0 }}</td>
<td style="width:100px;">{{ data.username }}</td>
<td style="width:100px;">{{ data.system_name }}</td>
<td style="width:50px;">{{ data.age }}</td>
<td style="width:50px;">{{ data.sex }}</td>
<td style="width:100px;">{{ data.phone_number }}</td>
<td style="width:100px;">{{ data.types }}</td>
<td style="width:200px;">{{ data.search_type }}</td>
<td style="width:100px;">{{ data.search_name }}</td>
<td style="width:100px;">{{ data.search_score }}</td>
<td style="width:100px;">{{ data.time }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div>
<ul style="text-align: center;">
{% if paginate.has_prev %}
<li style="display: inline-block;"><a href="/index/?page={{ paginate.prev_num }}">上一页</a></li>
{% endif %}
{% for i in paginate.iter_pages() %}
{% if i == None %}
<li style="display: inline-block;"><a >...</a></li>
{% else %}
<li style="display: inline-block;"><a href="/index/?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if paginate.has_next %}
<li style="display: inline-block;"><a href="/index/?page={{ paginate.next_num }}">下一页</a></li>
{% endif %}
</ul>
</div>
<div style="font-size: 12px; text-align: center; margin-top: 20px;margin-bottom: 10px;">
当前页数:{{ paginate.page }}
总页数:{{ paginate.pages }}
一共有{{ paginate.total }}条数据
</div>
</div>
</body>
{% endblock %}
</html>
base_main.html的代码如下:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
a {
padding: 10px;
color:black;
text-decoration: none;
marge-left:15px
}
a:hover {
background-color: #FFFFFF; /* 更换背景色为红色 */
}
body {
background-image: url("http://www.wlkst.com/u/cms/www/202006/17104548tne0.jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0.4;
font-family:"微软雅黑", 'Arial', sans-serif;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<nav style="background-color: #f1f1f1; padding: 10px;wigth:100%">
<a href="/" style=" " >登录</a>
<a href="/regist">注册</a>
</nav>
{% block content %}{% endblock %}
</body>
</html>
其中nav是给网页底部加导航栏,若不需要,可删除