正文

新手必看！从零开始，用Flask框架轻松搭建在线商城网站教程

/0 浏览量
0813

1. 引言

在线商城已经成为现代商业的重要组成部分，而Flask作为Python的一个轻量级Web框架，因其简单易用而受到许多开发者的喜爱。本教程将带你从零开始，使用Flask框架搭建一个基本的在线商城网站。

2. 准备工作

在开始之前，请确保你的计算机上已安装以下软件：

  • Python 3.x
  • Flask
  • 一个代码编辑器（如Visual Studio Code、Sublime Text等）

3. 创建项目

3.1 创建虚拟环境

首先，创建一个虚拟环境来隔离项目依赖：

python3 -m venv venv

然后，激活虚拟环境：

# Windows
venv\Scripts\activate

# macOS/Linux
source venv/bin/activate

3.2 安装Flask

在虚拟环境中安装Flask：

pip install Flask

4. 设计数据库模型

4.1 安装数据库驱动

安装Flask-SQLAlchemy来支持SQLAlchemy数据库模型：

pip install Flask-SQLAlchemy

4.2 创建数据库模型

创建一个名为models.py的文件，并定义以下模型：

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    price = db.Column(db.Float, nullable=False)
    description = db.Column(db.Text, nullable=True)

5. 创建Flask应用

5.1 创建应用实例

创建一个名为app.py的文件，并设置Flask应用：

from flask import Flask
from models import db, User, Product

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

@app.route('/')
def index():
    return 'Hello, Flask Online Store!'

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

5.2 迁移数据库

首先，确保数据库文件site.db位于同一目录下。然后，运行以下命令来创建数据库和表：

flask db init
flask db migrate -m "Initial migration."
flask db upgrade

6. 添加商品

6.1 添加商品模型

在models.py中，添加一个Category模型来组织商品：

class Category(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    products = db.relationship('Product', backref='category', lazy=True)

class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    price = db.Column(db.Float, nullable=False)
    description = db.Column(db.Text, nullable=True)
    category_id = db.Column(db.Integer, db.ForeignKey('category.id'), nullable=False)

6.2 添加商品管理界面

创建一个名为admin.py的文件，并添加以下路由和视图函数：

from flask import render_template, request, redirect, url_for, flash
from models import db, User, Product, Category

@app.route('/admin', methods=['GET', 'POST'])
def admin():
    if request.method == 'POST':
        name = request.form['name']
        price = request.form['price']
        description = request.form['description']
        category_id = request.form['category_id']

        new_product = Product(name=name, price=price, description=description, category_id=category_id)
        db.session.add(new_product)
        db.session.commit()

        flash('Product added successfully!')

    categories = Category.query.all()
    return render_template('admin.html', categories=categories)

6.3 创建admin.html模板

创建一个名为templates的文件夹，并在其中创建一个名为admin.html的文件：

<!DOCTYPE html>
<html>
<head>
    <title>Admin</title>
</head>
<body>
    <h1>Admin Panel</h1>
    <form method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <label for="price">Price:</label>
        <input type="number" id="price" name="price" required>
        <label for="description">Description:</label>
        <textarea id="description" name="description"></textarea>
        <label for="category">Category:</label>
        <select id="category" name="category_id">
            {% for category in categories %}
                <option value="{{ category.id }}">{{ category.name }}</option>
            {% endfor %}
        </select>
        <button type="submit">Add Product</button>
    </form>
</body>
</html>

7. 展示商品

7.1 创建商品列表视图

在app.py中，添加以下路由和视图函数来展示商品列表：

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

7.2 创建products.html模板

创建一个名为templates的文件夹，并在其中创建一个名为products.html的文件：

<!DOCTYPE html>
<html>
<head>
    <title>Products</title>
</head>
<body>
    <h1>Products</h1>
    <ul>
        {% for product in products %}
            <li>
                <h2>{{ product.name }}</h2>
                <p>{{ product.description }}</p>
                <p>Price: {{ product.price }}</p>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

8. 总结

恭喜你，现在你已经成功搭建了一个基本的在线商城网站！当然，这只是一个起点，你可以根据自己的需求添加更多的功能和优化。希望这个教程能帮助你更好地了解Flask框架和在线商城的开发过程。祝你学习愉快！

-- 展开阅读全文 --