正文

新手必看：手把手教你用Flask框架搭建购物网站，从零开始学编程

/0 浏览量
0813

引言

在这个数字化的时代，购物网站已经成为了我们生活中不可或缺的一部分。而作为编程初学者，通过自己动手搭建一个购物网站，不仅可以锻炼编程技能，还能深入了解网站开发的全过程。今天，就让我们一起来学习如何使用Flask框架搭建一个简单的购物网站。

一、准备工作

1. 安装Python

首先，确保你的电脑上已经安装了Python。你可以从Python的官方网站下载并安装最新版本的Python。

2. 安装Flask

在命令行中，输入以下命令安装Flask：

pip install flask

3. 安装数据库驱动

为了存储购物网站的数据，我们需要一个数据库。这里我们使用SQLite，因为它是轻量级且易于使用的数据库。在命令行中，输入以下命令安装SQLite驱动：

pip install flask-sqlalchemy

二、创建项目结构

接下来，我们需要创建项目文件夹，并在其中创建以下文件：

shopping_website/
|-- app.py
|-- templates/
|   |-- base.html
|   |-- index.html
|   |-- product.html
|   |-- cart.html
|   |-- checkout.html
|-- static/
|   |-- css/
|   |-- js/

三、设计数据库模型

在app.py文件中，我们需要定义数据库模型。这里我们创建两个模型：Product和User。

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

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

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

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), nullable=False)
    password = db.Column(db.String(50), nullable=False)
    cart = db.relationship('Cart', backref='user', lazy=True)

class Cart(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    product_id = db.Column(db.Integer, db.ForeignKey('product.id'), nullable=False)
    quantity = db.Column(db.Integer, nullable=False)

四、创建数据库

在app.py文件中，我们需要创建数据库表：

if __name__ == '__main__':
    db.create_all()

五、实现功能

1. 首页

在templates/index.html文件中，我们可以添加以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>购物网站</title>
</head>
<body>
    <h1>欢迎来到购物网站</h1>
    <ul>
        {% for product in products %}
            <li>{{ product.name }} - {{ product.price }}</li>
        {% endfor %}
    </ul>
</body>
</html>

在app.py文件中，我们需要获取所有产品信息并传递给模板：

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

2. 添加到购物车

在templates/index.html文件中，我们添加以下内容：

<form action="{{ url_for('add_to_cart', product_id=product.id) }}" method="post">
    <input type="number" name="quantity" min="1" value="1">
    <button type="submit">添加到购物车</button>
</form>

在app.py文件中，我们需要添加添加到购物车的功能：

@app.route('/add_to_cart/<int:product_id>', methods=['POST'])
def add_to_cart(product_id):
    quantity = request.form.get('quantity', 1)
    cart_item = Cart(product_id=product_id, quantity=quantity)
    db.session.add(cart_item)
    db.session.commit()
    return redirect(url_for('index'))

3. 购物车

在templates/cart.html文件中，我们可以添加以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
</head>
<body>
    <h1>购物车</h1>
    <ul>
        {% for item in cart_items %}
            <li>{{ item.product.name }} - 数量：{{ item.quantity }} - 小计：{{ item.product.price * item.quantity }}</li>
        {% endfor %}
    </ul>
</body>
</html>

在app.py文件中，我们需要获取购物车中的所有商品：

@app.route('/cart')
def cart():
    cart_items = Cart.query.all()
    return render_template('cart.html', cart_items=cart_items)

4. 结算

在templates/checkout.html文件中，我们可以添加以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>结算</title>
</head>
<body>
    <h1>结算</h1>
    <form action="{{ url_for('checkout') }}" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
        <button type="submit">结算</button>
    </form>
</body>
</html>

在app.py文件中，我们需要处理结算请求：

@app.route('/checkout', methods=['POST'])
def checkout():
    username = request.form.get('username')
    password = request.form.get('password')
    # 这里可以添加验证用户名和密码的逻辑
    # ...
    return render_template('checkout.html')

六、运行项目

在命令行中，输入以下命令运行项目：

python app.py

现在，你可以打开浏览器，访问http://127.0.0.1:5000/来查看你的购物网站了。

结语

通过以上步骤，我们成功使用Flask框架搭建了一个简单的购物网站。当然，这只是一个基础版本，还有很多功能可以进一步完善。希望这篇文章能够帮助你从零开始学习编程，并在实践中不断提升自己的技能。

-- 展开阅读全文 --