请执行以下命令初始化您的电商网站开发环境。

mkdir -p ecommerce-project/{config,public,src,templates} && touch ecommerce-project/config/settings.py ecommerce-project/public/index. ecommerce-project/src/app.py ecommerce-project/templates/product.

确保您的系统已安装Python 3.8以上版本及pip包管理工具。您可以通过以下命令验证安装状态：

python3 --version && pip3 --version

一、核心框架选择与配置

我们将采用Django 4.2作为后端框架，结合React 18构建前端界面。这种组合能够提供高性能的电商体验，同时保持良好的开发体验。

1.1 后端环境搭建

请按照以下步骤配置Django项目：

cd ecommerce-project
pip3 install django==4.2 django-cors-headers
django-admin startproject backend .
python manage.py startapp products
python manage.py startapp orders
python manage.py startapp payments

配置文件settings.py应包含以下核心设置：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'products',
    'orders',
    'payments',
]

CORS_ALLOWED_ORIGINS = [
    "https://your-frontend-domain.com",
    "https://localhost:3000",
]

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

1.2 前端工程化配置

使用Create React App初始化前端项目：

npx create-react-app ecommerce-frontend
cd ecommerce-frontend
npm install axios react-router-dom @material-ui/core

配置package.json中的开发脚本：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

二、数据库设计与模型构建

电商网站的核心数据结构包括商品、订单、用户和支付信息。我们将使用PostgreSQL 14作为数据库存储引擎。

2.1 数据库迁移配置

在backend/settings.py中配置数据库连接：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'ecommerce_db',
        'USER': 'your_db_user',
        'PASSWORD': 'your_db_password',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

执行以下命令创建数据库并应用迁移：

createdb ecommerce_db
python manage.py makemigrations
python manage.py migrate

2.2 核心数据模型

以下是products/models.py中的核心模型定义：

from django.db import models
from django.contrib.auth.models import User

class Category(models.Model):
    name = models.CharField(max_length=100, unique=True)
    description = models.TextField(blank=True)
    
    def __str__(self):
        return self.name

class Product(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    stock = models.IntegerField()
    category = models.ForeignKey(Category, on_delete=models.CASCADE, related_name='products')
    image = models.ImageField(upload_to='products/', blank=True)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    
    def __str__(self):
        return self.name

class Review(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name='reviews')
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    rating = models.IntegerField(validators=[MinValueValidator(1), MaxValueValidator(5)])
    comment = models.TextField(blank=True)
    created_at = models.DateTimeField(auto_now_add=True)

2.3 订单与支付模型

orders/models.py中的核心模型：

from django.db import models
from django.contrib.auth.models import User
from products.models import Product

class Order(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    address = models.TextField()
    phone = models.CharField(max_length=20)
    total_amount = models.DecimalField(max_digits=10, decimal_places=2)
    status = models.CharField(max_length=20, choices=[
        ('pending', 'Pending'),
        ('processing', 'Processing'),
        ('shipped', 'Shipped'),
        ('delivered', 'Delivered'),
        ('cancelled', 'Cancelled'),
    ])
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    
    def __str__(self):
        return f"Order {self.id} by {self.user.username}"

class OrderItem(models.Model):
    order = models.ForeignKey(Order, on_delete=models.CASCADE, related_name='items')
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.IntegerField()
    price = models.DecimalField(max_digits=10, decimal_places=2)

2.4 支付模型

payments/models.py中的核心模型：

from django.db import models
from django.contrib.auth.models import User
from orders.models import Order

class Payment(models.Model):
    order = models.ForeignKey(Order, on_delete=models.CASCADE)
    payment_method = models.CharField(max_length=20, choices=[
        ('credit_card', 'Credit Card'),
        ('paypal', 'PayPal'),
        ('bank_transfer', 'Bank Transfer'),
    ])
    amount = models.DecimalField(max_digits=10, decimal_places=2)
    transaction_id = models.CharField(max_length=100, unique=True)
    status = models.CharField(max_length=20, choices=[
        ('pending', 'Pending'),
        ('completed', 'Completed'),
        ('failed', 'Failed'),
    ])
    created_at = models.DateTimeField(auto_now_add=True)

三、API接口开发与集成

我们将使用Django REST Framework构建RESTful API，并通过CORS实现前后端分离。

3.1 API配置

安装必要的包：

pip3 install djangorestframework
python manage.py addapp api
python manage.py makemigrations api
python manage.py migrate

在backend/settings.py中配置：

INSTALLED_APPS = [
     ...其他设置...
    'rest_framework',
    'api',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticatedOrReadOnly',
    ],
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.CORSHeaderAuthentication',
    ],
}

3.2 核心API接口

以下是api/serializers.py中的序列化器定义：

from rest_framework import serializers
from products.models import Product, Category
from orders.models import Order, OrderItem
from users.models import User

class CategorySerializer(serializers.ModelSerializer):
    class Meta:
        model = Category
        fields = '__all__'

class ProductSerializer(serializers.ModelSerializer):
    category = CategorySerializer()
    reviews = serializers.PrimaryKeyRelatedField(many=True, queryset=Review.objects.all())
    
    class Meta:
        model = Product
        fields = '__all__'

class OrderSerializer(serializers.ModelSerializer):
    class Meta:
        model = Order
        fields = '__all__'

class OrderItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = OrderItem
        fields = '__all__'

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'email', 'password']
        extra_kwargs = {'password': {'write_only': True}}

以下是api/views.py中的视图定义：

from rest_framework import viewsets
from .models import Product, Category, Order, OrderItem
from .serializers import (
    ProductSerializer, CategorySerializer, OrderSerializer, 
    OrderItemSerializer
)

class CategoryViewSet(viewsets.ModelViewSet):
    queryset = Category.objects.all()
    serializer_class = CategorySerializer

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

class OrderViewSet(viewsets.ModelViewSet):
    queryset = Order.objects.all()
    serializer_class = OrderSerializer
    permission_classes = [permissions.IsAuthenticated]

class OrderItemViewSet(viewsets.ModelViewSet):
    queryset = OrderItem.objects.all()
    serializer_class = OrderItemSerializer
    permission_classes = [permissions.IsAuthenticated]

3.3 跨域资源共享配置

在backend/settings.py中配置CORS：

INSTALLED_APPS = [
     ...其他设置...
    'corsheaders',
]

CORS_ALLOWED_ORIGINS = [
    "https://your-frontend-domain.com",
    "https://localhost:3000",
]

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_credentials = True
CORS_ALLOW_methods = [
    "get",
    "post",
    "put",
    "patch",
    "delete",
    "options",
    "head"
]
CORS_ALLOW_headers = [
    "content-type",
    "x-requested-with",
    "Authorization",
    "Accept",
    "X-CSRFToken"
]

四、前端界面开发

我们将使用React Router和Material-UI构建用户友好的电商界面。

4.1 基础布局组件

创建src/components/Layout.js：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './Navbar';
import Footer from './Footer';
import './Layout.css';

const Layout = ({ children }) => {
    return (
        
            
            

                {children}
            
            

创建src/components/Navbar.js：

import React from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

const Navbar = () => {
    return (
        
    );
};

export default Navbar;

4.2 产品列表页面

创建src/pages/ProductList.js：

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import ProductCard from '../components/ProductCard';
import './ProductList.css';

const ProductList = () => {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [categories, setCategories] = useState([]);
    const [selectedCategory, setSelectedCategory] = useState('all');

    useEffect(() => {
        const fetchProducts = async () => {
            try {
                const response = await axios.get('/api/products/');
                setProducts(response.data);
                setError(null);
            } catch (err) {
                setError('Failed to fetch products');
                console.error(err);
            } finally {
                setLoading(false);
            }
        };

        const fetchCategories = async () => {
            try {
                const response = await axios.get('/api/categories/');
                setCategories(['all', ...response.data.map(c => c.name)]);
            } catch (err) {
                console.error(err);
            }
        };

        fetchProducts();
        fetchCategories();
    }, []);

    const filteredProducts = selectedCategory === 'all' 
        ? products 
        : products.filter(p => p.category.name === selectedCategory);

    return (
        

            
Products
            

                 setSelectedCategory(e.target.value)}
                >
                    {categories.map(category => (
                        {category}
                    ))}
                
            
            {loading ? (
                
Loading products...
            ) : error ? (
                
{error}
            ) : (
                

                    {filteredProducts.map(product => (
                        
                            
                        
                    ))}
                
            )}
        
    );
};

export default ProductList;

4.3 产品详情页面

创建src/pages/ProductDetail.js：

import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import axios from 'axios';
import ReviewForm from '../components/ReviewForm';
import './ProductDetail.css';

const ProductDetail = () => {
    const { id } = useParams();
    const [product, setProduct] = useState(null);
    const [reviews, setReviews] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchProduct = async () => {
            try {
                const response = await axios.get(`/api/products/${id}`);
                setProduct(response.data);
                setError(null);
            } catch (err) {
                setError('Failed to fetch product details');
                console.error(err);
            } finally {
                setLoading(false);
            }
        };

        const fetchReviews = async () => {
            try {
                const response = await axios.get(`/api/products/${id}/reviews`);
                setReviews(response.data);
            } catch (err) {
                console.error(err);
            }
        };

        fetchProduct();
        fetchReviews();
    }, [id]);

    if (loading) {
        return 
Loading product details...
;
    }

    if (error) {
        return 
{error}
;
    }

    return (
        

            

                
                

                    
{product.name}
                    
${product.price}
                    
{product.description}
                    

                        Category: {product.category.name}
                        In Stock: {product.stock}
                    
                    Add to Cart
                
            
            

                
Reviews
                

                    {reviews.map(review => (
                        

                            

                                {review.user.username}
                                

                                    {'★'.repeat(review.rating)}
                                    {'☆'.repeat(5 - review.rating)}
                                
                            
                            
{review.comment}
                        
                    ))}
                
                
            
        
    );
};

export default ProductDetail;

五、支付系统集成

我们将集成Stripe支付网关，为用户提供安全便捷的支付体验。

5.1 Stripe支付配置

在backend/settings.py中配置Stripe：

STRIPE_API_KEY = 'your_stripe_api_key'
STRIPE_SECRET_KEY = 'your_stripe_secret_key'
STRIPE_MODE = 'test'   or 'live'

 支付流程配置
PAYMENTGateways = {
    'stripe': {
        'active': True,
        'api_key': STRIPE_API_KEY,
        'secret_key': STRIPE_SECRET_KEY,
        'mode': STRIPE_MODE,
    }
}

安装Stripe Python库：

pip3 install stripe

5.2 创建支付视图

在backend/views.py中添加支付视图：

from rest_framework import status
from rest_framework.decorators import api_view, permission_classes
from rest_framework.response import Response
from .models import Order, Payment
from .serializers import PaymentSerializer
import stripe

@api_view(['POST'])
@permission_classes([permissions.IsAuthenticated])
def create_paymentIntent(request):
    order_id = request.data.get('order_id')
    amount = request.data.get('amount')
    
    if not order_id or not amount:
        return Response({'error': 'Missing order_id or amount'}, status=status.HTTP_400_BAD_REQUEST)
    
    try:
        order = Order.objects.get(id=order_id)
        if order.user != request.user:
            return Response({'error': 'Unauthorized'}, status=status.HTTP_403_FORBIDDEN)
            
        stripe.api_key = settings.STRIPE_SECRET_KEY
        
        payment_intent = stripe.PaymentIntent.create(
            amount=int(amount  100),   Stripe金额以分为单位
            currency='usd',
            payment_method_types=['card'],
            metadata={'order_id': order_id}
        )
        
        return Response({
            'client_secret': payment_intent.client_secret,
            'status': payment_intent.status
        })
        
    except Order.DoesNotExist:
        return Response({'error': 'Order not found'}, status=status.HTTP_404_NOT_FOUND)
    except stripe.error.StripeError as e:
        return Response({'error': str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

5.3 前端支付集成

在src/pages/Checkout.js中集成Stripe支付：

import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import StripeCheckout from 'react-stripe-checkout';
import './Checkout.css';

const Checkout = () => {
    const { id } = useParams();
    const navigate = useNavigate();
    const [order, setOrder] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchOrder = async () => {
            try {
                const response = await axios.get(`/api/orders/${id}`);
                setOrder(response.data);
                setError(null);
            } catch (err) {
                setError('Failed to fetch order details');
                console.error(err);
            } finally {
                setLoading(false);
            }
        };

        fetchOrder();
    }, [id]);

    if (loading) {
        return 
Loading checkout page...
;
    }

    if (error) {
        return 
{error}
;
    }

    const handlePaymentSuccess = async (paymentResult) => {
        try {
            const response = await axios.post('/api/payments/', {
                order_id: id,
                payment_method: paymentResult.paymentMethod,
                amount: order.total_amount,
                transaction_id: paymentResult.paymentIntent.client_secret
            });
            
            if (response.data.status === 'completed') {
                navigate('/account/orders');
            }
        } catch (err) {
            console.error('Payment failed:', err);
            setError('Payment processing failed');
        }
    };

    return (
        

            
Checkout
            {order && (
                

                    
Order Summary
                    

                        
Order ID: {order.id}
                        
Items: {order.items.map(item => `${item.quantity} x ${item.product.name}`).join(', ')}
                        
Total: ${order.total_amount}
                        
Shipping: ${order.shipping_cost}
                        
Address: {order.address}
                    
                
            )}
            

                
Payment Method
                 {
                        console.error('Payment error:', error);
                        setError('Payment failed. Please try again.');
                    }}
                    onPaymentCancel={() => {
                        console.log('Payment was cancelled');
                    }}
                >
                    Pay with Stripe
                
                {error && 
{error}
}
            
        
    );
};

export default Checkout;

六、部署与优化

我们将使用Docker容器化应用，并在AWS上部署。

6.1 Docker环境配置

创建docker-compose.yml文件：

version: '3.8'

services:
  db:
    image: postgres:14
    volumes:
      - db-data:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: ecommerce_db
      POSTGRES_USER: your_db_user
      POSTGRES_PASSWORD: your_db_password
    networks:
      - ecommerce-net

  backend:
    build:
      context: .
      dockerfile: Dockerfile
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/app
    ports:
      - "8000:8000"
    depends_on:
      - db
    networks:
      - ecommerce-net
    environment:
      - DEBUG=on
      - SECRET_KEY=your_secret_key
      - STRIPE_API_KEY=your_stripe_api_key
      - STRIPE_SECRET_KEY=your_stripe_secret_key

  frontend:
    build:
      context: ./ecommerce-frontend
      dockerfile: Dockerfile
    command: npm start
    ports:
      - "3000:3000"
    depends_on:
      - backend
    networks:
      - ecommerce-net

networks:
  ecommerce-net:

创建Dockerfile：

 Backend Dockerfile
FROM python:3.9-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

创建requirements.txt：

Django==4.2
djangorestframework
django-cors-headers
stripe
psycopg2-binary
gunicorn
celery
redis
django-axes
django-debug-toolbar
django-silk
django-redis-cache
django-stripe

6.2 AWS部署配置

创建AWS Elastic Beanstalk环境：

1. 在AWS管理控制台创建Elastic Beanstalk应用
2. 选择Django作为平台
3. 上传docker-compose.yml文件
4. 配置环境变量（数据库连接、Stripe密钥等）
5. 设置环境配置文件（config/settings.py）
6. 部署应用

6.3 性能优化

实施以下优化措施：

• 配置Redis缓存（在settings.py中配置缓存后端）
• 使用Django Silk分析并优化数据库查询
• 配置Gunicorn作为WSGI服务器（工作进程数设置为2倍CPU核心数）
• 启用Django Debug Toolbar进行性能监控
• 配置CDN加速静态资源分发
• 实施缓存策略（页面缓存、对象缓存、数据库查询缓存）
• 使用AWS CloudFront作为反向代理

七、安全配置

实施电商网站安全最佳实践。

7.1 基本安全配置

在backend/settings.py中配置安全设置：

SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_HSTS_SECONDS = 3600
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_HTTPONLY = True
CSRF_COOKIE_SAMESITE = 'Lax'
SECURE_BROWSER_XSS_FILTER = True
ALLOWED_HOSTS = ['yourdomain.com', 'www.yourdomain.com']

7.2 防止常见攻击

实施以下安全措施：

• 安装并配置django-axes防止暴力破解
• 使用django-stripe安全处理支付信息
• 配置HTTPS（使用Let's Encrypt免费证书）
• 实施CSRF保护（Django默认开启）
• 禁用不必要的服务和端口
• 定期更新所有依赖包
• 实施访问控制（基于用户权限）
• 使用AWS WAF保护应用免受DDoS攻击

八、监控与维护

建立完善的监控和维护体系。

8.1 监控配置

配置Django监控：

• 安装并配置Django Debug Toolbar
• 使用Prometheus和Grafana监控应用性能
• 配置AWS CloudWatch监控基础设施
• 设置发送警报的阈值（CPU使用率、内存使用率、响应时间）

8.2 维护计划

建立定期维护计划：

• 每日检查订单处理状态
• 每周检查支付网关连接
• 每月备份数据库和文件
• 每季度更新依赖包和安全补丁
• 每半年进行性能评估和优化