家教平台这类一体化管理系统我前后接过好几个学生端、教师端、管理后台、课程预约、视频回放、账单导出……需求听着不复杂真做起来全是细节。尤其是技术栈选型和环境搭建不少人在第一步就卡住了Django和Vue到底怎么配合mysqlclient装不上怎么办打包完布局乱了又是怎么回事这篇文章就围绕DjangoVue搭建家教一体化教育平台这条线把业务拆解、后端设计、前端工程化、前后端联调、部署打包的完整链路捋一遍。适合正在做课程设计、毕业设计或者刚接手类似全栈项目的开发者参考里面大部分坑我都实际踩过能帮你少走不少弯路。1. 家教一体化平台的业务拆解与选型逻辑1.1 家教平台到底需要哪些模块先别急着写代码。家教平台不是简单的教师列表预约按钮真正落地时需要梳理的角色和模块比想象中多。做项目前我习惯先画一张业务地图把角色、功能、数据流列清楚后面建模才不会乱。家教平台的核心角色至少有四类家长/学生端注册登录、浏览教师、按科目/年级筛选、查看教师详情与评价、预约试听课、在线支付、观看课程回放、下载学习资料。教师端创建个人主页简介、教龄、擅长科目、维护可授课时间段、管理学生预约、上传课程视频与讲义、查看课时收入。管理员审核教师入驻、管理用户、处理投诉、统计分析收入、活跃度、发布系统公告。系统支撑功能教室/授课地点管理、课程表排课、消息通知、账单与订单管理。这些模块对应的技术需求就浮出来了需要用户认证与权限控制教师、学生、管理员三种角色、课程与订单管理系统、视频文件上传与播放、Excel导出、地图展示授课地点、实时消息通知。这一套业务地图列全了你才能确定数据模型和接口设计。1.2 为什么是Django和Vue这对组合选型这件事没有绝对的对错但为什么用你心里要有数。我选Django做后端核心原因是它自带的东西足够多自带Admin管理后台教师审核、订单查看、内容管理这些内部功能不需要从零写页面Django Admin配置一下就能用开发效率极高。ORM非常成熟教师、课程、订单、评价之间的关联关系用Django ORM表达和查询都非常自然配合迁移工具可以随时调整表结构。自带认证体系User模型、权限组Group、会话管理都是现成的扩展一个教师Profile、学生Profile就是加一张关联表的事。生态适合做内容型平台Django处理文件上传、图片缩放、分页查询都很顺手。前端选Vue是看中它的工程化体验和上手曲线。Vue的单文件组件SFC让页面、样式、脚本聚在一起组件之间传参通信直观配合Vue Router和Pinia或Vuex就能撑起一个SPA。和React相比Vue的模板语法更接近HTML思维对后端出身、不常写前端的开发者更友好。我见过有人用Django模板直接渲染前端页面项目初期确实快但做到预约日历、实时消息提醒、视频播放器交互时模板语法非常别扭。前后端分离之后前端只调接口后端只管数据开发和部署都能解耦。1.3 整体架构落地方案架构上我用的是最常用的前后端分离模式Vue SPA前端端口8080 ↓ HTTP JSON Django REST Framework后端API端口8000 ↓ MySQL主数据库 Redis缓存/会话/队列后端在Django基础上加djangorestframework和djangorestframework-simplejwt提供RESTful APIJWT做认证用django-cors-headers解决跨域。前端用Vue3 Vue Router Pinia AxiosUI库用Element Plus打包后丢给Nginx托管静态文件API请求反向代理到后端。这套架构的好处是边界清晰模板渲染、数据校验、权限控制全在后端交互体验、路由跳转、状态管理全在前端。后面接部署时前端不用改代码后端也不涉及模板页面各自独立迭代。2. Django端数据模型设计与Admin后台实操2.1 用户角色与核心模型的字段设计Django自带的User模型可以直接用但家教平台需要扩展角色信息。我的习惯是建两个Profile模型用OneToOneField关联到User而不是直接修改User表。from django.db import models from django.contrib.auth.models import User class TeacherProfile(models.Model): user models.OneToOneField(User, on_deletemodels.CASCADE, related_nameteacher_profile) title models.CharField(头衔, max_length50, blankTrue) intro models.TextField(个人简介, blankTrue) subjects models.CharField(擅长科目, max_length100) hourly_rate models.DecimalField(每小时费用, max_digits8, decimal_places2, default0) verified models.BooleanField(审核通过, defaultFalse) created_at models.DateTimeField(auto_now_addTrue) class StudentProfile(models.Model): user models.OneToOneField(User, on_deletemodels.CASCADE, related_namestudent_profile) grade models.CharField(年级, max_length20, blankTrue) points models.IntegerField(积分, default0) class Course(models.Model): teacher models.ForeignKey(TeacherProfile, on_deletemodels.CASCADE, related_namecourses) name models.CharField(课程名称, max_length100) cover models.ImageField(封面图, upload_tocourse_covers/, blankTrue) description models.TextField(课程描述) start_time models.DateTimeField(开课时间) end_time models.DateTimeField(结束时间) price models.DecimalField(价格, max_digits8, decimal_places2) max_students models.IntegerField(最大人数, default20) class Order(models.Model): order_no models.CharField(订单号, max_length32, uniqueTrue) student models.ForeignKey(StudentProfile, on_deletemodels.CASCADE, related_nameorders) course models.ForeignKey(Course, on_deletemodels.CASCADE, related_nameorders) amount models.DecimalField(订单金额, max_digits8, decimal_places2) status models.CharField(状态, max_length20, choices[ (pending, 待支付), (paid, 已支付), (refunded, 已退款) ], defaultpending) created_at models.DateTimeField(auto_now_addTrue)几个设计上的注意点用OneToOneField扩展User而不是继承AbstractUserDjango的User模型在项目启动后就不建议改扩展Profile可以避免后期迁移地狱而且不影响第三方包对User的引用。订单号手动生成时间戳随机数组合即可不要用自增id暴露订单量。金额用DecimalFieldFloatField会有精度问题涉及钱的字段一律用DecimalField。课程时间用DateTimeField做排课冲突检测时直接比较时间范围比存字符串方便一万倍。除了上面这些还要考虑预约表Appointment、评价表Review、课程回放表LessonVideo、教室表Classroom、课表Schedule。尤其是教室管理很多家教平台会涉及线下授课Classroom模型里要有地址、经纬度字段后面才能在Vue端接地图展示。2.2 连接MySQL时的mysqlclient安装问题Django默认用SQLite但家教平台这种多用户系统生产环境至少要换MySQL。一换MySQL很多人的第一个坑就是mysqlclient装不上。在Windows上直接pip install mysqlclient经常会报错提示缺少Microsoft C Build Tools。这是因为mysqlclient需要编译C扩展Windows上没有完整的编译环境。我的处理办法有两种去https://pypi.org/project/mysqlclient/#files下载对应Python版本的预编译wheel包本地安装省去编译依赖的麻烦。改用pymysql兜底import pymysql pymysql.install_as_MySQLdb()在Django项目的__init__.py里加上这两行然后DATABASES配置保持不变即可。pymysql是纯Python实现性能不如mysqlclient但开发调试完全够用。在Linux服务器上安装则要先把系统依赖装好sudo apt install python3-dev default-libmysqlclient-dev build-essential pip install mysqlclient数据库配置时注意编码和连接参数DATABASES { default: { ENGINE: django.db.backends.mysql, NAME: tutor_platform, USER: your_user, PASSWORD: your_password, HOST: 127.0.0.1, PORT: 3306, OPTIONS: { charset: utf8mb4, } } }utf8mb4一定不能省不然用户昵称里存个emoji就直接写入报错。新手项目跑不起来十有八九就是卡在这个字符集和mysqlclient上。2.3 Admin后台美化的两种路线Django自带Admin功能是全的但默认样式非常朴素而且对中文字段排序、筛选器支持都不够美观。我美化Admin后台时试过两条路线。路线一用第三方主题推荐django-simpleuipip install django-simpleui安装后在INSTALLED_APPS里把simpleui放到django.contrib.admin前面登录后台后主题就生效了。simpleui自带侧边栏菜单、面包屑导航、响应式布局还支持一键隐藏Django默认的最近操作面板整体观感接近一个现代化的管理后台。路线二完全自定义Admin页面如果后续需要高度定制比如嵌入数据统计图表可以在simpleui基础上开发自定义模板页面覆盖admin/base_site.html按自己的需求布局。不过对大多数家教平台来说路线一的性价比最高先跑通业务再考虑定制仪表盘。Admin里还有一个实用配置是list_display和list_filter。比如课程管理后台把审核状态、科目、开课时间放进来管理员筛选操作效率会高很多class CourseAdmin(admin.ModelAdmin): list_display (name, teacher, price, start_time, status) list_filter (start_time, teacher) search_fields (name, teacher__user__username)3. Vue端工程化与路由体系搭建3.1 从零搭建Vue项目的环境准备项目环境搭建这一步很多人觉得简单实际上翻车率很高。Vue项目要跑起来Node.js环境、包管理器、脚手架工具缺一不可。首先是Node.js安装。我建议装LTS版本不要追新。Vue3和Vite对Node版本有最低要求但太新的Node版本反而可能和一些依赖包出现兼容性问题。装完后用node -v和npm -v确认版本。然后创建项目。现在官方推荐用Vite而不是vue-cli创建速度差好几倍npm create vitelatest tutor-web -- --template vue cd tutor-web npm install npm run devVite创建的项目默认目录结构非常干净src下面按照views、components、router、stores、api建子目录管理。如果是接手旧项目用的是vue-cli也别急着迁移先把node_modules删掉重新npm install往往会解决一堆莫名其妙的问题。npm安装依赖慢是国内开发者最常见的痛点。解决办法是设置镜像源npm config set registry https://registry.npmmirror.com如果你遇到某个包特别是node-sass这类原生模块反复安装失败先看看是不是镜像源和缓存的问题。用npm cache clean --force清掉缓存再重装能解掉大部分玄学问题。3.2 路由设计query、params、props传参怎么选Vue Router是前端页面的骨架。家教平台的页面结构大概是首页/教师列表页搜索筛选教师详情页看评价、约课学生中心我的课程、订单、回放授课教室地图页路由配置示例const routes [ { path: /, name: Home, component: HomeView }, { path: /teachers, name: TeacherList, component: TeacherList }, { path: /teachers/:teacherId, name: TeacherDetail, component: TeacherDetail, props: true }, { path: /student/orders, name: StudentOrders, component: StudentOrders }, { path: /classroom/:id, name: ClassroomMap, component: ClassroomMap } ]从教师列表跳详情页时我推荐路由参数用params传页面定位用query传。比如// 详情页传 teacherId 用路径参数 router.push({ name: TeacherDetail, params: { teacherId: 101 } }) // 列表页筛选条件用 query便于分享和回退 router.push({ path: /teachers, query: { subject: math, grade: grade8 } })params适合传少量业务主键query适合传筛选条件。有人图省事把所有数据都放state里刷新页面数据全丢这就是没分清路由状态和应用状态的区别。页面刷新后地址栏还在路由参数能恢复数据上下文这是一个很实用的设计习惯。props: true这个配置很多人忽略它能让路由参数直接绑定到组件的props上组件内部不需要再从route.params里取值可读性和可测性都好很多。3.3 依赖安装与版本锁定的那些坑Vue项目依赖多版本冲突是家常便饭。我见过一个项目开发环境一切正常打包后TotalDistSize直接翻倍查了半天发现是Element Plus组件库引入了全量样式没按需加载。前端依赖安装的经验可以总结成三条用锁文件锁定版本。package-lock.jsonnpm或pnpm-lock.yaml必须提交到仓库团队协作时大家的依赖版本一致才不会再现我本地好好的你那里跑不起来的情况。区分dependencies和devDependencies。像Vite、ESLint这类只在开发期用的工具装到devDependencies运行时依赖如Vue、Axios、Element Plus放dependencies。打包体积和部署流程都会干净很多。谨慎升级大版本。Vue2升Vue3、Element Plus从Beta到正式版很多API有breaking change。项目启动阶段选好版本就锁死不要在开发中期顺手升级。另外Vue全家桶目前的状态管理方案我建议新项目直接用Pinia。Vuex那一套mutation/action的模板代码太繁琐Pinia的写法接近Composition API类型推断也更好。如果项目里已经用了Vuex也不必重构但新模块用Pinia没有坏处。4. 前后端联调中的关键功能实现4.1 登录认证与token处理的正确姿势前后端分离后Django自带的session认证不再适用因为前端和后端不同源每次请求都带cookie还得处理CSRF非常麻烦。我用的是JWT认证方案。后端配置djagnorestframework-simplejwt在settings.py里注册REST_FRAMEWORK { DEFAULT_AUTHENTICATION_CLASSES: ( rest_framework_simplejwt.authentication.JWTAuthentication, ), }然后配置对应的URL路由获取token和刷新token都会自动生成。前端这边Axios需要封装请求拦截器把token挂到请求头上import axios from axios const api axios.create({ baseURL: /api, timeout: 10000 }) api.interceptors.request.use(config { const token localStorage.getItem(access_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) api.interceptors.response.use( response response, error { if (error.response error.response.status 401) { // token过期尝试刷新 const refresh localStorage.getItem(refresh_token) if (refresh) { axios.post(/api/token/refresh/, { refresh }).then(res { localStorage.setItem(access_token, res.data.access) // 重新发起原请求 }) } else { router.push(/login) } } return Promise.reject(error) } )这里有几个细节值得说token存localStorage而不是sessionStorage刷新页面不丢登录态用户体验更好。当然安全性上要接受XSS风险所以前端一定要避免使用v-html渲染不可信内容。响应拦截器里处理401用户登录过期后自动跳转登录页而不是每个页面都写一遍错误处理。刷新token的接口要等异步返回如果同一时间多个接口都401要避免重复刷新。可以用一个简单的锁变量或者把刷新逻辑前置到请求拦截器中判断token过期时间。4.2 M3U8课程视频播放与StreamingHttpResponse下载家教平台经常要上传课程回放视频存储在服务端的常见格式之一是HLSM3U8。前端播放m3u8不能直接用video标签需要借助hls.js。npm install hls.jsVue组件里的实现思路template video refvideoEl controls autoplay/video /template script setup import Hls from hls.js import { ref, onMounted } from vue const props defineProps({ src: { type: String, required: true } // /media/courses/101/playlist.m3u8 }) const videoEl ref(null) onMounted(() { if (Hls.isSupported()) { const hls new Hls() hls.loadSource(props.src) hls.attachMedia(videoEl.value) } }) /script后端方面要保证m3u8文件及关联的ts文件能被访问。Django处理这类文件别直接把文件塞到media目录用默认静态服务撑全场生产环境应该用Nginx直接托管media目录做流媒体分发Django只负责鉴权和分发URL。真正有技术含量的是文件下载接口。很多人写下载功能只知道返回一个FileResponse结果中文文件名乱码、大文件下载占满内存。我推荐用StreamingHttpResponse精确控制响应头from django.http import StreamingHttpResponse from urllib.parse import quote def download_material(request, file_id): material Material.objects.get(idfile_id) file_path material.file.path def file_iterator(path, chunk_size8192): with open(path, rb) as f: while True: chunk f.read(chunk_size) if not chunk: break yield chunk filename quote(material.name .pdf) response StreamingHttpResponse( file_iterator(file_path), content_typeapplication/octet-stream ) response[Content-Disposition] fattachment; filename*UTF-8{filename} response[Content-Length] material.file.size return response这里面最容易翻车的是Content-Disposition。直接用中文文件名在部分浏览器里会乱码或下载失败用filename*UTF-8{filename}格式配合urllib.parse.quote做URL编码才能兼容Chrome、Firefox和Safari。4.3 多表格数据导出Excel与地图组件接入家教平台的管理员经常要导出各种统计报表学生名单、教师结算表、课程收入明细。如果这些数据分布在不同表格里一次导出到一个Excel的多个Sheet里是真实存在的需求。实现方案有两种第一种后端用openpyxl或xlsxwriter生成Excel文件from openpyxl import Workbook def export_multi_sheet(request): wb Workbook() # 第一个Sheet学生名单 ws1 wb.active ws1.title 学生名单 ws1.append([姓名, 年级]) for s in students: ws1.append([s.user.username, s.grade]) # 第二个Sheet收入明细 ws2 wb.create_sheet(收入明细) ws2.append([订单号, 金额, 状态]) for o in orders: ws2.append([o.order_no, str(o.amount), o.status]) # 写入响应 response HttpResponse(content_typeapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet) response[Content-Disposition] attachment; filenamereport.xlsx wb.save(response) return response第二种前端用xlsx库SheetJS纯前端生成Excelnpm install xlsx前端生成Excel适合数据已经在前端页面上展示的场景导出逻辑比较简单。但如果数据量大或者敏感数据只允许后台导出还是走后端方案更合理。我通常两套方案配合使用列表页小批量用前端导出全量月报走后端导出。再说到地图组件。家教平台里有授课地点展示的需求我用的是腾讯地图。Vue里集成腾讯地图的思路是去腾讯位置服务控制台申请一个Web端JavaScript API的key。在index.html里引入地图JS脚本。script srchttps://map.qq.com/api/gljs?v1.expkeyYOUR_KEY/script在组件初始化时创建地图实例添加标注。script setup import { onMounted } from vue onMounted(() { const map new TMap.Map(document.getElementById(map), { center: { lat: 39.908860, lng: 116.397390 }, zoom: 15 }) new TMap.Marker({ map: map, position: { lat: 39.908860, lng: 116.397390 } }) }) /script申请key时有一步容易漏需要在控制台把域名白名单配上。开发环境的localhost:8080生产环境的域名都要加进去不然地图组件加载出来一片空白。这算是地图类组件接入最典型的坑之一。4.4 重定向传递数据与WebSocket即时通知django重定向传递数据这个痛点通常出现在服务端渲染的业务场景。比如课程预约成功后表单视图重定向到订单详情页同时要传递一条提示消息。Django的经典做法是用messages框架或sessionfrom django.contrib import messages from django.shortcuts import redirect def book_course(request, course_id): # 预约逻辑... messages.success(request, 预约成功请在订单中心查看详情) return redirect(course_detail, course_idcourse_id)但在前后端分离架构里这个需求变成了前端路由跳转时传递数据。有几种选择用query参数传简单标识目标页面根据标识重新请求接口获取数据这是最可靠的做法。用Pinia临时存消息文本路由跳转后读取并消费掉。用sessionStorage传递一次性数据sessionStorage.setItem(booking_success, 预约成功) router.push({ path: /course/${courseId} }) // 目标页面 onMounted(() { const msg sessionStorage.getItem(booking_success) if (msg) { ElMessage.success(msg) sessionStorage.removeItem(booking_success) } })这套方案的好处是刷新页面后数据已消费不会重复弹提示也不污染URL。再讲WebSocket。家教平台里学生预约课程后教师端最好能实时收到提醒。传统HTTP轮询又慢又费资源WebSocket是更合适的方案。后端Django要用Channel# asgi.py import os from django.core.asgi import get_asgi_application from channels.routing import ProtocolTypeRouter, URLRouter application ProtocolTypeRouter({ http: get_asgi_application(), websocket: URLRouter([ path(ws/notify/, consumers.NotificationConsumer.as_asgi()), ]), })前端Vue直接用原生WebSocket APIconst ws new WebSocket(ws://localhost:8000/ws/notify/) ws.onmessage (e) { const data JSON.parse(e.data) if (data.type new_booking) { ElNotification({ title: 新预约提醒, message: ${data.student_name} 预约了你的课程 }) } }注意WebSocket的URL协议是ws://生产环境如果没有上TLS就用wss://跟HTTP不完全一样。如果Nginx做了反向代理还要单独给WebSocket连接配置Upgrade头不然连接会被中断。5. 打包部署阶段的高频故障与排查链路5.1 打包后布局异常的根因链vue 打包后 布局异常是搜索引擎里的高频词我自己也遇到过。开发环境页面正常npm run build完部署到服务器后CSS失效、图片加载不出来、路由跳转404。这类问题的排查链路基本是这样的第一步看浏览器控制台网络请求。如果CSS文件、字体、图片的请求地址都是相对路径而站点部署在子路径下比如https://example.com/tutor/就会404。第二步检查Vite或Vue CLI的publicPath配置。Vite默认base: /如果部署在子目录需要改成// vite.config.js export default { base: /tutor/ }第三步排查Vue Router的history模式。如果用了createWebHistory()后端必须把所有路由重定向到index.html否则刷新子路由页面就会404。Nginx配置location / { try_files $uri $uri/ /index.html; }如果不想处理服务端重定向最简单的是改用createWebHashHistory()URL会带/#/但刷新不会404。对内部管理系统来说hash模式牺牲一点美观换来部署省心完全可以接受。第四步检查有没有在打包时屏蔽了某些相对路径的资源。Element Plus的字体文件、腾讯地图的引用、背景图片都是重灾区。这一整套排查下来大多数打包后布局异常都能定位到base路径和hash/history模式这两个核心问题上。5.2 跨域、静态资源与history路由配置前端和后端分离部署后跨域是绕不开的问题。开发阶段用Vite的proxy代理解决生产阶段最好用Nginx做反向代理把同源的请求转给后端。开发环境的Vite配置// vite.config.js export default { server: { proxy: { /api: { target: http://localhost:8000, changeOrigin: true }, /media: { target: http://localhost:8000, changeOrigin: true } } } }生产环境的Nginx配置server { listen 80; server_name your-domain.com; # 前端静态文件 location / { root /home/www/tutor-web/dist; try_files $uri $uri/ /index.html; } # Django API接口 location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 媒体文件 location /media/ { alias /home/www/tutor-platform/media/; } # WebSocket代理 location /ws/ { proxy_pass http://127.0.0.1:8000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; } }用这种同源代理方案后Django端不需要配django-cors-headers前端请求直接写/api/xxx相对路径开发生产环境都干净。如果你非要前后端跨域直连那才需要装django-cors-headersINSTALLED_APPS [ corsheaders, ] CORS_ALLOWED_ORIGINS [ http://localhost:8080, https://your-production-domain.com, ]有个容易出问题的地方开发环境配了proxy生产环境配了Nginx但前端代码里的baseURL要对应调整。用import.meta.env区分环境是个好习惯const api axios.create({ baseURL: import.meta.env.PROD ? /api : /api })只要后端API前缀统一是/api其实两端可以保持一致省去环境判断。5.3 部署后的性能优化清单部署上线只是起点性能优化直接影响用户实际体验。基于实际经验列一份家教平台部署后建议过一遍的优化清单前端路由懒加载把教师详情、订单管理、视频播放等功能性页面改成动态导入首屏只加载必要的组件代码首屏渲染速度会有明显提升。const TeacherDetail () import(../views/TeacherDetail.vue)前端按需引入UI库Element Plus默认全量引入会打包进大量无用组件。用官方插件做按需引入打包体积能降一半以上。打包后先看一眼dist目录体积有个直观心理预期。后端查询加上select_related和prefetch_related列表页涉及外键关联查询时不加这两个会造成N1查询问题。比如教师列表页关联了TeacherProfile、User、CourseORM会发大量SQL语句用select_related一次join出来teachers TeacherProfile.objects.select_related(user, user__teacher_profile).all()数据库索引经常做筛选的字段科目、年级、订单状态加db_indexTrue查询效率会提高不少。class Course(models.Model): subject models.CharField(科目, max_length20, db_indexTrue)缓存热点数据教师列表、首页轮播、课程推荐这种更新频率低、读频率高的数据用Django的cache_page装饰器或者Redis缓存起来。from django.views.decorators.cache import cache_page cache_page(60 * 15) # 缓存15分钟 def course_list(request): ...图片和视频做压缩Django的ImageField上传后不会自动压缩需要配合Pillow做图片处理或者前端上传前压缩。视频文件尽可能用HLS切片并转码成多码率避免用户手机流量看高码率视频卡顿。这几项做完平台的性能和体验基本能达到可上线标准。后面更多是根据业务数据增长逐步调整比如订单量大了需要做分页优化视频访问量大需要考虑CDN。最后说点个人体会。DjangoVue做家教一体化平台技术上没有特别高深的地方但真正的功夫全在细节里数据库字段要不要建索引文件下载头怎么设置路由history模式和Nginx怎么配合每题单看都不难连在一起就是一堆隐形的坑。我踩过最狠的一次是ajax跨域加cookie带不上排查了整整一下午最后发现是Nginx少了proxy_set_header X-Forwarded-Proto $scheme;这一行。做全栈项目环境配置和部署配置花的时间往往比写业务代码还多所以别急着撸代码先把环境链路和部署思路想清楚后边能省一大半调试时间。
Django+Vue家教平台全栈开发：从环境搭建到部署打包的完整指南
家教平台这类一体化管理系统我前后接过好几个学生端、教师端、管理后台、课程预约、视频回放、账单导出……需求听着不复杂真做起来全是细节。尤其是技术栈选型和环境搭建不少人在第一步就卡住了Django和Vue到底怎么配合mysqlclient装不上怎么办打包完布局乱了又是怎么回事这篇文章就围绕DjangoVue搭建家教一体化教育平台这条线把业务拆解、后端设计、前端工程化、前后端联调、部署打包的完整链路捋一遍。适合正在做课程设计、毕业设计或者刚接手类似全栈项目的开发者参考里面大部分坑我都实际踩过能帮你少走不少弯路。1. 家教一体化平台的业务拆解与选型逻辑1.1 家教平台到底需要哪些模块先别急着写代码。家教平台不是简单的教师列表预约按钮真正落地时需要梳理的角色和模块比想象中多。做项目前我习惯先画一张业务地图把角色、功能、数据流列清楚后面建模才不会乱。家教平台的核心角色至少有四类家长/学生端注册登录、浏览教师、按科目/年级筛选、查看教师详情与评价、预约试听课、在线支付、观看课程回放、下载学习资料。教师端创建个人主页简介、教龄、擅长科目、维护可授课时间段、管理学生预约、上传课程视频与讲义、查看课时收入。管理员审核教师入驻、管理用户、处理投诉、统计分析收入、活跃度、发布系统公告。系统支撑功能教室/授课地点管理、课程表排课、消息通知、账单与订单管理。这些模块对应的技术需求就浮出来了需要用户认证与权限控制教师、学生、管理员三种角色、课程与订单管理系统、视频文件上传与播放、Excel导出、地图展示授课地点、实时消息通知。这一套业务地图列全了你才能确定数据模型和接口设计。1.2 为什么是Django和Vue这对组合选型这件事没有绝对的对错但为什么用你心里要有数。我选Django做后端核心原因是它自带的东西足够多自带Admin管理后台教师审核、订单查看、内容管理这些内部功能不需要从零写页面Django Admin配置一下就能用开发效率极高。ORM非常成熟教师、课程、订单、评价之间的关联关系用Django ORM表达和查询都非常自然配合迁移工具可以随时调整表结构。自带认证体系User模型、权限组Group、会话管理都是现成的扩展一个教师Profile、学生Profile就是加一张关联表的事。生态适合做内容型平台Django处理文件上传、图片缩放、分页查询都很顺手。前端选Vue是看中它的工程化体验和上手曲线。Vue的单文件组件SFC让页面、样式、脚本聚在一起组件之间传参通信直观配合Vue Router和Pinia或Vuex就能撑起一个SPA。和React相比Vue的模板语法更接近HTML思维对后端出身、不常写前端的开发者更友好。我见过有人用Django模板直接渲染前端页面项目初期确实快但做到预约日历、实时消息提醒、视频播放器交互时模板语法非常别扭。前后端分离之后前端只调接口后端只管数据开发和部署都能解耦。1.3 整体架构落地方案架构上我用的是最常用的前后端分离模式Vue SPA前端端口8080 ↓ HTTP JSON Django REST Framework后端API端口8000 ↓ MySQL主数据库 Redis缓存/会话/队列后端在Django基础上加djangorestframework和djangorestframework-simplejwt提供RESTful APIJWT做认证用django-cors-headers解决跨域。前端用Vue3 Vue Router Pinia AxiosUI库用Element Plus打包后丢给Nginx托管静态文件API请求反向代理到后端。这套架构的好处是边界清晰模板渲染、数据校验、权限控制全在后端交互体验、路由跳转、状态管理全在前端。后面接部署时前端不用改代码后端也不涉及模板页面各自独立迭代。2. Django端数据模型设计与Admin后台实操2.1 用户角色与核心模型的字段设计Django自带的User模型可以直接用但家教平台需要扩展角色信息。我的习惯是建两个Profile模型用OneToOneField关联到User而不是直接修改User表。from django.db import models from django.contrib.auth.models import User class TeacherProfile(models.Model): user models.OneToOneField(User, on_deletemodels.CASCADE, related_nameteacher_profile) title models.CharField(头衔, max_length50, blankTrue) intro models.TextField(个人简介, blankTrue) subjects models.CharField(擅长科目, max_length100) hourly_rate models.DecimalField(每小时费用, max_digits8, decimal_places2, default0) verified models.BooleanField(审核通过, defaultFalse) created_at models.DateTimeField(auto_now_addTrue) class StudentProfile(models.Model): user models.OneToOneField(User, on_deletemodels.CASCADE, related_namestudent_profile) grade models.CharField(年级, max_length20, blankTrue) points models.IntegerField(积分, default0) class Course(models.Model): teacher models.ForeignKey(TeacherProfile, on_deletemodels.CASCADE, related_namecourses) name models.CharField(课程名称, max_length100) cover models.ImageField(封面图, upload_tocourse_covers/, blankTrue) description models.TextField(课程描述) start_time models.DateTimeField(开课时间) end_time models.DateTimeField(结束时间) price models.DecimalField(价格, max_digits8, decimal_places2) max_students models.IntegerField(最大人数, default20) class Order(models.Model): order_no models.CharField(订单号, max_length32, uniqueTrue) student models.ForeignKey(StudentProfile, on_deletemodels.CASCADE, related_nameorders) course models.ForeignKey(Course, on_deletemodels.CASCADE, related_nameorders) amount models.DecimalField(订单金额, max_digits8, decimal_places2) status models.CharField(状态, max_length20, choices[ (pending, 待支付), (paid, 已支付), (refunded, 已退款) ], defaultpending) created_at models.DateTimeField(auto_now_addTrue)几个设计上的注意点用OneToOneField扩展User而不是继承AbstractUserDjango的User模型在项目启动后就不建议改扩展Profile可以避免后期迁移地狱而且不影响第三方包对User的引用。订单号手动生成时间戳随机数组合即可不要用自增id暴露订单量。金额用DecimalFieldFloatField会有精度问题涉及钱的字段一律用DecimalField。课程时间用DateTimeField做排课冲突检测时直接比较时间范围比存字符串方便一万倍。除了上面这些还要考虑预约表Appointment、评价表Review、课程回放表LessonVideo、教室表Classroom、课表Schedule。尤其是教室管理很多家教平台会涉及线下授课Classroom模型里要有地址、经纬度字段后面才能在Vue端接地图展示。2.2 连接MySQL时的mysqlclient安装问题Django默认用SQLite但家教平台这种多用户系统生产环境至少要换MySQL。一换MySQL很多人的第一个坑就是mysqlclient装不上。在Windows上直接pip install mysqlclient经常会报错提示缺少Microsoft C Build Tools。这是因为mysqlclient需要编译C扩展Windows上没有完整的编译环境。我的处理办法有两种去https://pypi.org/project/mysqlclient/#files下载对应Python版本的预编译wheel包本地安装省去编译依赖的麻烦。改用pymysql兜底import pymysql pymysql.install_as_MySQLdb()在Django项目的__init__.py里加上这两行然后DATABASES配置保持不变即可。pymysql是纯Python实现性能不如mysqlclient但开发调试完全够用。在Linux服务器上安装则要先把系统依赖装好sudo apt install python3-dev default-libmysqlclient-dev build-essential pip install mysqlclient数据库配置时注意编码和连接参数DATABASES { default: { ENGINE: django.db.backends.mysql, NAME: tutor_platform, USER: your_user, PASSWORD: your_password, HOST: 127.0.0.1, PORT: 3306, OPTIONS: { charset: utf8mb4, } } }utf8mb4一定不能省不然用户昵称里存个emoji就直接写入报错。新手项目跑不起来十有八九就是卡在这个字符集和mysqlclient上。2.3 Admin后台美化的两种路线Django自带Admin功能是全的但默认样式非常朴素而且对中文字段排序、筛选器支持都不够美观。我美化Admin后台时试过两条路线。路线一用第三方主题推荐django-simpleuipip install django-simpleui安装后在INSTALLED_APPS里把simpleui放到django.contrib.admin前面登录后台后主题就生效了。simpleui自带侧边栏菜单、面包屑导航、响应式布局还支持一键隐藏Django默认的最近操作面板整体观感接近一个现代化的管理后台。路线二完全自定义Admin页面如果后续需要高度定制比如嵌入数据统计图表可以在simpleui基础上开发自定义模板页面覆盖admin/base_site.html按自己的需求布局。不过对大多数家教平台来说路线一的性价比最高先跑通业务再考虑定制仪表盘。Admin里还有一个实用配置是list_display和list_filter。比如课程管理后台把审核状态、科目、开课时间放进来管理员筛选操作效率会高很多class CourseAdmin(admin.ModelAdmin): list_display (name, teacher, price, start_time, status) list_filter (start_time, teacher) search_fields (name, teacher__user__username)3. Vue端工程化与路由体系搭建3.1 从零搭建Vue项目的环境准备项目环境搭建这一步很多人觉得简单实际上翻车率很高。Vue项目要跑起来Node.js环境、包管理器、脚手架工具缺一不可。首先是Node.js安装。我建议装LTS版本不要追新。Vue3和Vite对Node版本有最低要求但太新的Node版本反而可能和一些依赖包出现兼容性问题。装完后用node -v和npm -v确认版本。然后创建项目。现在官方推荐用Vite而不是vue-cli创建速度差好几倍npm create vitelatest tutor-web -- --template vue cd tutor-web npm install npm run devVite创建的项目默认目录结构非常干净src下面按照views、components、router、stores、api建子目录管理。如果是接手旧项目用的是vue-cli也别急着迁移先把node_modules删掉重新npm install往往会解决一堆莫名其妙的问题。npm安装依赖慢是国内开发者最常见的痛点。解决办法是设置镜像源npm config set registry https://registry.npmmirror.com如果你遇到某个包特别是node-sass这类原生模块反复安装失败先看看是不是镜像源和缓存的问题。用npm cache clean --force清掉缓存再重装能解掉大部分玄学问题。3.2 路由设计query、params、props传参怎么选Vue Router是前端页面的骨架。家教平台的页面结构大概是首页/教师列表页搜索筛选教师详情页看评价、约课学生中心我的课程、订单、回放授课教室地图页路由配置示例const routes [ { path: /, name: Home, component: HomeView }, { path: /teachers, name: TeacherList, component: TeacherList }, { path: /teachers/:teacherId, name: TeacherDetail, component: TeacherDetail, props: true }, { path: /student/orders, name: StudentOrders, component: StudentOrders }, { path: /classroom/:id, name: ClassroomMap, component: ClassroomMap } ]从教师列表跳详情页时我推荐路由参数用params传页面定位用query传。比如// 详情页传 teacherId 用路径参数 router.push({ name: TeacherDetail, params: { teacherId: 101 } }) // 列表页筛选条件用 query便于分享和回退 router.push({ path: /teachers, query: { subject: math, grade: grade8 } })params适合传少量业务主键query适合传筛选条件。有人图省事把所有数据都放state里刷新页面数据全丢这就是没分清路由状态和应用状态的区别。页面刷新后地址栏还在路由参数能恢复数据上下文这是一个很实用的设计习惯。props: true这个配置很多人忽略它能让路由参数直接绑定到组件的props上组件内部不需要再从route.params里取值可读性和可测性都好很多。3.3 依赖安装与版本锁定的那些坑Vue项目依赖多版本冲突是家常便饭。我见过一个项目开发环境一切正常打包后TotalDistSize直接翻倍查了半天发现是Element Plus组件库引入了全量样式没按需加载。前端依赖安装的经验可以总结成三条用锁文件锁定版本。package-lock.jsonnpm或pnpm-lock.yaml必须提交到仓库团队协作时大家的依赖版本一致才不会再现我本地好好的你那里跑不起来的情况。区分dependencies和devDependencies。像Vite、ESLint这类只在开发期用的工具装到devDependencies运行时依赖如Vue、Axios、Element Plus放dependencies。打包体积和部署流程都会干净很多。谨慎升级大版本。Vue2升Vue3、Element Plus从Beta到正式版很多API有breaking change。项目启动阶段选好版本就锁死不要在开发中期顺手升级。另外Vue全家桶目前的状态管理方案我建议新项目直接用Pinia。Vuex那一套mutation/action的模板代码太繁琐Pinia的写法接近Composition API类型推断也更好。如果项目里已经用了Vuex也不必重构但新模块用Pinia没有坏处。4. 前后端联调中的关键功能实现4.1 登录认证与token处理的正确姿势前后端分离后Django自带的session认证不再适用因为前端和后端不同源每次请求都带cookie还得处理CSRF非常麻烦。我用的是JWT认证方案。后端配置djagnorestframework-simplejwt在settings.py里注册REST_FRAMEWORK { DEFAULT_AUTHENTICATION_CLASSES: ( rest_framework_simplejwt.authentication.JWTAuthentication, ), }然后配置对应的URL路由获取token和刷新token都会自动生成。前端这边Axios需要封装请求拦截器把token挂到请求头上import axios from axios const api axios.create({ baseURL: /api, timeout: 10000 }) api.interceptors.request.use(config { const token localStorage.getItem(access_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) api.interceptors.response.use( response response, error { if (error.response error.response.status 401) { // token过期尝试刷新 const refresh localStorage.getItem(refresh_token) if (refresh) { axios.post(/api/token/refresh/, { refresh }).then(res { localStorage.setItem(access_token, res.data.access) // 重新发起原请求 }) } else { router.push(/login) } } return Promise.reject(error) } )这里有几个细节值得说token存localStorage而不是sessionStorage刷新页面不丢登录态用户体验更好。当然安全性上要接受XSS风险所以前端一定要避免使用v-html渲染不可信内容。响应拦截器里处理401用户登录过期后自动跳转登录页而不是每个页面都写一遍错误处理。刷新token的接口要等异步返回如果同一时间多个接口都401要避免重复刷新。可以用一个简单的锁变量或者把刷新逻辑前置到请求拦截器中判断token过期时间。4.2 M3U8课程视频播放与StreamingHttpResponse下载家教平台经常要上传课程回放视频存储在服务端的常见格式之一是HLSM3U8。前端播放m3u8不能直接用video标签需要借助hls.js。npm install hls.jsVue组件里的实现思路template video refvideoEl controls autoplay/video /template script setup import Hls from hls.js import { ref, onMounted } from vue const props defineProps({ src: { type: String, required: true } // /media/courses/101/playlist.m3u8 }) const videoEl ref(null) onMounted(() { if (Hls.isSupported()) { const hls new Hls() hls.loadSource(props.src) hls.attachMedia(videoEl.value) } }) /script后端方面要保证m3u8文件及关联的ts文件能被访问。Django处理这类文件别直接把文件塞到media目录用默认静态服务撑全场生产环境应该用Nginx直接托管media目录做流媒体分发Django只负责鉴权和分发URL。真正有技术含量的是文件下载接口。很多人写下载功能只知道返回一个FileResponse结果中文文件名乱码、大文件下载占满内存。我推荐用StreamingHttpResponse精确控制响应头from django.http import StreamingHttpResponse from urllib.parse import quote def download_material(request, file_id): material Material.objects.get(idfile_id) file_path material.file.path def file_iterator(path, chunk_size8192): with open(path, rb) as f: while True: chunk f.read(chunk_size) if not chunk: break yield chunk filename quote(material.name .pdf) response StreamingHttpResponse( file_iterator(file_path), content_typeapplication/octet-stream ) response[Content-Disposition] fattachment; filename*UTF-8{filename} response[Content-Length] material.file.size return response这里面最容易翻车的是Content-Disposition。直接用中文文件名在部分浏览器里会乱码或下载失败用filename*UTF-8{filename}格式配合urllib.parse.quote做URL编码才能兼容Chrome、Firefox和Safari。4.3 多表格数据导出Excel与地图组件接入家教平台的管理员经常要导出各种统计报表学生名单、教师结算表、课程收入明细。如果这些数据分布在不同表格里一次导出到一个Excel的多个Sheet里是真实存在的需求。实现方案有两种第一种后端用openpyxl或xlsxwriter生成Excel文件from openpyxl import Workbook def export_multi_sheet(request): wb Workbook() # 第一个Sheet学生名单 ws1 wb.active ws1.title 学生名单 ws1.append([姓名, 年级]) for s in students: ws1.append([s.user.username, s.grade]) # 第二个Sheet收入明细 ws2 wb.create_sheet(收入明细) ws2.append([订单号, 金额, 状态]) for o in orders: ws2.append([o.order_no, str(o.amount), o.status]) # 写入响应 response HttpResponse(content_typeapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet) response[Content-Disposition] attachment; filenamereport.xlsx wb.save(response) return response第二种前端用xlsx库SheetJS纯前端生成Excelnpm install xlsx前端生成Excel适合数据已经在前端页面上展示的场景导出逻辑比较简单。但如果数据量大或者敏感数据只允许后台导出还是走后端方案更合理。我通常两套方案配合使用列表页小批量用前端导出全量月报走后端导出。再说到地图组件。家教平台里有授课地点展示的需求我用的是腾讯地图。Vue里集成腾讯地图的思路是去腾讯位置服务控制台申请一个Web端JavaScript API的key。在index.html里引入地图JS脚本。script srchttps://map.qq.com/api/gljs?v1.expkeyYOUR_KEY/script在组件初始化时创建地图实例添加标注。script setup import { onMounted } from vue onMounted(() { const map new TMap.Map(document.getElementById(map), { center: { lat: 39.908860, lng: 116.397390 }, zoom: 15 }) new TMap.Marker({ map: map, position: { lat: 39.908860, lng: 116.397390 } }) }) /script申请key时有一步容易漏需要在控制台把域名白名单配上。开发环境的localhost:8080生产环境的域名都要加进去不然地图组件加载出来一片空白。这算是地图类组件接入最典型的坑之一。4.4 重定向传递数据与WebSocket即时通知django重定向传递数据这个痛点通常出现在服务端渲染的业务场景。比如课程预约成功后表单视图重定向到订单详情页同时要传递一条提示消息。Django的经典做法是用messages框架或sessionfrom django.contrib import messages from django.shortcuts import redirect def book_course(request, course_id): # 预约逻辑... messages.success(request, 预约成功请在订单中心查看详情) return redirect(course_detail, course_idcourse_id)但在前后端分离架构里这个需求变成了前端路由跳转时传递数据。有几种选择用query参数传简单标识目标页面根据标识重新请求接口获取数据这是最可靠的做法。用Pinia临时存消息文本路由跳转后读取并消费掉。用sessionStorage传递一次性数据sessionStorage.setItem(booking_success, 预约成功) router.push({ path: /course/${courseId} }) // 目标页面 onMounted(() { const msg sessionStorage.getItem(booking_success) if (msg) { ElMessage.success(msg) sessionStorage.removeItem(booking_success) } })这套方案的好处是刷新页面后数据已消费不会重复弹提示也不污染URL。再讲WebSocket。家教平台里学生预约课程后教师端最好能实时收到提醒。传统HTTP轮询又慢又费资源WebSocket是更合适的方案。后端Django要用Channel# asgi.py import os from django.core.asgi import get_asgi_application from channels.routing import ProtocolTypeRouter, URLRouter application ProtocolTypeRouter({ http: get_asgi_application(), websocket: URLRouter([ path(ws/notify/, consumers.NotificationConsumer.as_asgi()), ]), })前端Vue直接用原生WebSocket APIconst ws new WebSocket(ws://localhost:8000/ws/notify/) ws.onmessage (e) { const data JSON.parse(e.data) if (data.type new_booking) { ElNotification({ title: 新预约提醒, message: ${data.student_name} 预约了你的课程 }) } }注意WebSocket的URL协议是ws://生产环境如果没有上TLS就用wss://跟HTTP不完全一样。如果Nginx做了反向代理还要单独给WebSocket连接配置Upgrade头不然连接会被中断。5. 打包部署阶段的高频故障与排查链路5.1 打包后布局异常的根因链vue 打包后 布局异常是搜索引擎里的高频词我自己也遇到过。开发环境页面正常npm run build完部署到服务器后CSS失效、图片加载不出来、路由跳转404。这类问题的排查链路基本是这样的第一步看浏览器控制台网络请求。如果CSS文件、字体、图片的请求地址都是相对路径而站点部署在子路径下比如https://example.com/tutor/就会404。第二步检查Vite或Vue CLI的publicPath配置。Vite默认base: /如果部署在子目录需要改成// vite.config.js export default { base: /tutor/ }第三步排查Vue Router的history模式。如果用了createWebHistory()后端必须把所有路由重定向到index.html否则刷新子路由页面就会404。Nginx配置location / { try_files $uri $uri/ /index.html; }如果不想处理服务端重定向最简单的是改用createWebHashHistory()URL会带/#/但刷新不会404。对内部管理系统来说hash模式牺牲一点美观换来部署省心完全可以接受。第四步检查有没有在打包时屏蔽了某些相对路径的资源。Element Plus的字体文件、腾讯地图的引用、背景图片都是重灾区。这一整套排查下来大多数打包后布局异常都能定位到base路径和hash/history模式这两个核心问题上。5.2 跨域、静态资源与history路由配置前端和后端分离部署后跨域是绕不开的问题。开发阶段用Vite的proxy代理解决生产阶段最好用Nginx做反向代理把同源的请求转给后端。开发环境的Vite配置// vite.config.js export default { server: { proxy: { /api: { target: http://localhost:8000, changeOrigin: true }, /media: { target: http://localhost:8000, changeOrigin: true } } } }生产环境的Nginx配置server { listen 80; server_name your-domain.com; # 前端静态文件 location / { root /home/www/tutor-web/dist; try_files $uri $uri/ /index.html; } # Django API接口 location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 媒体文件 location /media/ { alias /home/www/tutor-platform/media/; } # WebSocket代理 location /ws/ { proxy_pass http://127.0.0.1:8000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; } }用这种同源代理方案后Django端不需要配django-cors-headers前端请求直接写/api/xxx相对路径开发生产环境都干净。如果你非要前后端跨域直连那才需要装django-cors-headersINSTALLED_APPS [ corsheaders, ] CORS_ALLOWED_ORIGINS [ http://localhost:8080, https://your-production-domain.com, ]有个容易出问题的地方开发环境配了proxy生产环境配了Nginx但前端代码里的baseURL要对应调整。用import.meta.env区分环境是个好习惯const api axios.create({ baseURL: import.meta.env.PROD ? /api : /api })只要后端API前缀统一是/api其实两端可以保持一致省去环境判断。5.3 部署后的性能优化清单部署上线只是起点性能优化直接影响用户实际体验。基于实际经验列一份家教平台部署后建议过一遍的优化清单前端路由懒加载把教师详情、订单管理、视频播放等功能性页面改成动态导入首屏只加载必要的组件代码首屏渲染速度会有明显提升。const TeacherDetail () import(../views/TeacherDetail.vue)前端按需引入UI库Element Plus默认全量引入会打包进大量无用组件。用官方插件做按需引入打包体积能降一半以上。打包后先看一眼dist目录体积有个直观心理预期。后端查询加上select_related和prefetch_related列表页涉及外键关联查询时不加这两个会造成N1查询问题。比如教师列表页关联了TeacherProfile、User、CourseORM会发大量SQL语句用select_related一次join出来teachers TeacherProfile.objects.select_related(user, user__teacher_profile).all()数据库索引经常做筛选的字段科目、年级、订单状态加db_indexTrue查询效率会提高不少。class Course(models.Model): subject models.CharField(科目, max_length20, db_indexTrue)缓存热点数据教师列表、首页轮播、课程推荐这种更新频率低、读频率高的数据用Django的cache_page装饰器或者Redis缓存起来。from django.views.decorators.cache import cache_page cache_page(60 * 15) # 缓存15分钟 def course_list(request): ...图片和视频做压缩Django的ImageField上传后不会自动压缩需要配合Pillow做图片处理或者前端上传前压缩。视频文件尽可能用HLS切片并转码成多码率避免用户手机流量看高码率视频卡顿。这几项做完平台的性能和体验基本能达到可上线标准。后面更多是根据业务数据增长逐步调整比如订单量大了需要做分页优化视频访问量大需要考虑CDN。最后说点个人体会。DjangoVue做家教一体化平台技术上没有特别高深的地方但真正的功夫全在细节里数据库字段要不要建索引文件下载头怎么设置路由history模式和Nginx怎么配合每题单看都不难连在一起就是一堆隐形的坑。我踩过最狠的一次是ajax跨域加cookie带不上排查了整整一下午最后发现是Nginx少了proxy_set_header X-Forwarded-Proto $scheme;这一行。做全栈项目环境配置和部署配置花的时间往往比写业务代码还多所以别急着撸代码先把环境链路和部署思路想清楚后边能省一大半调试时间。
