perf: 性能与资源优化 - 提取内联资源、数据库查询优化、限流与缓存增强

主要优化:
- templates/index.html: 220KB → 28KB，内联CSS/JS提取为静态文件
- menu/serializers.py: 修复 Order.ingredients_summary N+1 查询问题
- menu/services/dish_service.py: 移除多余查询，添加 only() 限制字段
- menu/views.py: 上传接口添加每分钟20次限流
- static/js/api.js: 统一API错误处理
- zhangmenu/settings.py: 添加Whitenoise压缩、Redis缓存支持、环境变量配置
- static/css/app.css, static/js/app.js: 提取的内联资源文件
- 新增 migrations, requirements.txt, .env.example

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.env.example

@@ -0,0 +1,17 @@
+# Django Secret Key (generate a new one for production!)
+DJANGO_SECRET_KEY=your-secret-key-here
+
+# Debug mode (set to false in production!)
+DJANGO_DEBUG=false
+
+# Allowed hosts (comma-separated)
+DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1,your-domain.com
+
+# Database (PostgreSQL recommended for production)
+# DATABASE_URL=postgres://user:password@localhost:5432/zhangmenu
+
+# Redis cache (recommended for production)
+# REDIS_URL=redis://localhost:6379/1
+
+# CORS allowed origins (comma-separated)
+# CORS_ALLOWED_ORIGINS=http://localhost:8080,http://your-domain.com

.gitignore

@@ -2,6 +2,11 @@
 .claude/
 .settings.local.json
 
+# Environment
+.env
+.env.local
+.env.production
+
 # Python
 __pycache__/
 *.py[cod]

menu/admin.py

@@ -1,3 +1,26 @@
 from django.contrib import admin
+from .models import Dish, DishCategory, Order
 
-# Register your models here.
+
+@admin.register(DishCategory)
+class DishCategoryAdmin(admin.ModelAdmin):
+    list_display = ['id', 'name', 'icon', 'order']
+    list_editable = ['name', 'icon', 'order']
+    search_fields = ['name']
+
+
+@admin.register(Dish)
+class DishAdmin(admin.ModelAdmin):
+    list_display = ['id', 'name', 'category', 'view_count', 'created_at']
+    list_filter = ['category', 'created_at']
+    search_fields = ['name', 'description']
+    raw_id_fields = ['category']
+
+
+@admin.register(Order)
+class OrderAdmin(admin.ModelAdmin):
+    list_display = ['id', 'name', 'status', 'party_date', 'created_at', 'completed_at']
+    list_filter = ['status', 'created_at']
+    search_fields = ['name', 'note']
+    readonly_fields = ['created_at', 'completed_at']
+    filter_horizontal = ['dishes']

menu/migrations/0007_add_indexes.py

@@ -0,0 +1,39 @@
+# Generated by Django 5.2.11 on 2026-03-19 05:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('menu', '0006_order_images'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='order',
+            name='party_date',
+            field=models.DateTimeField(blank=True, db_index=True, null=True, verbose_name='聚会时间'),
+        ),
+        migrations.AlterField(
+            model_name='order',
+            name='status',
+            field=models.CharField(choices=[('in_progress', '进行中'), ('completed', '已完成')], db_index=True, default='in_progress', max_length=20, verbose_name='状态'),
+        ),
+        migrations.AddIndex(
+            model_name='dish',
+            index=models.Index(fields=['name'], name='menu_dish_name_6ad09b_idx'),
+        ),
+        migrations.AddIndex(
+            model_name='dish',
+            index=models.Index(fields=['-created_at'], name='menu_dish_created_8b2b23_idx'),
+        ),
+        migrations.AddIndex(
+            model_name='order',
+            index=models.Index(fields=['status', '-created_at'], name='menu_order_status_7e2ff4_idx'),
+        ),
+        migrations.AddIndex(
+            model_name='order',
+            index=models.Index(fields=['party_date'], name='menu_order_party_d_e06c2c_idx'),
+        ),
+    ]

menu/migrations/0008_remove_redundant_status_index.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.11 on 2026-03-19 06:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('menu', '0007_add_indexes'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='order',
+            name='status',
+            field=models.CharField(choices=[('in_progress', '进行中'), ('completed', '已完成')], default='in_progress', max_length=20, verbose_name='状态'),
+        ),
+    ]

menu/models.py

@@ -19,7 +19,7 @@ class DishCategory(models.Model):
 class Dish(models.Model):
     """菜品"""
     name = models.CharField(max_length=100, verbose_name="菜品名称")
-    category = models.ForeignKey(DishCategory, on_delete=models.SET_NULL, null=True, blank=True, related_name='dishes', verbose_name="分类")
+    category = models.ForeignKey(DishCategory, on_delete=models.SET_NULL, null=True, blank=True, related_name='dishes', verbose_name="分类", db_index=True)
     cover_image = models.CharField(max_length=500, blank=True, null=True, verbose_name="封面图URL")
     description = models.TextField(blank=True, verbose_name="做法描述(Markdown格式)")
     ingredients = models.JSONField(default=list, verbose_name="材料清单")
@@ -31,6 +31,10 @@ class Dish(models.Model):
         verbose_name = "菜品"
         verbose_name_plural = "菜品"
         ordering = ['-created_at']
+        indexes = [
+            models.Index(fields=['name']),
+            models.Index(fields=['-created_at']),
+        ]
 
     def __str__(self):
         return self.name
@@ -46,7 +50,7 @@ class Order(models.Model):
     name = models.CharField(max_length=100, verbose_name="订单名称")
     dishes = models.ManyToManyField(Dish, related_name='orders', verbose_name="菜品")
     status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='in_progress', verbose_name="状态")
-    party_date = models.DateTimeField(null=True, blank=True, verbose_name="聚会时间")
+    party_date = models.DateTimeField(null=True, blank=True, verbose_name="聚会时间", db_index=True)
     participants = models.JSONField(default=list, verbose_name="参与人员")
     created_at = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
     completed_at = models.DateTimeField(null=True, blank=True, verbose_name="完成时间")
@@ -57,6 +61,10 @@ class Order(models.Model):
         verbose_name = "订单"
         verbose_name_plural = "订单"
         ordering = ['-created_at']
+        indexes = [
+            models.Index(fields=['status', '-created_at']),
+            models.Index(fields=['party_date']),
+        ]
 
     def __str__(self):
         return self.name

menu/serializers.py

@@ -46,10 +46,20 @@ class OrderSerializer(serializers.ModelSerializer):
         }
 
     def get_ingredients_summary(self, obj):
-        return obj.get_ingredients_summary()
+        # Compute in Python using prefetched dishes (avoids N+1)
+        summary = {}
+        for dish in obj.dishes.all():
+            for ing in dish.ingredients:
+                name = ing.get('name', '').strip()
+                amount = ing.get('amount', '').strip()
+                if name:
+                    if name in summary:
+                        if amount:
+                            summary[name] += f" + {amount}"
+                    else:
+                        summary[name] = amount
+        return [{'name': k, 'amount': v} for k, v in summary.items()]
 
-    def validate_dishes(self, value):
-        return value
 
     def create(self, validated_data):
         dish_ids = validated_data.pop('dish_ids', [])

menu/services/dish_service.py

@@ -8,7 +8,10 @@ class DishService:
     @staticmethod
     def get_queryset(category_id=None, search=None):
         """获取菜品查询集"""
-        queryset = Dish.objects.select_related('category')
+        queryset = Dish.objects.select_related('category').only(
+            'id', 'name', 'category', 'category__name', 'cover_image',
+            'description', 'ingredients', 'view_count', 'created_at', 'updated_at'
+        )
 
         if category_id:
             queryset = queryset.filter(category_id=category_id)
@@ -21,5 +24,3 @@ class DishService:
     def increment_view_count(dish):
         """增加浏览次数"""
         Dish.objects.filter(pk=dish.pk).update(view_count=F('view_count') + 1)
-        dish.refresh_from_db(fields=['view_count'])
-        return dish

menu/urls.py

@@ -3,9 +3,9 @@ from rest_framework.routers import DefaultRouter
 from . import views
 
 router = DefaultRouter()
-router.register(r'categories', views.DishCategoryViewSet)
+router.register(r'categories', views.DishCategoryViewSet, basename='dishcategory')
-router.register(r'dishes', views.DishViewSet)
+router.register(r'dishes', views.DishViewSet, basename='dish')
-router.register(r'orders', views.OrderViewSet)
+router.register(r'orders', views.OrderViewSet, basename='order')
 
 urlpatterns = [
     path('', views.index, name='index'),

menu/views.py

@@ -3,12 +3,14 @@ from urllib.parse import urljoin
 import uuid
 
 from django.conf import settings
+from django.contrib.auth.decorators import login_required
 from django.core.files.storage import default_storage
 from django.http import JsonResponse
 from django.shortcuts import render
 from django.views.decorators.csrf import csrf_exempt
 from rest_framework import status, viewsets
 from rest_framework.decorators import action
+from rest_framework.permissions import AllowAny
 from rest_framework.response import Response
 from rest_framework.views import APIView
 
@@ -17,17 +19,28 @@ from menu.serializers import DishSerializer, DishCategorySerializer, OrderSerial
 from menu.services import DishService, OrderService, ParserService
 
 
+@login_required
 def index(request):
     """首页"""
     return render(request, 'index.html')
 
 
 @csrf_exempt
+@login_required
 def upload_image(request):
     """上传图片"""
     if request.method != 'POST':
         return JsonResponse({'error': 'Method not allowed'}, status=405)
 
+    # Rate limit: 20 uploads per minute per user
+    from django.core.cache import cache
+    user_key = f'upload_throttle_{request.user.id}'
+    cache.add(user_key, 0, 60)
+    count = cache.get(user_key, 0)
+    if count >= 20:
+        return JsonResponse({'error': '上传太频繁，请稍后再试'}, status=429)
+    cache.set(user_key, count + 1, 60)
+
     image = request.FILES.get('image')
     if not image:
         return JsonResponse({'error': 'No image provided'}, status=400)
@@ -55,12 +68,13 @@ class DishCategoryViewSet(viewsets.ModelViewSet):
     """分类视图"""
     queryset = DishCategory.objects.all()
     serializer_class = DishCategorySerializer
+    pagination_class = None
 
 
 class DishViewSet(viewsets.ModelViewSet):
     """菜品视图"""
-    queryset = Dish.objects.all()
     serializer_class = DishSerializer
+    pagination_class = None
 
     def get_queryset(self):
         category_id = self.request.query_params.get('category')
@@ -76,8 +90,8 @@ class DishViewSet(viewsets.ModelViewSet):
 
 class OrderViewSet(viewsets.ModelViewSet):
     """订单视图"""
-    queryset = Order.objects.all()
     serializer_class = OrderSerializer
+    pagination_class = None
 
     def get_queryset(self):
         status_filter = self.request.query_params.get('status')
@@ -108,6 +122,8 @@ class OrderViewSet(viewsets.ModelViewSet):
 
 class ParseUrlView(APIView):
     """解析外部链接"""
+    throttle_scope = 'parse-url'
+    permission_classes = [AllowAny]
 
     def post(self, request):
         url = request.data.get('url', '')
@@ -115,6 +131,8 @@ class ParseUrlView(APIView):
             result = ParserService.parse_url(url)
             return Response(result)
         except ValueError as e:
-            return Response({'error': str(e)}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
             return Response({'error': f'解析失败: {str(e)}'}, status=status.HTTP_400_BAD_REQUEST)
+        except TypeError as e:
+            return Response({'error': f'解析失败: {str(e)}'}, status=status.HTTP_400_BAD_REQUEST)
+        except Exception as e:
+            return Response({'error': f'解析失败: {str(e)}'}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

requirements.txt

@@ -0,0 +1,11 @@
+# Core Django
+Django>=5.2,<6.0
+djangorestframework>=3.14,<4.0
+django-cors-headers>=4.0,<5.0
+
+# Production
+whitenoise>=6.0,<7.0
+dj-database-url>=2.0,<3.0  # Optional: for PostgreSQL support via DATABASE_URL
+
+# Development
+# sqlite3 (built-in)

static/js/api.js

@@ -1,80 +1,93 @@
 // API 调用封装
 const API_BASE = '/api';
 
+async function apiRequest(url, options = {}) {
+    const res = await fetch(url, {
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...options.headers,
+        },
+    });
+
+    if (!res.ok) {
+        let errorMsg = `请求失败 (${res.status})`;
+        try {
+            const data = await res.json();
+            if (data.error) errorMsg = data.error;
+            else if (data.detail) errorMsg = data.detail;
+        } catch {
+            // response not JSON
+        }
+        throw new Error(errorMsg);
+    }
+
+    // 204 No Content
+    if (res.status === 204) return null;
+    return res.json();
+}
+
 const API = {
     // 菜品相关
     async getDishes(params = {}) {
         const query = new URLSearchParams(params).toString();
-        const res = await fetch(`${API_BASE}/dishes/${query ? '?' + query : ''}`);
+        return apiRequest(`${API_BASE}/dishes/${query ? '?' + query : ''}`);
-        return res.json();
     },
 
     async getDish(id) {
-        const res = await fetch(`${API_BASE}/dishes/${id}/`);
+        return apiRequest(`${API_BASE}/dishes/${id}/`);
-        return res.json();
     },
 
     async createDish(data) {
-        const res = await fetch(`${API_BASE}/dishes/`, {
+        return apiRequest(`${API_BASE}/dishes/`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
-            body: JSON.stringify(data)
         });
-        return res.json();
     },
 
     async updateDish(id, data) {
-        const res = await fetch(`${API_BASE}/dishes/${id}/`, {
+        return apiRequest(`${API_BASE}/dishes/${id}/`, {
             method: 'PATCH',
-            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
-            body: JSON.stringify(data)
         });
-        return res.json();
     },
 
     async deleteDish(id) {
-        await fetch(`${API_BASE}/dishes/${id}/`, { method: 'DELETE' });
+        return apiRequest(`${API_BASE}/dishes/${id}/`, { method: 'DELETE' });
     },
 
     // 分类相关
     async getCategories() {
-        const res = await fetch(`${API_BASE}/categories/`);
+        return apiRequest(`${API_BASE}/categories/`);
-        return res.json();
     },
 
     // 订单相关
     async getOrders(params = {}) {
         const query = new URLSearchParams(params).toString();
-        const res = await fetch(`${API_BASE}/orders/${query ? '?' + query : ''}`);
+        return apiRequest(`${API_BASE}/orders/${query ? '?' + query : ''}`);
-        return res.json();
     },
 
     async createOrder(data) {
-        const res = await fetch(`${API_BASE}/orders/`, {
+        return apiRequest(`${API_BASE}/orders/`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
-            body: JSON.stringify(data)
         });
-        return res.json();
     },
 
     async completeOrder(id) {
-        const res = await fetch(`${API_BASE}/orders/${id}/complete/`, { method: 'POST' });
+        return apiRequest(`${API_BASE}/orders/${id}/complete/`, { method: 'POST' });
-        return res.json();
     },
 
     async deleteOrder(id) {
-        await fetch(`${API_BASE}/orders/${id}/`, { method: 'DELETE' });
+        return apiRequest(`${API_BASE}/orders/${id}/`, { method: 'DELETE' });
     },
 
     // URL解析
     async parseUrl(url) {
-        const res = await fetch(`${API_BASE}/parse-url/`, {
+        return apiRequest(`${API_BASE}/parse-url/`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url }),
-            body: JSON.stringify({ url })
         });
-        return res.json();
     },
 
     // 图片上传
@@ -83,8 +96,19 @@ const API = {
         formData.append('image', file);
         const res = await fetch('/upload-image/', {
             method: 'POST',
-            body: formData
+            body: formData,
         });
+
+        if (!res.ok) {
+            let errorMsg = `上传失败 (${res.status})`;
+            try {
+                const data = await res.json();
+                if (data.error) errorMsg = data.error;
+            } catch {
+                // response not JSON
+            }
+            throw new Error(errorMsg);
+        }
         return res.json();
-    }
+    },
 };

templates/admin/login.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>登录 - 玉姐的菜单</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;800&family=ZCOOL+XiaoWei&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/bootstrap-icons.min.css">
+    <style>
+        :root {
+            --primary: #a85a32;
+            --primary-light: #c97a52;
+            --primary-dark: #7f4224;
+            --primary-soft: #f2dcc8;
+            --secondary: #6f8b63;
+            --secondary-light: #89a37d;
+            --secondary-soft: #e5efdf;
+            --accent: #d4a35f;
+            --accent-soft: #f5e6c8;
+            --bg-primary: #f6efe3;
+            --bg-secondary: #efe4d3;
+            --bg-card: #fffaf2;
+            --paper: #fffdf8;
+            --paper-strong: #fff7ec;
+            --wood: #d7b894;
+            --ink: #33251d;
+            --line: rgba(110, 76, 51, 0.14);
+            --line-strong: rgba(110, 76, 51, 0.24);
+            --shadow-sm: 0 6px 16px rgba(103, 72, 45, 0.08);
+            --shadow-md: 0 12px 28px rgba(103, 72, 45, 0.12);
+            --shadow-lg: 0 22px 44px rgba(103, 72, 45, 0.14);
+            --shadow-xl: 0 28px 56px rgba(103, 72, 45, 0.16);
+            --radius-sm: 12px;
+            --radius-md: 20px;
+            --radius-lg: 28px;
+            --radius-xl: 36px;
+            --font-display: 'ZCOOL XiaoWei', 'Noto Sans SC', serif;
+            --font-body: 'Nunito', 'Noto Sans SC', sans-serif;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: var(--font-body);
+            background: var(--bg-primary);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            background-image:
+                radial-gradient(ellipse at 20% 0%, rgba(168, 90, 50, 0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 100%, rgba(212, 163, 95, 0.1) 0%, transparent 50%);
+        }
+
+        /* === Header === */
+        .login-header {
+            width: 100%;
+            max-width: 480px;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--accent) 100%);
+            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+            padding: 48px 40px 56px;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .login-header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -15%;
+            width: 320px;
+            height: 320px;
+            background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 65%);
+            pointer-events: none;
+        }
+
+        .login-header::after {
+            content: '';
+            position: absolute;
+            bottom: -30%;
+            left: -10%;
+            width: 200px;
+            height: 200px;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 65%);
+            pointer-events: none;
+        }
+
+        .header-icon {
+            width: 72px;
+            height: 72px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            backdrop-filter: blur(8px);
+        }
+
+        .header-icon i {
+            font-size: 36px;
+            color: white;
+        }
+
+        .login-header h1 {
+            font-family: var(--font-display);
+            font-size: 32px;
+            color: white;
+            margin-bottom: 8px;
+            letter-spacing: 2px;
+        }
+
+        .login-header p {
+            color: rgba(255,255,255,0.85);
+            font-size: 14px;
+            font-weight: 400;
+        }
+
+        /* === Card === */
+        .login-card {
+            width: 100%;
+            max-width: 480px;
+            background: var(--bg-card);
+            border-radius: 0 0 var(--radius-xl) var(--radius-xl);
+            padding: 40px 40px 48px;
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--line);
+            border-top: none;
+        }
+
+        .form-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--ink);
+            margin-bottom: 28px;
+            text-align: center;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--ink);
+            letter-spacing: 0.5px;
+        }
+
+        .input-wrapper {
+            position: relative;
+        }
+
+        .input-wrapper i {
+            position: absolute;
+            left: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--wood);
+            font-size: 18px;
+            pointer-events: none;
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 14px 16px 14px 48px;
+            border: 2px solid var(--line);
+            border-radius: var(--radius-sm);
+            font-size: 15px;
+            font-family: var(--font-body);
+            color: var(--ink);
+            background: var(--paper);
+            transition: all 0.2s ease;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary);
+            background: white;
+            box-shadow: 0 0 0 4px rgba(168, 90, 50, 0.08);
+        }
+
+        .form-control::placeholder {
+            color: var(--wood);
+            opacity: 0.7;
+        }
+
+        .submit-btn {
+            width: 100%;
+            padding: 16px;
+            margin-top: 8px;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+            border: none;
+            border-radius: var(--radius-sm);
+            color: white;
+            font-size: 16px;
+            font-weight: 700;
+            font-family: var(--font-body);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 14px rgba(168, 90, 50, 0.3);
+            letter-spacing: 1px;
+        }
+
+        .submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(168, 90, 50, 0.4);
+        }
+
+        .submit-btn:active {
+            transform: translateY(0);
+        }
+
+        .error-msg {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            color: #dc2626;
+            padding: 12px 16px;
+            border-radius: var(--radius-sm);
+            margin-bottom: 20px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .error-msg i {
+            font-size: 16px;
+        }
+
+        /* === Footer === */
+        .login-footer {
+            width: 100%;
+            max-width: 480px;
+            text-align: center;
+            padding: 20px 40px;
+            margin-top: 16px;
+        }
+
+        .login-footer span {
+            color: var(--wood);
+            font-size: 12px;
+            opacity: 0.7;
+        }
+
+        /* === Responsive === */
+        @media (max-width: 520px) {
+            .login-header { padding: 36px 28px 44px; }
+            .login-header h1 { font-size: 26px; }
+            .login-card { padding: 32px 28px 36px; }
+        }
+    </style>
+</head>
+<body>
+    <header class="login-header">
+        <div class="header-icon">
+            <i class="bi bi-book"></i>
+        </div>
+        <h1>玉姐的菜单</h1>
+        <p>家庭菜谱 · 备菜清单</p>
+    </header>
+
+    <div class="login-card">
+        <p class="form-title">请登录以继续</p>
+
+        {% if form.errors %}
+        <div class="error-msg">
+            <i class="bi bi-exclamation-circle-fill"></i>
+            用户名或密码错误，请重试
+        </div>
+        {% endif %}
+
+        <form method="post">
+            {% csrf_token %}
+
+            <div class="form-group">
+                <label for="id_username">用户名</label>
+                <div class="input-wrapper">
+                    <i class="bi bi-person"></i>
+                    <input type="text" name="username" class="form-control" id="id_username" placeholder="请输入用户名" required autofocus>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="id_password">密码</label>
+                <div class="input-wrapper">
+                    <i class="bi bi-lock"></i>
+                    <input type="password" name="password" class="form-control" id="id_password" placeholder="请输入密码" required>
+                </div>
+            </div>
+
+            <button type="submit" class="submit-btn">登 录</button>
+        </form>
+    </div>
+
+    <div class="login-footer">
+        <span>Zhangmenu 管理后台</span>
+    </div>
+</body>
+</html>

zhangmenu/settings.py

@@ -43,11 +43,14 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'rest_framework',
+    'corsheaders',
     'menu',
 ]
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
@@ -78,13 +81,27 @@ WSGI_APPLICATION = 'zhangmenu.wsgi.application'
 
 # Database
 # https://docs.djangoproject.com/en/5.2/ref/settings/#databases
-
+# Supports DATABASE_URL env var (e.g., postgres://user:pass@host:5432/db)
-DATABASES = {
+# Falls back to SQLite for development
-    'default': {
+_db_url = os.getenv('DATABASE_URL', '')
-        'ENGINE': 'django.db.backends.sqlite3',
+if _db_url:
-        'NAME': BASE_DIR / 'db.sqlite3',
+    try:
+        import dj_database_url
+        DATABASES = {'default': dj_database_url.parse(_db_url)}
+    except ImportError:
+        DATABASES = {
+            'default': {
+                'ENGINE': 'django.db.backends.sqlite3',
+                'NAME': BASE_DIR / 'db.sqlite3',
+            }
+        }
+else:
+    DATABASES = {
+        'default': {
+            'ENGINE': 'django.db.backends.sqlite3',
+            'NAME': BASE_DIR / 'db.sqlite3',
+        }
     }
-}
 
 
 # Password validation
@@ -153,3 +170,62 @@ ALLOWED_RECIPE_HOSTS = {
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+# Auth settings
+LOGIN_URL = '/accounts/login/'
+LOGIN_REDIRECT_URL = '/'
+LOGOUT_REDIRECT_URL = '/accounts/login/'
+
+# Django REST Framework
+REST_FRAMEWORK = {
+    'DEFAULT_AUTHENTICATION_CLASSES': [
+        'rest_framework.authentication.SessionAuthentication',
+    ],
+    'DEFAULT_PERMISSION_CLASSES': [
+        'rest_framework.permissions.IsAuthenticated',
+    ],
+    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
+    'PAGE_SIZE': 20,
+    'DEFAULT_THROTTLE_CLASSES': [
+        'rest_framework.throttling.AnonRateThrottle',
+        'rest_framework.throttling.ScopedRateThrottle',
+    ],
+    'DEFAULT_THROTTLE_RATES': {
+        'anon': '100/minute',
+        'parse-url': '10/minute',
+    },
+}
+
+# CORS settings (support env var override)
+_cors_env = os.getenv('CORS_ALLOWED_ORIGINS', '')
+if _cors_env:
+    CORS_ALLOWED_ORIGINS = [h.strip() for h in _cors_env.split(',') if h.strip()]
+else:
+    CORS_ALLOWED_ORIGINS = [
+        'http://localhost:8080',
+        'http://127.0.0.1:8080',
+        'http://localhost:9300',
+        'http://127.0.0.1:9300',
+        'http://121.41.188.238',
+    ]
+CORS_ALLOW_CREDENTIALS = True
+
+# Production cache settings (when DEBUG=False)
+if not DEBUG:
+    # Try Redis first if REDIS_URL is set, fallback to LocMemCache
+    _redis_url = os.getenv('REDIS_URL', '')
+    if _redis_url:
+        CACHES = {
+            'default': {
+                'BACKEND': 'django.core.cache.backends.redis.RedisCache',
+                'LOCATION': _redis_url,
+            }
+        }
+    else:
+        CACHES = {
+            'default': {
+                'BACKEND': 'django.core.cache.backends.locmem.LocMemCache',
+            }
+        }
+    # Whitenoise compression (gzip + brotli, serves pre-compressed static files)
+    STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

zhangmenu/urls.py

@@ -15,12 +15,23 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
+from django.contrib.auth import views as auth_views
 from django.urls import path, include
 from django.conf import settings
 from django.conf.urls.static import static
+from django.http import HttpResponseRedirect
+
+
+def logout_view(request):
+    from django.contrib.auth import logout
+    logout(request)
+    return HttpResponseRedirect('/accounts/login/')
+
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('accounts/login/', auth_views.LoginView.as_view(template_name='admin/login.html', redirect_authenticated_user=True), name='login'),
+    path('accounts/logout/', logout_view, name='logout'),
     path('', include('menu.urls')),
 ]