在互联网飞速发展的今天，在线商城成为了许多企业和个人创业的热门选择。Flask 是一个简单、轻量级的 Web 开发框架，非常适合初学者入门和实践。下面，我将带你一步步用 Flask 框架搭建一个简单的在线商城。
准备工作
在开始之前，请确保你的电脑上已经安装了以下工具：
- Python 3.x 版本
- Flask 框架
- 一个代码编辑器（如 Visual Studio Code 或 Sublime Text）
环境搭建
安装 Python 和 Flask
打开命令行工具，执行以下命令安装 Python 和 Flask：
pip install flask
创建项目文件夹
创建一个名为 online-mall 的项目文件夹，并在其中创建一个名为 app.py 的 Python 文件。
项目结构
以下是项目的基本结构：
online-mall/
├── app.py
├── static/
│ ├── css/
│ ├── js/
│ └── images/
├── templates/
│ ├── base.html
│ ├── index.html
│ ├── product.html
│ └── cart.html
└── requirements.txt
创建 Flask 应用
在 app.py 文件中，编写以下代码：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
这段代码创建了一个 Flask 应用，并定义了一个根路由（/）。
创建模板
创建基础模板
在 templates 文件夹中创建一个名为 base.html 的文件，用于定义页面的基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<!-- 引入 CSS 文件 -->
</head>
<body>
<header>
<!-- 头部导航 -->
</header>
<main>
{% block content %}
{% endblock %}
</main>
<footer>
<!-- 页脚信息 -->
</footer>
<!-- 引入 JS 文件 -->
</body>
</html>
创建首页模板
在 templates 文件夹中创建一个名为 index.html 的文件，用于展示首页内容：
{% extends "base.html" %}
{% block content %}
<h1>欢迎来到我们的在线商城</h1>
<p>这里有你想要的商品，快来选购吧！</p>
{% endblock %}
创建商品详情模板
在 templates 文件夹中创建一个名为 product.html 的文件，用于展示商品详情：
{% extends "base.html" %}
{% block content %}
<h1>{{ product.name }}</h1>
<p>{{ product.description }}</p>
<p>价格：￥{{ product.price }}</p>
<a href="{{ url_for('add_to_cart', product_id=product.id) }}">加入购物车</a>
{% endblock %}
创建购物车模板
在 templates 文件夹中创建一个名为 cart.html 的文件，用于展示购物车内容：
{% extends "base.html" %}
{% block content %}
<h1>购物车</h1>
<ul>
{% for item in cart %}
<li>{{ item.product.name }} × {{ item.quantity }}</li>
{% endfor %}
</ul>
<a href="{{ url_for('checkout') }}">结算</a>
{% endblock %}
实现功能
商品展示
在 app.py 文件中，添加以下代码展示商品列表：
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///online-mall.db'
db = SQLAlchemy(app)
# 定义商品模型
class Product(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80), unique=True)
description = db.Column(db.String(200))
price = db.Column(db.Float)
def __init__(self, name, description, price):
self.name = name
self.description = description
self.price = price
# 创建数据库和表
db.create_all()
# 展示商品列表
@app.route('/products')
def products():
products = Product.query.all()
return render_template('products.html', products=products)
在 templates 文件夹中创建一个名为 products.html 的文件，用于展示商品列表：
{% extends "base.html" %}
{% block content %}
<h1>商品列表</h1>
<ul>
{% for product in products %}
<li>
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
<p>价格：￥{{ product.price }}</p>
<a href="{{ url_for('product', product_id=product.id) }}">详情</a>
</li>
{% endfor %}
</ul>
{% endblock %}
商品详情
在 app.py 文件中，添加以下代码展示商品详情：
@app.route('/product/<int:product_id>')
def product(product_id):
product = Product.query.get(product_id)
return render_template('product.html', product=product)
购物车功能
在 app.py 文件中，添加以下代码实现购物车功能：
from flask import session
# 定义购物车模型
class CartItem:
def __init__(self, product_id, quantity):
self.product_id = product_id
self.quantity = quantity
@app.route('/add_to_cart/<int:product_id>')
def add_to_cart(product_id):
if 'cart' not in session:
session['cart'] = []
cart = session['cart']
cart_item = next((item for item in cart if item.product_id == product_id), None)
if cart_item:
cart_item.quantity += 1
else:
cart.append(CartItem(product_id, 1))
return redirect(url_for('cart'))
@app.route('/cart')
def cart():
cart_items = [CartItem(**item) for item in session.get('cart', [])]
return render_template('cart.html', cart_items=cart_items)
部署应用
当你完成上述步骤后，可以启动 Flask 应用：
python app.py
然后在浏览器中访问 http://127.0.0.1:5000/，你将看到你的在线商城首页。
总结
通过以上步骤，你已经成功地用 Flask 框架搭建了一个简单的在线商城。当然，这只是一个基础版本，你可以根据自己的需求进行扩展和优化。祝你创业成功！