技术栈选择与项目初始化
现代Web开发通常采用前后端分离架构。我们将使用以下技术栈：
– 后端：Django（Python 3.10+）
– 前端：React 18（TypeScript）
– 数据库：PostgreSQL 14
– 部署：Docker + Nginx
使用Poetry初始化项目依赖管理：
poetry init -n
poetry add django==4.2 djangorestframework==3.14
Django后端核心实现
模型设计与ORM映射
定义核心数据模型时需考虑数据库范式与查询性能的平衡。以下是一个博客应用的模型示例：
from django.db import models
from django.contrib.auth import get_user_model
class Post(models.Model):
STATUS_CHOICES = [
('draft', 'Draft'),
('published', 'Published')
]
title = models.CharField(max_length=250, db_index=True)
slug = models.SlugField(unique_for_date='publish')
author = models.ForeignKey(
get_user_model(),
on_delete=models.CASCADE,
related_name='blog_posts'
)
body = models.TextField()
publish = models.DateTimeField(default=timezone.now)
status = models.CharField(
max_length=10,
choices=STATUS_CHOICES,
default='draft'
)
class Meta:
ordering = ('-publish',)
indexes = [
models.Index(fields=['-publish']),
models.Index(fields=['status']),
]
REST API开发最佳实践
使用DRF（Django REST Framework）构建API时，应注意：
- 版本控制：通过URL路径或请求头实现
- 认证方案：JWT与Session认证的适用场景
- 分页策略：CursorPagination对大数据集的优化
示例序列化器与视图：
from rest_framework import serializers
from rest_framework.viewsets import ModelViewSet
class PostSerializer(serializers.ModelSerializer):
author = serializers.StringRelatedField()
class Meta:
model = Post
fields = '__all__'
read_only_fields = ('author', 'publish')
class PostViewSet(ModelViewSet):
queryset = Post.objects.filter(status='published')
serializer_class = PostSerializer
permission_classes = [IsAuthenticatedOrReadOnly]
def perform_create(self, serializer):
serializer.save(author=self.request.user)
前端工程化实践
React组件架构设计
采用原子设计方法论组织组件结构：
src/
├── components/
│ ├── atoms/
│ ├── molecules/
│ └── organisms/
├── hooks/
└── store/ # Zustand状态管理
典型组件示例：
import { useQuery } from '@tanstack/react-query'
const PostList = () => {
const { data, isLoading } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts
})
return (
<ul className="space-y-4">
{data?.map(post => (
<PostCard
key={post.id}
title={post.title}
excerpt={post.body.slice(0, 100)}
/>
))}
</ul>
)
}
性能优化策略
- 代码分割：React.lazy + Suspense
- 图片懒加载：Intersection Observer API
- 请求缓存：React Query的staleTime配置
部署与持续集成
Docker多阶段构建
# 构建阶段
FROM node:18 as frontend-builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# 生产阶段
FROM python:3.10-slim
RUN apt-get update && apt-get install -y libpq-dev
COPY --from=frontend-builder /app/dist /static
COPY requirements.txt .
RUN pip install -r requirements.txt
EXPOSE 8000
CMD ["gunicorn", "core.wsgi:application"]
CI/CD流水线配置
GitHub Actions示例：
name: CI
on: [push]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: poetry install
- run: python manage.py test
deploy:
needs: test
runs-on: ubuntu-latest
environment: production
steps:
- uses: docker/build-push-action@v3
with:
push: true
tags: user/app:latest
安全防护措施
-
Django安全中间件：
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'csp.middleware.CSPMiddleware', ] -
CSP策略：
CSP_DEFAULT_SRC = ("'self'",) CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'") -
SQL注入防护：
- 始终使用ORM或参数化查询
- 避免直接拼接SQL语句
性能监控与日志
使用Prometheus+Grafana监控系统关键指标：
# prometheus_client配置示例
from prometheus_client import Counter
REQUEST_COUNT = Counter(
'django_requests_total',
'Total HTTP Requests',
['method', 'path', 'status']
)
class MetricsMiddleware:
def __init__(self, get_response):
self.get_response = get_response
def __call__(self, request):
response = self.get_response(request)
REQUEST_COUNT.labels(
method=request.method,
path=request.path,
status=response.status_code
).inc()
return response
项目演进建议
-
微服务化拆分：
- 当单体应用超过5万行代码时考虑
- 使用gRPC进行服务间通信
-
Serverless架构：
- 适用于突发流量场景
- AWS Lambda + API Gateway组合方案
-
边缘计算：
- 使用Cloudflare Workers处理静态资源
- 实现全球加速