利用Flask搭建动态网页_flask 动态网页-CSDN博客

本文链接：https://blog.csdn.net/qq_41960127/article/details/104570596

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/oushu">【偶数】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/zongshudaoxu">【倒序】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </p>

</body>
<