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）

核心協同邏輯：

app.py 從 mysqlDao.py 獲取數據庫數據；
調用 render_template，將數據傳入 templates 下的 HTML 模板；
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 應用”的優質選擇。