从前端到后端：新手如何高效完成一个全栈毕业设计项目

最近在帮学弟学妹们看毕业设计，发现一个普遍现象：很多同学的项目想法不错，但一涉及到前后端结合，就变得手忙脚乱。要么是前端写死了假数据，后端接口对不上；要么是代码结构混乱，自己过两天都看不懂。今天，我就结合一个常见的“校园二手交易平台”场景，分享一下新手如何高效、清晰地完成一个全栈毕业设计项目，希望能帮你避开那些常见的“坑”。

1. 新手常踩的坑：从混乱到清晰

在开始动手写代码之前，我们先看看哪些地方容易出问题。理解这些，能让你少走很多弯路。

2. 技术选型：够用就好，快速上手

对于毕业设计，我们的核心目标是“在有限时间内，做出一个结构清晰、可演示、可扩展的作品”。因此，技术选型的原则是：轻量、流行、文档丰富、生态成熟。

前端框架对比：Vue 3 vs React

• Vue 3：推荐新手首选。其组合式 API 逻辑组织更灵活，单文件组件（.vue）将模板、逻辑、样式放在一起，直观易懂。官方工具链（Vite, Vue Router, Pinia）集成度高，学习曲线平缓。
• React：功能强大，生态极其丰富。但需要额外学习 JSX 语法、Hooks 的概念，以及搭配选择状态管理（Zustand, Redux）和路由库（React Router）。对于时间紧迫的毕业设计，学习成本稍高。

结论：如果你之前没有深入使用过两者，Vue 3 是更稳妥、高效的选择。

后端框架对比：Express vs NestJS vs Flask

• Express (Node.js)：极简、灵活，中间件机制强大。对于JavaScript/TypeScript全栈开发者来说，前后端语言统一，心智负担小。搭配 express-generator 可以快速搭建基础结构。
• NestJS (Node.js)：基于TypeScript，借鉴了Angular的设计思想，提供了开箱即用的模块化、依赖注入、装饰器等企业级特性。结构非常规范，但概念较多，对新手有一定门槛。
• Flask (Python)：轻量、优雅，“微框架”设计哲学。适合快速构建RESTful API，Python语法简洁，在数据处理、爬虫等场景有天然优势。

结论：为了保持技术栈统一和快速开发，Express (搭配 TypeScript) 是一个平衡了灵活性与工程化的好选择。数据库选择最常见的 MySQL 或 PostgreSQL 即可。

最终技术栈建议：Vue 3 + Vite + Axios (前端) / Express + TypeScript + Prisma (ORM) + MySQL (后端)。

3. 核心实现：打通用户登录全链路

我们以实现“用户登录”和“发布商品”这两个核心功能为例，串起前后端。

第一步：前端 – 封装统一的请求工具

在前端项目中，我们不应该在每个组件里直接使用 axios.post(‘http://localhost:3000/login‘)。封装一个通用的请求实例，有利于统一管理基地址、超时时间、请求/响应拦截器（用于自动添加Token、处理错误等）。

// src/utils/request.js
import axios from 'axios';

const service = axios.create({
baseURL: import.meta.env.VITE_API_BASEURL || '/api', // 从环境变量读取
timeout: 10000,
});

// 请求拦截器：例如，每次请求前，如果本地有token，就自动带上
service.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);

// 响应拦截器：统一处理错误，例如token过期跳转登录页
service.interceptors.response.use(
(response) => {
// 如果后端返回的数据结构是 { code: 200, data: …, message: 'ok' }
const res = response.data;
if (res.code === 200) {
return res.data; // 直接返回业务数据
} else {
// 处理业务错误，例如弹窗提示 res.message
console.error('业务错误:', res.message);
return Promise.reject(new Error(res.message || 'Error'));
}
},
(error) => {
// 处理HTTP错误，如 401, 404, 500
if (error.response?.status === 401) {
// Token无效，清除存储并跳转到登录页
localStorage.removeItem('token');
window.location.href = '/login';
}
console.error('HTTP错误:', error);
return Promise.reject(error);
}
);

export default service;

第二步：前端 – 登录页面调用接口

<!– src/views/Login.vue –>
<template>
<form @submit.prevent="handleLogin">
<input v-model="form.username" placeholder="用户名" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request'; // 导入封装好的请求工具

const router = useRouter();
const form = ref({
username: '',
password: '',
});

const handleLogin = async () => {
try {
// 调用后端登录接口
const data = await request.post('/auth/login', form.value);
// 假设返回的 data 中包含 token 和用户信息
localStorage.setItem('token', data.token);
localStorage.setItem('userInfo', JSON.stringify(data.user));
// 登录成功，跳转到首页
router.push('/');
} catch (error) {
// 错误信息已在拦截器中统一处理，这里可以补充一些UI提示
alert('登录失败: ' + error.message);
}
};
</script>

第三步：后端 – 实现登录接口与JWT鉴权

首先，安装必要依赖：npm install express jsonwebtoken bcryptjs dotenv cors

// src/app.ts
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import authRoutes from './routes/auth';

dotenv.config(); // 加载 .env 文件中的环境变量

const app = express();
const PORT = process.env.PORT || 3000;

// 中间件
app.use(cors()); // 处理跨域请求
app.use(express.json()); // 解析 JSON 格式的请求体

// 路由
app.use('/api/auth', authRoutes);

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

// src/routes/auth.ts
import express from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';
import { PrismaClient } from '@prisma/client'; // 假设使用Prisma ORM

const router = express.Router();
const prisma = new PrismaClient();
const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

// 用户登录
router.post('/login', async (req, res) => {
const { username, password } = req.body;

try {
// 1. 查找用户
const user = await prisma.user.findUnique({ where: { username } });
if (!user) {
return res.status(401).json({ code: 401, message: '用户名或密码错误' });
}

// 2. 验证密码 (使用bcrypt对比哈希值)
const isPasswordValid = await bcrypt.compare(password, user.passwordHash);
if (!isPasswordValid) {
return res.status(401).json({ code: 401, message: '用户名或密码错误' });
}

// 3. 生成JWT Token
const token = jwt.sign(
{ userId: user.id, username: user.username },
JWT_SECRET,
{ expiresIn: '24h' } // Token 24小时后过期
);

// 4. 返回成功信息 (注意：不要返回密码哈希)
res.json({
code: 200,
message: '登录成功',
data: {
token,
user: {
id: user.id,
username: user.username,
email: user.email,
},
},
});
} catch (error) {
console.error('登录错误:', error);
res.status(500).json({ code: 500, message: '服务器内部错误' });
}
});

export default router;

// src/middleware/auth.ts – JWT鉴权中间件
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

export interface AuthRequest extends Request {
user?: any; // 可以根据需要定义更精确的类型
}

export const authenticateToken = (
req: AuthRequest,
res: Response,
next: NextFunction
) => {
const authHeader = req.headers['authorization'];
const token = authHeader && authHeader.split(' ')[1]; // 格式：Bearer <token>

if (!token) {
return res.status(401).json({ code: 401, message: '访问令牌缺失' });
}

jwt.verify(token, JWT_SECRET, (err: any, user: any) => {
if (err) {
return res.status(403).json({ code: 403, message: '无效或过期的令牌' });
}
req.user = user; // 将解码后的用户信息挂载到request对象上
next(); // 鉴权通过，继续下一个中间件或路由处理
});
};

第四步：后端 – 受保护的商品发布接口

// src/routes/products.ts
import express from 'express';
import { authenticateToken } from '../middleware/auth';
import { PrismaClient } from '@prisma/client';

const router = express.Router();
const prisma = new PrismaClient();

// 发布商品 – 需要登录鉴权
router.post('/', authenticateToken, async (req: any, res) => {
// 现在 req.user 包含了JWT解码后的信息（如 userId）
const userId = req.user.userId;
const { title, description, price, category } = req.body;

// 简单的数据验证
if (!title || !price) {
return res.status(400).json({ code: 400, message: '标题和价格是必填项' });
}

try {
const newProduct = await prisma.product.create({
data: {
title,
description,
price: parseFloat(price),
category,
sellerId: userId, // 关联当前登录用户
},
});
res.json({ code: 200, message: '发布成功', data: newProduct });
} catch (error) {
console.error('发布商品错误:', error);
res.status(500).json({ code: 500, message: '发布失败' });
}
});

export default router;

4. 性能与安全：必须关注的底线

5. 生产环境避坑指南

写在最后

按照上面的步骤，你应该能够搭建起一个结构清晰、具备基础安全防护、易于部署的全栈毕业设计项目骨架。记住，毕业设计的核心是展示你系统性的工程实践能力和解决问题的能力，而不仅仅是功能的堆砌。

当你的单体应用顺利运行后，可以思考一个更有挑战性的问题：如果这个二手平台用户量激增，功能越来越复杂，如何将当前的单体架构逐步拆分为微服务？ 你可以从将“用户服务”、“商品服务”、“订单服务”拆分开开始思考，这涉及到服务间通信（如RPC、消息队列）、独立数据库、统一网关等知识，是向更高阶架构迈进的第一步。

希望这篇笔记能为你扫清一些障碍，祝你毕业设计顺利，拿到优评！