利用Flask搭建动态网页
作者：互联网
Flask是一个用Python编写的Web应用程序框架，Flask基于Werkzeug WSGI工具包和Jinja2模板引擎。WSGI（Web Server Gateway Interface）是Web服务器和Web应用程序之间通用接口的规范，Werkzeug是WSGI的一个工具包，它能把请求、网页和函数连接在一起，而不必担心协议，线程管理等低级细节。Jinja2是Python的一个流行的模板引擎，Web模板系统将模板与特定数据源组合以呈现动态网页。
本文通过Flask搭建一组网页，网页内容是Mysql数据库里的一个表格，打开网页的同时，后端通过python连接Mysql查询数据库，把查询结果显示到前端页面上。
新建一个文件夹作为这个网页项目的工程文件夹，后端用python，所以新建一个python文件，作为程序的入口，再创建几个子文件夹，有static文件夹，用来存放css样式、javascript等，有templates文件夹，用来存放html文件等。具体结构如下
|---paixu //项目文件夹
|---paixu.py //程序主入口
|---static //静态文件夹
|---images //图片文件夹
|---paixu.css //css文件
|---paixu.js //js文件
|---templates //模板文件夹
|---jishu.html //一些html文件
|---oushu.html
|---zongshu.html
第一部分，先写一段html，命名为zongshu,html，保存到templates文件夹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天窗排序总数</title>
<script src="/static/paixu.js"></script>
<link rel="stylesheet" type="text/css" href="/static/paixu.css">
</head>
<body id="body">
<p>天窗排序总数</p>
<table id="bbsTab">
<tr>
<th>序号</th>
<th>零件号</th>
<th>顺序号</th>
</tr>
{% for i in u %}
<tr>
<td></td>
<td>{{ i[1] }}</td>
<td>{{ i[2] }}</td>
</tr>
{% endfor %}
</table>
<p>
<a href="/jishu">【奇数】</a>
<a href="/oushu">【偶数】</a>
<a href="/zongshudaoxu">【倒序】</a>
</p>
</body>
</html>
代码很简单，一些html基础就可以，头部分引用了外部css样式和javascript脚本，网页主要内容是一个表格，表格头有三列，分别是序号、零件号、顺序号，表格内容的每一行都在一个for循环里面，这个for循环用{%…%}包围，Jinja2模板引擎从HTML转义，{%…%}包围的内容不会出现在网页上，{{ … }}包围的内容会出现在网页上。可以看到，网页内容是什么取决于变量u，变量u一改变，网页内容就发生变化，这就是动态网页的含义。
css如下：
a:link {color:rgb(0,0,0);text-decoration:none;}
a:visited {color:rgb(0,0,0);text-decoration:none;}
a:hover {color:rgb(255,0,0);text-decoration:underline;}
table,th,td
{
border:1px solid black;
cellpadding:1px;
cellspacing:1px;
text-align:center;
}
table
{
width:100%;
}
p
{
text-align:center;
}
javascript如下：
window.onload = function(){
var oTable = document.getElementById("bbsTab");
for(var i=1;i<oTable.rows.length;i++){
oTable.rows[i].cells[0].innerHTML = i;
}
}
引用javascript，是因为网页表格序号那一列是空的，我们需要填入序号，方便计数。
第一个前端网页就写好了，但是变量u内容是什么，怎么传到网页上，这些问题还没有解决。
第二部分，打开python文件，写入代码，如下：
from flask import Flask,render_template
import pymysql
app=Flask(__name__)
@app.route('/zongshu')
def zongshu():
conn=pymysql.Connect(host='主机地址',port=3306,user='用户名',passwd='密码',db='数据库名',charset='utf8')
cur=conn.cursor()
sql="select 序号,零件号,顺序号 from down;" #sql语句
cur.execute(sql)
data = cur.fetchall()
cur.close()
conn.close()
return render_template('zongshu.html',u=data)
if __name__ =="__main__":
app.run(debug=True)
这段代码的意思是，当输入网址http://127.0.0.1:5000/zongshu时，通过@app.route()，调用下面这个函数zongshu()，函数里的内容主要是为了连接和查询数据库，然后把查询结果data赋值给u，u的内容就是查询结果，u再传给zongshu.html这个网页，这样就把请求、网页和函数联系起来了。
通过改变sql语句能得到不同的查询结果，传给网页的变量u也会是不同的内容，于是我们有了第二个网页。
@app.route('/jishu')
def jishu():
conn=pymysql.Connect(host='主机地址',port=3306,user='用户名',passwd='密码',db='数据库名',charset='utf8')
cur=conn.cursor()
sql="select 序号,零件号,顺序号 from down where 顺序号%2=1;" #sql语句
cur.execute(sql)
u = cur.fetchall()
cur.close()
conn.close()
return render_template('jishu.html',u=u)
新建jishu.html，复制zongshu.html里的代码，html代码是一样的，但是网页显示内容发生了变化。我们可以看到，数据库查询语句变了，查询结果变了，传给jishu.html的u内容变了，网页显示就发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天窗排序奇数</title>
<script src="/static/paixu.js"></script>
<link rel="stylesheet" type="text/css" href="/static/paixu.css">
</head>
<body id="body">
<p>天窗排序奇数</p>
<table id="bbsTab">
<tr>
<th>序号</th>
<th>零件号</th>
<th>顺序号</th>
</tr>
{% for i in u %}
<tr>
<td></td>
<td>{{ i[1] }}</td>
<td>{{ i[2] }}</td>
</tr>
{% endfor %}
</table>
<p>
<a href="/zongshu">【总数】</a>
<a href="/oushu">【偶数】</a>
<a href="/jishudaoxu">【倒序】</a>
</p>
</body>
</html>
当输入网址http://127.0.0.1:5000/jishu时，通过@app.route()，调用下面这个函数jishu()，最后把查询结果显示到网页jishu.html上。
同理，我们可以正序查询，倒序查询，这样就做出了功能相似的一组网页。
总结： Flask类的route()函数是一个装饰器，它告诉应用程序哪个URL应该调用相关的函数。当我们输入请求网址时，route()就会调用与这个请求网址绑定的函数，函数返回通过render_template()渲染好的网页。
最后，来几张效果图。
扫描枪界面显示效果。
翅膀硬了
发布了7 篇原创文章 · 获赞 3 · 访问量 357
私信
关注
标签：文件夹,zongshu,网页,Flask,jishu,html,nbsp,搭建 来源： https://blog.csdn.net/qq_41960127/article/details/104570596