基于 Vue 和 Node.js 的毕业设计实战：从零搭建全栈项目并规避常见陷阱-程序员充电站

背景痛点：为什么“能跑”≠“能毕业”

做毕设时，很多同学把“前后端调通”当成终点，结果答辩现场被三连问：

“如果刷新页面 404 怎么解？”
“JWT 过期后并发请求会不会掉线？”
“服务器重启数据还在吗？”

80% 的翻车集中在三点：

架构混乱：把 Vue 打包后的 dist 直接扔进 public 文件夹，上线后刷新 404，又把 history 回退成 hash，路由丑到导师皱眉。
安全缺失：用明文存密码，POST /login 接口直接SELECT * FROM user WHERE username='${name}'，演示现场被 SQLMap 一秒破防。
部署困难：Windows 上跑得好好的，上了云主机 pmpm 启动脚本丢失，环境变量写死，日志找不到，最后把 2C4G 机器打成 100% CPU，老师以为你在跑比特币木马。

痛点总结：没有“工程化”思维，代码能跑，但系统不可交付。

技术选型：Vue 3 + Vite 与 Express 的“性价比”组合

毕业设计时间紧，框架必须“学习成本 ≤ 两周、生态成熟、文档友好”。把主流方案拉个表：

技术	优点	缺点	毕设适配度
Nuxt SSR	SEO 好	学习曲线陡，部署需 Node 常驻	高射炮打蚊子
Next.js	React 生态大	需要 React 基础，TS 严格	导师不会 React
NestJS	企业级、IOC 优雅	装饰器、模块化概念多	两周写不完
Koa	精简、洋葱模型	中间件生态比 Express 少	够用
Express	教程最多、路由直观	回调地狱？可用 async/await 消灭	五星

结论：

前端：Vue 3 + Vite，热更新 300 ms 内，模板语法与课程衔接顺滑。
后端：Express ≥ 4.18，配合 async/await，不写回调地狱；如想炫技可切 Koa，但文档量 Express 碾压。
数据库：MySQL 8，导师认识；如想秀“新”，可上 PostgreSQL，JSON 字段一把梭。

核心实现：Clean Code 示范

1. 目录先解耦

server/ ├─ config/ # 读取 .env ├─ controllers/ # 只处理 HTTP ├─ services/ # 业务逻辑 ├─ models/ # Sequelize 模型 ├─ middlewares/ # JWT、错误处理 ├─ routes/ # 路由表 └─ app.js # 入口

前端同理，按模块分 views / api / components，拒绝“大一统”。

2. RESTful 路由 & 统一响应

// routes/user.js import express from 'express'; import * as userCtrl from '../controllers/user.js'; import { bodyValidator } from '../middlewares/validator.js'; import { registerSchema } from '../schemas/user.js'; const router = express.Router(); router.post('/register', bodyValidator(registerSchema), userCtrl.register); router.post('/login', bodyValidator(loginSchema), userCtrl.login); router.get('/profile', jwtAuth, userCtrl.profile); // 需要登录 export default router;

控制器只做“三件事”：接收、调用服务、返回统一格式。

// controllers/user.js export async function register(req, res, next) { try { const { username, password } = req.body; const user = await userService.createUser(username, password); res.json({ code: 0, data: user, msg: '注册成功' }); } catch (e) { next(e); // 统一错误中间件处理 } }

3. JWT 鉴权 & 刷新

accessToken 15 min，refreshToken 7 day，存 HttpOnly Cookie，防 XSS。

// middlewares/jwt.js import jwt from 'jsonwebtoken'; export const jwtAuth = (req, res, next) => { const token = req.cookies.accessToken; if (!token) return res.status(401).json({ code: 40101, msg: '未登录' }); try { req.user = jwt.verify(token, process.env.JWT_SECRET); return next(); } catch { return res.status(401).json({ code: 40102, msg: 'Token 失效' }); } };

刷新逻辑：前端拦截 40102 → 调 /token/refresh → 后端验证 refreshToken → 下发新 accessToken，用户无感。

4. 跨域与 Vite 代理

开发阶段让 Vite 代劳，避免 CORS：

// vite.config.js server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }

上线后 Express 加 cors 白名单，拒绝“*”。

5. 幂等性处理

订单/发帖接口用唯一索引 + 客户端 UUID：

ALTER TABLE post ADD UNIQUE (client_uuid);

后端收到重复 UUID 直接返回“已提交”，防快速双击。

性能与安全：把“能跑”升级成“抗揍”

JWT 白名单失效：用户修改密码后把该用户version字段 +1，验证时判断jwt.payload.ver === user.ver，旧 token 强制下线。
SQL 注入：全面用 Sequelize 参数化查询，拒绝字符串拼接。
并发状态：使用 Redis 分布式锁（单实例可用内存锁），例如 10 人同时秒杀名额：
```
const lock = await redlock.lock(`lock:seckill:${id}`, 1000); // 业务 await lock.unlock();
```
速率限制：express-rate-limit 针对 /login 限制 5 次/分钟，防暴力撞库。
进程守护：PM2 cluster 模式 2 核，零停机重启；搭配 nginx 反向代理，开启 gzip 压缩，首屏 200 KB 以内。

生产环境避坑指南

环境变量：用 dotenv 只在开发加载，生产通过pm2 ecosystem.json写入env字段，拒绝把 .env 传 GitHub。
日志：winston 按日期分割，error 级自动上报 Sentry；前端用 Sentry 的 Vue 插件，sourcemap 私有上传。
HTTPS：Certbot 自动续签，强制 HSTS，评分拉到 A+。
冷启动优化：服务器 1 核 2 G 时，TypeScript 项目先用 tsc 打包成 js，再用pm2 start dist/app.js --node-args="--max-old-space-size=512"，避免 1 G 内存编译卡死。
404 兜底：Vue history 模式刷新 404，在 nginx 加：
```
location / { try_files $uri $uri/ /index.html; }
```