Django+Vue外卖系统毕业设计实战：可部署闭环源码

简介这是一套面向计算机专业本科生的毕业设计与课程设计实战项目基于PythonDjangoVue.js全栈技术实现的外卖点餐系统适用于Web开发入门到进阶学习者帮助掌握B/S架构下前后端分离项目的完整开发、部署与管理流程。资源包共422个文件涵盖32个Python后端核心模块含Django视图、模型与API逻辑、43个Vue组件页面如首页、订单中心、用户中心等、49个TypeScript类型定义及配套SVG图标、JPG/JPEG菜品素材、LESS样式文件和系统配置文档结构清晰分为server后端与web前端两大目录总大小23.81MB。已有609人学习下载资源提供开箱即用的完整源码、模块化功能划分含后台总览、菜品/订单/用户/日志等10大管理模块以及典型Web项目工程实践范式便于理解真实业务场景中的权限控制、RESTful接口设计与前后端联调要点。1. 毕业设计真能跑通的外卖点餐系统Django后端Vue前端完整Python源码不是Demo是可部署闭环你是不是也见过太多“毕业设计外卖系统”——首页能渲染、登录能跳转、商品列表有假数据但一加购物车就404一提交订单就报AttributeError: NoneType object has no attribute user数据库迁移脚本缺两张表Vue路由守卫写成死循环连管理员后台都打不开这不是教学演示这是真实交付场景下的最小可行系统它用 Django 4.2 做 RESTful API含 JWT 认证、订单状态机、Redis 缓存菜品热度、Vue 3 Pinia 管理全局状态含购物车持久化到 localStorage、地址选择联动省市区三级、Nginx Gunicorn 部署方案已验证通过。它不教你怎么配环境而是直接给你能git clone pip install -r requirements.txt npm install npm run serve启动的代码包它不讲抽象的 MVC而是把「用户下单→骑手接单→商家出餐→状态实时推送」这条主链路的每一步逻辑都落在.py和.vue文件里。适合计算机/软件工程专业大三下至大四上学生做课程设计、毕设开题、答辩原型尤其适合想避开“纯静态页面Flask假接口”陷阱、真正理解前后端分离落地细节的同学。2. 项目结构与技术选型为什么是 Django Vue 而不是 Flask React这个外卖系统不是为炫技堆栈而是针对毕业设计场景做了三重取舍开发效率、答辩展示性、部署可行性。我们拆开requirements.txt和package.json看真实依赖再解释每个技术点的不可替代性。2.1 后端为什么选 Django 而非 FlaskDjango 在毕业设计中胜在“开箱即用的生产级能力”而 Flask 更像乐高积木——搭得快但容易散架。本项目后端核心模块包括用户体系Django 自带AbstractUser扩展出Customer、Restaurant、Rider三类角色权限控制直接复用django.contrib.auth不用手写 JWT 中间件订单状态机用django-fsm实现created → confirmed → preparing → delivered → completed六态流转状态变更自动记录日志答辩时可演示「商家点击出餐→前端订单卡片实时变色」地理围栏与配送费计算django.contrib.gis集成 PostGIS支持Point字段存储商家/用户坐标distance_lte查询 3km 内可接单骑手避免用geopy算 Haversine 公式翻车文件上传与 CDN 对接django-storages预留阿里云 OSS 配置入口本地开发用FileSystemStorage答辩演示时一键切到 OSS图片不丢。提示requirements.txt中关键依赖版本锁定为Django4.2.11LTS 版本文档全、BUG 少、djangorestframework3.14.0兼容性好、django-fsm2.8.1状态机稳定。别盲目升级到 Django 5.x——它的AsyncMiddleware会和本项目同步 Redis 订阅逻辑冲突。2.2 前端为什么选 Vue 3 Composition API 而非 Vue 2Vue 3 的响应式原理Proxy和script setup语法让毕业设计代码更易读、更少出错。本项目前端结构清晰分层src/ ├── api/ # 所有 axios 请求封装按模块拆user.js, order.js, restaurant.js ├── assets/ # 静态资源含 iconfont 和 mock 数据答辩无网络时可切 mock ├── components/ # 可复用组件AddressSelector.vue省市区三级联动、CartBadge.vue购物车角标 ├── composables/ # 组合式函数useCart.js购物车增删改查localStorage 持久化 ├── router/ # 路由守卫严格未登录访问 /order 跳 login骑手角色访问 /admin 拒绝 ├── stores/ # Pinia 状态管理cartStore购物车、userStore用户信息token └── views/ # 页面级组件HomeView.vue首页轮播分类、OrderConfirmView.vue地址支付方式选择关键点在于所有 API 请求都经过api/index.js统一拦截401 错误自动清空 token 并跳转登录页避免学生常犯的「登录后刷新页面 token 丢失」问题useCart.js用watch监听购物车变化并自动存入localStorage关掉浏览器再打开购物车还在——答辩老师点开就看到真实体验。2.3 数据库选型PostgreSQL 而非 SQLite 的硬理由虽然 SQLite 开发方便但本项目强制使用 PostgreSQL原因直击毕业设计痛点并发安全SQLite 在多用户同时下单时易出现database is locked而 PostgreSQL 的行级锁保证高并发下订单号唯一用SERIAL主键 SELECT FOR UPDATE锁库存JSONB 字段存扩展属性菜品规格如“辣度微辣/中辣/特辣”、“备注不要香菜”存为 JSONB查询高效且无需额外表全文检索支持django.contrib.postgres.search实现菜品名模糊搜索输入“酸菜”秒出“酸菜鱼”“酸汤肥牛”比icontains快 10 倍。注意docker-compose.yml已预置 PostgreSQL 15 容器settings.py中DATABASES配置为DATABASES { default: { ENGINE: django.db.backends.postgresql, NAME: food_delivery, USER: postgres, PASSWORD: postgres, HOST: db, # docker network 别名 PORT: 5432, } }本地没 Docker直接装 PostgreSQL 15修改HOST为localhost即可无需改任何业务代码。3. 核心功能实现从用户注册到订单完成的 7 个关键代码段本章不列伪代码只贴真实可运行的代码片段并说明「为什么这么写」「参数怎么调」「改错在哪」。所有代码均来自项目源码包backend/和frontend/src/目录。3.1 用户注册Django REST Framework 的序列化器校验逻辑backend/api/serializers.py中CustomerRegisterSerializer不只是字段映射而是嵌入业务规则# backend/api/serializers.py from rest_framework import serializers from django.contrib.auth.password_validation import validate_password from .models import Customer class CustomerRegisterSerializer(serializers.ModelSerializer): password serializers.CharField( write_onlyTrue, requiredTrue, validators[validate_password], # 调用 Django 内置密码强度校验 help_text至少8位含大小写字母数字 ) password2 serializers.CharField(write_onlyTrue, requiredTrue) class Meta: model Customer fields (phone, name, password, password2, address) def validate(self, attrs): if attrs[password] ! attrs[password2]: raise serializers.ValidationError(两次输入的密码不一致) # 手机号唯一性校验防止注册时绕过前端限制 if Customer.objects.filter(phoneattrs[phone]).exists(): raise serializers.ValidationError(该手机号已被注册) return attrs def create(self, validated_data): # 关键用 create_user 创建自动哈希密码 user Customer.objects.create_user( phonevalidated_data[phone], namevalidated_data[name], passwordvalidated_data[password], addressvalidated_data.get(address, ) ) return user逻辑说明write_onlyTrue确保password和password2不返回给前端避免敏感信息泄露validators[validate_password]复用 Django 密码策略默认要求 8 位大小写数字比手写正则更可靠validate()方法中二次校验手机号因为前端 JS 校验可被绕过后端必须兜底create_user()是 Django 用户模型的约定方法它会自动调用make_password()加密若直接Customer.objects.create()会导致明文密码入库。3.2 购物车添加Vue 3 Pinia 的响应式状态管理frontend/src/stores/cartStore.js实现购物车增删改查重点解决「同一商品多次添加应合并数量」和「规格不同视为不同商品」// frontend/src/stores/cartStore.js import { defineStore } from pinia import { ref, computed } from vue export const useCartStore defineStore(cart, () { const items ref(JSON.parse(localStorage.getItem(cart) || [])) // 计算属性购物车总金额 const totalAmount computed(() { return items.value.reduce((sum, item) sum item.price * item.quantity, 0) }) // 添加商品key 为 id:spec_hash避免规格混淆 const addItem (product, spec {}) { const specHash btoa(JSON.stringify(spec)) // 简单哈希规格对象 const key ${product.id}:${specHash} const existing items.value.find(item item.key key) if (existing) { existing.quantity 1 } else { items.value.push({ key, id: product.id, name: product.name, price: product.price, quantity: 1, spec, // 存储规格对象如 {spicy: 中辣, note: 不要香菜} image: product.image }) } saveToLocalStorage() } const saveToLocalStorage () { localStorage.setItem(cart, JSON.stringify(items.value)) } return { items, totalAmount, addItem, // ...其他方法removeItem, clearCart } })参数说明specHash用btoa()对规格 JSON 字符串编码生成短哈希值作为 key确保「酸菜鱼微辣」和「酸菜鱼特辣」被视为两个独立商品saveToLocalStorage()在每次变更后立即持久化避免刷新页面丢失totalAmount用computed而非ref自动响应items变化无需手动更新。3.3 订单创建Django 事务与库存扣减的原子性保障backend/api/views.py中OrderCreateView使用transaction.atomic确保「扣库存建订单发通知」三步要么全成功要么全回滚# backend/api/views.py from django.db import transaction from django.db.models import F from rest_framework import status from rest_framework.response import Response from rest_framework.views import APIView from .models import Product, Order, OrderItem from .serializers import OrderCreateSerializer class OrderCreateView(APIView): def post(self, request): serializer OrderCreateSerializer(datarequest.data) serializer.is_valid(raise_exceptionTrue) with transaction.atomic(): # 关键开启数据库事务 # 1. 扣减库存用 F() 表达式避免竞态条件 for item in serializer.validated_data[items]: product Product.objects.select_for_update().get(iditem[product_id]) if product.stock item[quantity]: raise serializers.ValidationError(f商品 {product.name} 库存不足) product.stock F(stock) - item[quantity] product.save() # 2. 创建订单主表 order Order.objects.create( customerrequest.user.customer, addressserializer.validated_data[address], total_amountserializer.validated_data[total_amount], statuscreated ) # 3. 创建订单子表 for item in serializer.validated_data[items]: OrderItem.objects.create( orderorder, product_iditem[product_id], quantityitem[quantity], priceitem[price] ) return Response({order_id: order.id}, statusstatus.HTTP_201_CREATED)避坑点select_for_update()锁住商品行防止并发下单时超卖F(stock) - item[quantity]是数据库层面的原子减法比product.stock - x再save()更安全后者需先查再改中间可能被其他请求修改transaction.atomic()包裹全部操作一旦库存不足抛异常事务自动回滚不会留下半截订单。3.4 实时订单状态推送Django Channels Vue EventSource本项目用 Server-Sent EventsSSE实现轻量级实时推送比 WebSocket 更简单、更易通过学校防火墙# backend/api/consumers.py from channels.generic.http import AsyncHttpConsumer import json class OrderStatusConsumer(AsyncHttpConsumer): async def handle(self, body): # 获取当前用户 ID从 session 或 token 解析 user_id self.scope[user].id if self.scope[user].is_authenticated else None if not user_id: await self.send_response(401, bUnauthorized) return # 设置 SSE 头 await self.send_response( 200, b, headers[ (bContent-Type, btext/event-stream), (bCache-Control, bno-cache), (bConnection, bkeep-alive), ] ) # 持续发送状态更新实际项目中应监听 Redis Pub/Sub while True: # 模拟每 5 秒查一次该用户最新订单状态 latest_order await sync_to_async( lambda: Order.objects.filter( customer_iduser_id ).order_by(-created_at).first() )() if latest_order: data { order_id: latest_order.id, status: latest_order.status, updated_at: latest_order.updated_at.isoformat() } await self.send_body( fdata: {json.dumps(data)}\n\n.encode(utf-8) ) await asyncio.sleep(5)!-- frontend/src/views/OrderStatusView.vue -- script setup import { onMounted, onUnmounted } from vue let eventSource null onMounted(() { // 建立 SSE 连接 eventSource new EventSource(/api/order-status/) eventSource.onmessage (event) { const data JSON.parse(event.data) // 更新 Vuex/Pinia 中的订单状态 console.log(收到状态更新:, data) } eventSource.onerror (err) { console.error(SSE 连接错误, err) } }) onUnmounted(() { if (eventSource) eventSource.close() }) /script为什么选 SSE 而非 WebSocketSSE 单向服务端→客户端实现简单Django Channels 配置少基于 HTTP无需额外端口学校内网或答辩现场路由器通常放行自动重连断网恢复后自动续传比手写 WebSocket 心跳更鲁棒。4. 部署与调试从本地启动到 Nginx 反向代理的完整链路毕业设计答辩前最怕「本地能跑答辩机上崩」。本节给出可复制的部署步骤覆盖 Windows/macOS/Linux 三平台所有命令均经实测。4.1 本地开发环境一键启动Windows/macOS/Linux 通用项目已提供start-dev.shmacOS/Linux和start-dev.batWindows核心逻辑一致# start-dev.sh #!/bin/bash # 步骤1启动 PostgreSQLDocker docker-compose up -d db # 步骤2安装 Python 依赖建议用虚拟环境 python -m venv venv source venv/bin/activate # Windows: venv\Scripts\activate pip install -r backend/requirements.txt # 步骤3执行数据库迁移 cd backend python manage.py migrate python manage.py createsuperuser # 创建管理员账号 cd .. # 步骤4启动 Django 开发服务器 cd backend python manage.py runserver 0.0.0.0:8000 cd .. # 步骤5安装并启动 Vue 前端 cd frontend npm install npm run serve # 默认 http://localhost:8080关键参数说明python manage.py runserver 0.0.0.0:8000中的0.0.0.0允许局域网内其他设备如答辩老师的笔记本访问8000端口可改但需同步修改frontend/vue.config.js中devServer.proxynpm run serve启动 Vue 开发服务器其proxy配置已预设为将/api请求转发到http://localhost:8000避免跨域若docker-compose报错直接跳过 Docker手动安装 PostgreSQL 15修改backend/settings.py中HOST为localhost。4.2 生产环境部署Gunicorn Nginx Supervisor答辩演示需稳定运行 20 分钟以上不能依赖runserver。本项目提供gunicorn.conf.py和nginx.conf# backend/gunicorn.conf.py import multiprocessing bind 127.0.0.1:8001 # Gunicorn 监听端口 bind_address 127.0.0.1:8001 workers multiprocessing.cpu_count() * 2 1 worker_class sync worker_connections 1000 timeout 30 keepalive 2 max_requests 1000 max_requests_jitter 100 # 日志 accesslog /var/log/gunicorn/access.log errorlog /var/log/gunicorn/error.log loglevel info# /etc/nginx/sites-available/food-delivery upstream django_app { server 127.0.0.1:8001; # 指向 Gunicorn } server { listen 80; server_name your-domain.com; # 或 IP 地址 location /static/ { alias /path/to/backend/staticfiles/; # collectstatic 后的路径 } location /media/ { alias /path/to/backend/media/; } location / { proxy_pass http://django_app; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }部署步骤python manage.py collectstatic --noinput收集静态文件到STATIC_ROOTgunicorn --config gunicorn.conf.py backend.wsgi:application启动 Gunicornsudo nginx -t sudo systemctl reload nginx加载 Nginx 配置用supervisor管理进程防崩溃supervisord -c /etc/supervisor/conf.d/food-delivery.conf。提示若答辩现场无域名server_name直接写服务器 IPNginx 仍可正常反向代理。4.3 常见问题排查5 条血泪经验总结毕业设计部署阶段最容易卡在这几个点每条都是真实翻车记录现象 1Vue 页面空白控制台报Failed to fetchNetwork 显示502 Bad Gateway原因Nginx 配置中upstream django_app的地址与 Gunicorn 实际监听地址不一致或 Gunicorn 未启动。解决执行ps aux | grep gunicorn确认进程存在检查gunicorn.conf.py中bind地址是否为127.0.0.1:8001Nginxupstream是否匹配重启 Gunicornpkill gunicorn gunicorn --config gunicorn.conf.py backend.wsgi:application。现象 2登录成功后点击「我的订单」跳转 403 Forbidden原因Django 的CSRF_COOKIE_SECURE设为True但 Nginx 未传递X-Forwarded-Proto头导致 CSRF Token 验证失败。解决在 Nginxlocation /块中添加proxy_set_header X-Forwarded-Proto $scheme;并在settings.py中设置SECURE_PROXY_SSL_HEADER (HTTP_X_FORWARDED_PROTO, https)若用 HTTPS或注释掉CSRF_COOKIE_SECURE。现象 3管理员后台无法上传图片报错OSError: [Errno 13] Permission denied原因MEDIA_ROOT目录如/var/www/media/的 Linux 权限未开放给www-data用户Nginx 运行用户。解决sudo chown -R www-data:www-data /var/www/media/ sudo chmod -R 755 /var/www/media/。现象 4Docker 启动 PostgreSQL 失败日志显示initdb: could not find suitable text encoding for locale en_US.utf8原因宿主机未安装locales或 Docker 镜像 locale 不匹配。解决Ubuntu 执行sudo apt-get install locales sudo locale-gen en_US.UTF-8或修改docker-compose.yml为db服务添加环境变量environment: - POSTGRES_INITDB_ARGS--encodingUTF-8 --localeC。现象 5Vue 打包后npm run build生成的dist目录放入 DjangoSTATIC_ROOT但页面 CSS/JS 404原因Vue 的public/index.html中href/static/css/app.xxx.css路径与 DjangoSTATIC_URL /static/不匹配或 Nginx 未正确配置location /static/。解决在vue.config.js中设置publicPath: /static/确认 Nginxlocation /static/的alias指向STATIC_ROOT的绝对路径末尾带/。5. 答辩技巧与代码优化让老师眼前一亮的 3 个细节答辩不是代码朗诵而是展示你对系统的掌控力。以下三个细节我带过 12 届毕设90% 的学生忽略但老师一问就露馅——而你提前准备就能把「这学生真懂」刻进老师脑子里。5.1 订单号生成用时间戳随机数替代自增 ID体现工程思维答辩时老师常问“订单号怎么生成会不会重复” 如果答“用数据库自增 ID”立刻暴露没考虑分布式或高并发。本项目用utils/order_utils.py实现可读、唯一、有序的订单号# backend/utils/order_utils.py import time import random from django.conf import settings def generate_order_no(): 生成订单号时间戳(10位)商户ID(3位)随机数(4位) 示例17123456780011234 - 1712345678 int(time.time())保证时间有序 - 001 商户IDRestaurant.id % 1000三位补零 - 1234 random.randint(1000, 9999)避免纯时间戳可预测 timestamp str(int(time.time()))[-10:] # 取最后10位避免过长 # 获取当前用户所属商户ID假设用户是顾客从订单地址反查最近商家 # 实际项目中此处应传入 restaurant_id 参数 restaurant_id 1 # 示例 shop_code str(restaurant_id % 1000).zfill(3) rand_num str(random.randint(1000, 9999)) return f{timestamp}{shop_code}{rand_num}答辩话术“老师订单号我用了时间戳商户编码随机数的组合。时间戳保证全局有序方便按时间查单商户编码让同一商家的单号有聚簇性数据库索引更高效随机数杜绝了时间精度内重复的可能。而且它可读——看到1712345678就知道是 2024 年 4 月某天下的单比 UUID 友好得多。”5.2 数据库查询优化用select_related和prefetch_related避免 N1 查询老师如果看代码大概率会点开OrderListView问“查 20 个订单要发多少 SQL” 如果答“20 个”就输了。本项目在backend/api/views.py中精准使用关联查询# backend/api/views.py from rest_framework.generics import ListAPIView from .models import Order from .serializers import OrderListSerializer class OrderListView(ListAPIView): serializer_class OrderListSerializer def get_queryset(self): # 关键用 select_related 查外键customer, restaurant用 prefetch_related 查多对多items return Order.objects.select_related( customer, restaurant, rider # 骑手是外键 ).prefetch_related( items__product # OrderItem 关联 Product减少嵌套查询 ).filter( customerself.request.user.customer ).order_by(-created_at)验证方法在settings.py中开启 SQL 日志LOGGING { version: 1, handlers: {console: {class: logging.StreamHandler}}, loggers: {django.db.backends: {handlers: [console], level: DEBUG}}, }启动服务器访问/api/orders/终端会打印所有 SQL。优化前是1 20*3 61条1 条查订单每订单查 customer/restaurant/rider 各 1 条优化后稳定在3条。5.3 前端性能监控用 Vue Devtools Performance Tab 定位卡顿答辩演示时如果页面切换慢、列表滚动卡老师会觉得“这系统很糙”。本项目在main.js中注入性能监控// frontend/src/main.js if (process.env.NODE_ENV production) { // 生产环境关闭 Vue Devtools window.__VUE_DEVTOOLS_GLOBAL_HOOK__ undefined } else { // 开发环境启用但限制采样率避免影响性能 const perf performance const observer new PerformanceObserver((list) { for (const entry of list.getEntries()) { if (entry.duration 100) { // 耗时超 100ms 的长任务 console.warn(Long task detected:, entry) } } }) observer.observe({entryTypes: [longtask]}) }答辩演示技巧打开 Chrome Devtools → Performance Tab → 点击录制 → 在页面上快速切换「首页→分类→购物车→订单」→ 停止录制 → 查看火焰图。告诉老师“您看所有交互都在 16ms 内完成60fps最长任务仅 8ms这是因为购物车用 Pinia computed 实现了精准响应式没有无效渲染。”从那以后我每次重构组件都强制走一遍 Performance 录制哪怕只是改一行 CSS。因为答辩现场的 1 秒卡顿比代码里 100 行 BUG 更致命——它直接摧毁老师对你工程能力的第一印象。希望帮到你。本文还有配套的精品资源点击获取