### 构建基于Python Flask和MySQL的Web应用程序 为了实现一个可以查询数据库数据的网页，下面将介绍如何使用HTML、CSS、JavaScript作为前端技术，Python Flask作为后端框架，并采用MySQL作为数据库。 #### 项目结构概述 - **templates/** 存储HTML模板文件 - **static/** 放置CSS样式表和JS脚本 - **application.py** 主程序入口 - **config.py** 配置项定义 - **models.py** ORM模型类定义 - **requirements.txt** Python依赖包列表 #### MySQL数据库设置 首先，在`config.py`中指定连接参数： ```python import os class Config(object): SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://username:password@localhost/db_name' SQLALCHEMY_TRACK_MODIFICATIONS = False ``` 接着，在`models.py`里声明所需的数据表模式： ```python from flask_sqlalchemy import SQLAlchemy db = SQLAlchemy() class Product(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(80), nullable=False) price = db.Column(db.Float, nullable=False) def init_db(): with app.app_context(): db.create_all() ``` #### Flask应用开发 编辑`application.py`来搭建基本的应用逻辑： ```python from flask import Flask, render_template from config import Config from models import db, Product app = Flask(__name__) app.config.from_object(Config) db.init_app(app) @app.route('/') def index(): products = Product.query.all() return render_template('index.html', products=products) if __name__ == '__main__': from models import init_db init_db() app.run(debug=True)[^1] ``` 上述代码片段展示了如何通过Flask读取并传递给前端渲染的产品信息。当访问根URL时，服务器会执行一次全量的商品检索操作并将结果集传送给视图层进行展示。 #### HTML页面设计 最后，在`templates/index.html`内编写用于呈现商品详情的内容区块： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物商城</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> </head> <body> <h1>欢迎来到购物商城</h1> <ul> {% for product in products %} <li>{{ product.name }} - 价格: ¥{{ "%.2f"|format(product.price) }}</li> {% endfor %} </ul> <script src="{{ url_for('static', filename='script.js') }}"></script> </body> </html> ``` 此段落描述了如何利用Jinja2模板引擎动态加载来自后台的服务响应数据。每当有新的请求到达时，都会重新计算循环体内的表达式从而更新显示效果。