实战项目九：构建电商平台（一）：商品管理-Flask框架入门指南

当前位置:　首页>> 技术小册>> Flask框架入门指南

### 实战项目九：构建电商平台（一）：商品管理

#### 引言

在本实战项目中，我们将着手构建一个基于Flask框架的电商平台。电商平台作为现代互联网经济的重要组成部分，不仅为用户提供了便捷的购物体验，也为企业提供了广阔的市场空间。本章节将聚焦于电商平台的基石——**商品管理**模块，包括商品信息的展示、添加、编辑及删除功能。通过这一模块的实现，读者将深入理解Flask框架在Web应用开发中的实际应用，以及数据库操作、表单处理、模板渲染等关键技术。

#### 环境准备

在开始编码之前，请确保您的开发环境已经安装了以下必要的软件：
- Python 3.x
- Flask
- Flask-SQLAlchemy（用于数据库操作）
- Flask-WTF（用于表单处理）
- Flask-Login（可选，用于用户认证，本章节暂不深入）
- SQLite或MySQL等数据库（本例使用SQLite）

此外，推荐安装一些开发工具如PyCharm或VSCode，以提高开发效率。

#### 数据库设计

首先，我们需要设计商品管理所需的数据库模型。在Flask-SQLAlchemy中，数据库模型通过继承`db.Model`类来定义。以下是一个简单的商品模型示例：

```python
from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class Product(db.Model):
    __tablename__ = 'products'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)
    description = db.Column(db.Text, nullable=True)
    price = db.Column(db.Float, nullable=False)
    stock = db.Column(db.Integer, nullable=False, default=0)
    created_at = db.Column(db.DateTime, server_default=db.func.now())

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

这个模型定义了商品的基本属性：ID、名称、描述、价格、库存量以及创建时间。

#### 初始化Flask应用

接下来，我们需要初始化Flask应用并配置数据库：

```python
from flask import Flask
from flask_sqlalchemy import SQLAlchemy

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

with app.app_context():
    db.create_all()  # 创建所有表
```

#### 商品列表页

商品管理系统的第一个功能是展示所有商品的列表。这通常涉及从数据库中查询商品数据，并通过模板渲染到Web页面上。

**路由与视图函数**：

```python
from flask import render_template

@app.route('/')
def index():
    products = Product.query.all()
    return render_template('index.html', products=products)
```

**模板文件（index.html）**：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电商平台 - 商品列表</title>
</head>
<body>
    <h1>商品列表</h1>
    <ul>
        {% for product in products %}
        <li>
            <strong>{{ product.name }}</strong> - 价格：￥{{ product.price }} - 库存：{{ product.stock }}
        </li>
        {% endfor %}
    </ul>
</body>
</html>
```

#### 添加商品

为了添加新商品，我们需要一个表单来收集用户输入的数据，并将这些数据保存到数据库中。

**表单类（forms.py）**：

```python
from flask_wtf import FlaskForm
from wtforms import StringField, FloatField, IntegerField, TextAreaField
from wtforms.validators import DataRequired

class ProductForm(FlaskForm):
    name = StringField('商品名称', validators=[DataRequired()])
    description = TextAreaField('商品描述', validators=[DataRequired()])
    price = FloatField('商品价格', validators=[DataRequired()])
    stock = IntegerField('库存量', validators=[DataRequired()])
```

**路由与视图函数**：

```python
from flask import redirect, url_for, flash, render_template
from .forms import ProductForm

@app.route('/add', methods=['GET', 'POST'])
def add_product():
    form = ProductForm()
    if form.validate_on_submit():
        new_product = Product(name=form.name.data,
                              description=form.description.data,
                              price=form.price.data,
                              stock=form.stock.data)
        db.session.add(new_product)
        db.session.commit()
        flash('商品添加成功！')
        return redirect(url_for('index'))
    return render_template('add_product.html', form=form)
```

**模板文件（add_product.html）**：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电商平台 - 添加商品</title>
</head>
<body>
    <h1>添加商品</h1>
    <form method="post">
        {{ form.hidden_tag() }}
        <div>
            {{ form.name.label }}: {{ form.name(size=32) }}
        </div>
        <div>
            {{ form.description.label }}: {{ form.description(cols=40, rows=5) }}
        </div>
        <div>
            {{ form.price.label }}: {{ form.price(size=8) }}
        </div>
        <div>
            {{ form.stock.label }}: {{ form.stock(size=8) }}
        </div>
        <input type="submit" value="添加">
    </form>
</body>
</html>
```

#### 编辑与删除商品

编辑和删除商品的功能与添加商品类似，但涉及到对特定商品的查询、更新或删除操作。通常，这些操作需要商品的ID作为标识。

- **编辑商品**：通过表单收集新数据，并更新数据库中对应ID的商品记录。
- **删除商品**：直接从数据库中删除对应ID的商品记录。

由于篇幅限制，这里不详细展开编辑和删除商品的具体实现代码，但基本思路是类似的：通过路由接收商品ID，查询数据库中的商品信息，如果是编辑操作则显示表单并允许用户修改数据，如果是删除操作则直接执行删除命令，并返回结果到用户界面。

#### 结语

通过本章节的学习，我们构建了一个基本的电商平台商品管理模块，包括商品列表展示、添加、编辑（虽然未详细展开）及删除功能。这一过程中，我们掌握了Flask框架在Web应用中的核心用法，包括路由定义、视图函数编写、表单处理、模板渲染以及数据库操作等。在接下来的章节中，我们将继续完善电商平台的其他功能，如用户管理、购物车、订单处理等，进一步巩固和扩展Flask框架的应用技能。

该分类下的相关小册推荐：

Flask框架零基础入门与实战开发