前端HTML用Python链接数据库的科普文章

引言

在现代Web开发中，前端与后端的有效交互是构建一个优秀应用的关键所在。本文将探讨如何使用HTML、Python和数据库实现三者之间的联动。我们将使用Flask作为后端框架，通过简单的示例阐释如何将用户输入的数据存储到数据库，并将其显示在前端页面上。

技术栈

  • 前端：HTML、CSS（可选）
  • 后端：Python、Flask
  • 数据库：SQLite（或其他如MySQL、PostgreSQL）

数据库设计

在这个示例中，我们的数据库将包含一个简单的用户表（users），结构如下：

字段名 数据类型 描述
id INTEGER 主键，自动增长
name TEXT 用户姓名
email TEXT 用户邮箱

环境准备

首先，确保安装了Flask及SQLite数据库支持：

pip install Flask
pip install Flask-SQLAlchemy

项目结构

我们将使用如下结构：

/myapp
  ├── app.py            # 主应用文件
  ├── templates
    └── index.html      # 前端HTML页面

编写后端代码

在 app.py 中实现Flask服务器：

from flask import Flask, request, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    email = db.Column(db.String(100), nullable=False)

    def __repr__(self):
        return f'<User {self.name}>'

@app.route('/')
def index():
    users = User.query.all()
    return render_template('index.html', users=users)

@app.route('/add', methods=['POST'])
def add_user():
    name = request.form.get('name')
    email = request.form.get('email')
    if name and email:
        new_user = User(name=name, email=email)
        db.session.add(new_user)
        db.session.commit()
    return index()

# 初始化数据库
with app.app_context():
    db.create_all()

if __name__ == '__main__':
    app.run(debug=True)

编写前端代码

在 templates/index.html 中实现前端页面：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
</head>
<body>
    用户管理系统
    <form action="/add" method="post">
        <input type="text" name="name" placeholder="请输入姓名" required>
        <input type="email" name="email" placeholder="请输入邮箱" required>
        <button type="submit">添加用户</button>
    </form>
    <h2>用户列表</h2>
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
        </tr>
        {% for user in users %}
        <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>

项目启动

使用以下命令启动Flask服务器：

python app.py

访问 `

类图表示

以下是系统中的主要类及其关系的简要描述：

classDiagram
    class User {
        +int id
        +String name
        +String email
        +__repr__()
    }
    class FlaskApp {
        +render_template()
        +run()
    }
    class SQLAlchemy {
        +create_all()
        +add()
        +commit()
    }

    FlaskApp "1" --> "1..*" User : manages >
    FlaskApp "1" --> "1" SQLAlchemy : uses >

结论

通过以上步骤，我们成功实现了一个用HTML前端链接Python后端及SQLite数据库的简单应用。用户可以输入数据并查看存储的信息。随着技术的进步，我们可以对系统进行扩展，比如图表显示、用户权限管理等。

本文仅为基础示例，实际应用中建议加强输入验证和错误处理。同时，探索更复杂的数据库设计和Flask的特性，将使你的Web开发更加专业。希望本文能为你搭建自己的Web应用打下坚实的基础！