Flask + HTML 项目开发思路

Flask + HTML 项目开发思路：以公共资源交易信息展示为例

一、开篇明义——为什么选 Flask 框架

在众多 Python Web 框架（如 Django、Tornado 等）里，本次项目坚定选择 Flask，背后有清晰的技术考量：

1. 轻量灵活，适配小项目快速迭代

本项目聚焦公共资源交易信息展示，功能相对聚焦（核心是数据库查询 + 页面渲染）。Flask 作为轻量级框架，没有 Django 那种“大而全”的内置组件（如 admin 后台、ORM 强制绑定等），能让我们精准把控代码结构——只需几行代码就能启动 Web 服务，快速实现“数据库查数据 → 模板渲染展示”的核心流程，开发节奏更贴合小项目“敏捷迭代”需求。

2. 学习成本低，易上手落地

对于新手或需要快速出成果的场景，Flask 的 API 设计简洁直观。比如定义路由只需 @app.route 装饰器，模板渲染直接用 render_template 函数，代码逻辑清晰易懂。即使团队成员对 Web 开发经验有限，也能快速理解并参与开发，降低技术门槛。

3. 生态丰富，可按需扩展

虽然 Flask 本身“轻量”，但围绕它的生态足够支撑项目扩展：

• 数据库集成：通过 mysql-connector-python 等库，轻松对接 MySQL（如项目中 mysqlDao.py 封装数据库操作），后续若需换 PostgreSQL、MongoDB 也能快速适配；
• 模板引擎：默认的 Jinja2 模板引擎灵活强大，支持在 HTML 中嵌入 Python 逻辑（如遍历数据、条件判断），完美适配“交易信息动态渲染”需求；
• 静态资源管理：项目中 static 文件夹规范管理 CSS/JS，Flask 能自动识别，配合 url_for 函数轻松实现资源引用，后续扩展前端交互（如 JavaScript 异步请求）也无压力。

二、项目背景与目标

在信息爆炸的当下，公共资源交易信息（如招标公告、采购数据）分散且格式繁杂。本项目通过 Flask + HTML 搭建平台，实现两大核心目标：

• 数据聚合展示：将分散在数据库的交易信息（四川等地区），通过统一页面模板清晰呈现，让用户快速浏览标题、金额、时间等关键信息；
• 多端便捷访问：支持电脑、手机端访问，借助 Flask 局域网部署能力，手机可直接通过 IP 访问页面，适配“现场办公、快速查看”场景。

三、技术栈选择与协同

1. Flask（后端核心）

负责路由管理（定义 /sc_data_list /lc_data_list 等访问入口）、数据库交互（调用 mysqlDao.py 从数据库取数）、模板渲染（将数据传递给 HTML 动态生成页面），是串联“数据 → 展示”的枢纽。

2. HTML + CSS/JS（前端展示）

• HTML：作为页面骨架，通过 Jinja2 模板语法（如 {% for item in records %}）遍历 Flask 传递的数据，动态填充交易信息；
• CSS：存放在 static/css，负责美化页面（如卡片布局、手机端适配），提升用户体验；
• JS（可选）：若后续需实现“搜索筛选”“异步刷新”等交互，可在 static/js 编写脚本，Flask 也能无缝支持接口开发。

四、项目结构解析（结合截图）

ggzyjy_html_lc/  
├─ static/           # 静态资源文件夹  
│  ├─ css/           # 存放样式文件（如页面美化、手机适配）  
│  └─ js/            # 预留前端交互脚本（如后续扩展异步功能）  
├─ templates/        # HTML 模板文件夹  
│  ├─ sc_data_list.html  # 四川交易信息模板  
│  └─ lc_data_list.html  # 其他交易信息模板  
├─ app.py            # Flask 主程序（路由定义、数据处理）  
├─ mysqlDao.py       # 数据库操作封装（连接、查询、关闭）  
└─ requirements.txt  # 依赖清单（如 flask、mysql-connector-python）  

核心协同逻辑：

1. app.py 从 mysqlDao.py 获取数据库数据；
2. 调用 render_template，将数据传入 templates 下的 HTML 模板；
3. HTML 借助 Jinja2 语法渲染动态内容，同时引用 static 文件夹的 CSS/JS 实现样式和交互。

五、开发流程拆解（从 0 到 1 落地）

1. 数据库设计与操作封装（mysqlDao.py）

目标：规范数据库交互，让 Flask 能简洁取数

# mysqlDao.py（关键代码）  
import mysql.connector  

class MysqlDao:  
    def __init__(self):  
        self.conn = None  

    def connect(self):  
        # 连接数据库（需替换为实际配置）  
        self.conn = mysql.connector.connect(  
            host="localhost",  
            user="your_user",  
            password="your_password",  
            database="your_database"  
        )  

    def select(self, table, fields):  
        # 执行查询，返回字典格式结果（方便模板直接用字段名）  
        cursor = self.conn.cursor(dictionary=True)  
        query = f"SELECT {', '.join(fields)} FROM {table}"  
        cursor.execute(query)  
        result = cursor.fetchall()  
        cursor.close()  
        return result  

    def close(self):  
        if self.conn:  
            self.conn.close()  

设计逻辑：

• 封装 connect/select/close 方法，让 app.py 调用时无需重复写数据库连接代码；
• dictionary=True 让查询结果以字典返回（如 item['title'] 直接对应字段），完美适配 Jinja2 模板“按字段名取值”的需求。

2. Flask 路由与数据传递（app.py）

目标：定义访问入口，实现“数据库 → 页面”的数据桥接

# app.py（核心逻辑）  
from flask import Flask, render_template  
from mysqlDao import MysqlDao  

app = Flask(__name__)  

@app.route('/sc_data_list')  
def sc_data_list():  
    dao = MysqlDao()  
    dao.connect()  
    # 查询四川交易信息表，指定需展示的字段  
    records = dao.select(  
        table='表名',  
        fields=["xmmc", "xmbh", "cgfs", "ysje", ...]  
    )  
    dao.close()  
    # 传递数据到模板，渲染页面  
    return render_template('sc_data_list.html', records=records)  

@app.route('/lc_data_list')  
def lc_data_list():  
    # 复用 MysqlDao  
    dao = MysqlDao()  
    dao.connect()  
    records = dao.select(  
        table='yn_ggzy_lc_result',  
        fields=["title", "bdid", "zbje", ...]  
    )  
    dao.close()  
    return render_template('lc_data_list.html', records=records)  

if __name__ == '__main__':  
    # 允许局域网访问，手机可通过 IP 访问  
    app.run(debug=True, host='0.0.0.0', port=5000)  

设计逻辑：

• 每个路由对应一个地区的交易信息页面，通过 MysqlDao 复用数据库操作；
• render_template 函数将查询结果 records 传入 HTML 模板，实现动态渲染；
• host='0.0.0.0' 让 Flask 监听局域网请求，手机连接同 Wi-Fi 后，用 http://电脑IP:5000 即可访问。

3. HTML 模板设计（templates 文件夹）

目标：用 Jinja2 语法动态渲染数据，适配多端展示

以 sc_data_list.html 为例，核心逻辑是遍历数据 + 格式化展示：

<!-- templates/sc_data_list.html -->  
<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <!-- 手机端适配：让页面宽度自适应屏幕 -->  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <!-- 引入静态 CSS，美化样式（路径通过 Flask 生成） -->  
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">  
</head>  
<body>  
    <p>共找到 {{ records|length }} 条信息</p>  
    {% if records %}  
        {% for item in records %}  
            <div class="info-item">  
                <p><strong>项目名称：</strong>{{ item.xmmc or '未获取' }}</p>  
                <p><strong>项目编号：</strong>{{ item.xmbh or '未获取' }}</p>  
                <!-- 其他字段同理，用 or 处理空值 -->  
                {% if item.linkurl %}  
                    <a href="{{ item.linkurl }}" target="_blank">查看详情</a>  
                {% endif %}  
            </div>  
        {% endfor %}  
    {% else %}  
        <p>无匹配数据</p>  
    {% endif %}  
    <!-- 引入静态 JS，后续可扩展交互 -->  
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>  
</body>  
</html>  

设计逻辑：

• Jinja2 语法：{% for %} 遍历数据、{{ item.field }} 取字段值、{% if %} 处理空值，让页面能动态渲染不同地区的交易信息；
• 多端适配：meta viewport 确保手机端显示正常，CSS 可通过 static/css/style.css 进一步优化样式（如卡片布局、字体适配）；
• 静态资源管理：通过 url_for('static', ...) 生成资源路径，避免硬编码，后续修改资源目录也无需改动模板。

四、多端访问与部署（关键落地细节）

1. 手机端访问配置

• 步骤 1：确保电脑、手机连接同一 Wi-Fi（处于同一局域网）；
• 步骤 2：启动 Flask 时，控制台会输出 http://电脑IP:5000（如 http://192.168.1.100:5000）；
• 步骤 3：手机浏览器直接输入上述地址，即可访问交易信息页面。

效果图如下：

2. 生产环境扩展（可选）

若项目需要对外公开访问，可进一步：

• 部署到云服务器：将代码上传至云主机（如阿里云、腾讯云），配置 Nginx + Gunicorn 组合（Nginx 做反向代理，Gunicorn 运行 Flask 服务），实现公网访问；
• 域名绑定：申请域名并解析到服务器 IP，让用户通过 https://yourdomain.com 访问，提升专业性。

五、总结与扩展方向

通过 Flask + HTML，我们用极少的代码实现了“公共资源交易信息多端展示”的核心需求，验证了技术栈的适配性。后续可扩展方向包括：

• 前端交互增强：用 JavaScript 实现“关键词搜索”“分页加载”，通过 Flask 新增 API 接口（如 /api/search），让页面更智能；
• 数据定时更新：结合 Celery 实现数据库定时同步，确保交易信息实时性；
• 用户权限管理：添加登录功能，区分普通用户、管理员权限，控制敏感数据访问（如招标金额详情）。

总之，Flask 的“轻量灵活”为小项目提供了低成本试错、高效落地的可能，是快速实现“数据展示类 Web 应用”的优质选择。