请求基于Bootstrap、Python、Django、MongoDB的电商网站开发全流程指导

安全阿岳

2026-7-10

电商网站开发分步指南（Bootstrap+Django+MongoDB）

一、项目初始化后的目录结构

创建完成后，编辑器里会生成如下目录与文件：

ecommerce_site/
├── ecommerce/          # Django项目根目录
│   ├── __init__.py
│   ├── settings.py     # 核心配置（MongoDB连接、静态资源、应用注册）
│   ├── urls.py         # 全局路由入口
│   ├── wsgi.py
│   └── asgi.py
├── store/              # 自定义电商业务应用
│   ├── __init__.py
│   ├── admin.py        # 后台管理配置
│   ├── apps.py
│   ├── models.py       # MongoDB数据模型
│   ├── views.py        # 视图函数（页面渲染+API接口）
│   ├── urls.py         # 应用级路由
│   ├── templates/      # 前端HTML模板
│   │   └── store/
│   │       ├── index.html
│   │       ├── product_detail.html
│   │       └── cart.html
│   └── static/         # 静态资源目录
│       ├── css/
│       │   └── custom.css
│       ├── js/
│       │   └── custom.js
│       └── bootstrap/  # 可选：本地Bootstrap文件（推荐用CDN）
├── manage.py           # Django命令行工具
└── requirements.txt    # 依赖清单

二、分步开发流程

1. 环境与项目初始化

安装依赖：
```
pip install django djongo
```
（djongo是Django连接MongoDB的适配库）

创建Django项目与应用：

django-admin startproject ecommerce
cd ecommerce
python manage.py startapp store

在ecommerce/settings.py中注册应用并配置MongoDB：

# 注册应用
INSTALLED_APPS = [
    ...
    'store',
]

# MongoDB数据库配置
DATABASES = {
    'default': {
        'ENGINE': 'djongo',
        'NAME': 'ecommerce_db',
        'CLIENT': {
            'host': 'mongodb://localhost:27017/',
            # 有账号密码的话添加username、password字段
        }
    }
}

# 静态资源与模板配置
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'store/static']
TEMPLATES[0]['DIRS'] = [BASE_DIR / 'store/templates']

2. 后端数据模型（MongoDB）

在store/models.py中定义核心业务模型：

from djongo import models

class Product(models.Model):
    _id = models.ObjectIdField()
    name = models.CharField(max_length=200)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    description = models.TextField()
    image_url = models.URLField()
    category = models.CharField(max_length=100)

    class Meta:
        db_table = 'products'

class CartItem(models.Model):
    _id = models.ObjectIdField()
    user_id = models.CharField(max_length=100)  # 初期用临时用户ID，后期替换为Django Auth
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.IntegerField(default=1)

    class Meta:
        db_table = 'cart_items'

执行迁移同步到MongoDB：

python manage.py makemigrations
python manage.py migrate

3. 后端视图与路由

视图函数（`store/views.py`）

from django.shortcuts import render
from .models import Product, CartItem
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json

# 首页商品列表渲染
def home(request):
    products = Product.objects.all()
    return render(request, 'store/index.html', {'products': products})

# 商品详情页
def product_detail(request, product_id):
    product = Product.objects.get(_id=product_id)
    return render(request, 'store/product_detail.html', {'product': product})

# 添加购物车API
@csrf_exempt
def add_to_cart(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        user_id = data.get('user_id', 'guest')
        product_id = data.get('product_id')
        quantity = int(data.get('quantity', 1))

        product = Product.objects.get(_id=product_id)
        cart_item, created = CartItem.objects.get_or_create(
            user_id=user_id, product=product,
            defaults={'quantity': quantity}
        )
        if not created:
            cart_item.quantity += quantity
            cart_item.save()
        return JsonResponse({'status': 'success', 'message': '添加成功'})
    return JsonResponse({'status': 'error', 'message': '无效请求'})

路由配置

全局路由ecommerce/urls.py：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('store.urls')),
]

应用路由store/urls.py：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('product/<str:product_id>/', views.product_detail, name='product_detail'),
    path('api/add-to-cart/', views.add_to_cart, name='add_to_cart'),
]

4. 前端页面开发（Bootstrap）

首页模板`store/templates/store/index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商商城</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static 'css/custom.css' %}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{% url 'home' %}">电商商城</a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="#">购物车</a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h2 class="mb-4">热门商品</h2>
        <div class="row g-4">
            {% for product in products %}
            <div class="col-md-3">
                <div class="card h-100">
                    <img src="{{ product.image_url }}" class="card-img-top" alt="{{ product.name }}" style="height:200px;object-fit:cover;">
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text">¥{{ product.price }}</p>
                        <a href="{% url 'product_detail' product._id %}" class="btn btn-primary w-100 mb-2">查看详情</a>
                        <button class="btn btn-secondary w-100 add-to-cart" data-id="{{ product._id }}">加入购物车</button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{% static 'js/custom.js' %}"></script>
</body>
</html>

前端交互JS（`store/static/js/custom.js`）

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.add-to-cart').forEach(btn => {
        btn.addEventListener('click', function() {
            const productId = this.dataset.id;
            fetch('/api/add-to-cart/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    product_id: productId,
                    user_id: 'guest_001',
                    quantity: 1
                })
            })
            .then(res => res.json())
            .then(data => alert(data.message))
            .catch(err => console.error(err));
        });
    });
});

// 获取Django CSRF Token
function getCookie(name) {
    let value = null;
    if (document.cookie) {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            cookie = cookie.trim();
            if (cookie.startsWith(`${name}=`)) {
                value = decodeURIComponent(cookie.slice(name.length + 1));
                break;
            }
        }
    }
    return value;
}

5. 前后端关联核心要点

模板渲染：通过Django模板标签{% %}和{{ }}将后端查询的商品数据注入HTML页面，实现动态内容展示。
API交互：前端通过fetch调用Django的API接口，注意携带CSRF Token避免跨域请求被拦截。
静态资源引用：使用{% static %}标签加载本地CSS/JS文件，Bootstrap优先使用CDN减少本地资源占用。
数据库操作：通过djongo适配层，直接用Django ORM语法操作MongoDB，无需编写原生MongoDB查询语句。

6. 核心功能扩展建议

用户认证：集成Django自带的django.contrib.auth模块，替换临时user_id为真实用户ID。
购物车管理：新增查看、修改、删除购物车商品的API与页面。
订单系统：创建Order模型，实现下单、支付流程（可集成第三方支付SDK）。

后台管理：在store/admin.py注册模型，通过Django Admin实现商品的增删改查：

from django.contrib import admin
from .models import Product, CartItem

admin.site.register(Product)
admin.site.register(CartItem)

内容的提问来源于stack exchange，提问作者user22517839

请求基于Bootstrap、Python、Django、MongoDB的电商网站开发全流程指导

一、项目初始化后的目录结构 #

二、分步开发流程 #

1. 环境与项目初始化 #

2. 后端数据模型（MongoDB） #

3. 后端视图与路由 #

视图函数（store/views.py）