如果你正在为毕业设计的技术选型发愁，或者已经决定做前后端分离项目却不知道从何下手，这篇文章就是为你准备的。前后端分离架构在近年来的毕业设计中越来越受欢迎——它不仅能体现你对现代Web开发的理解，还能让答辩时展示的系统更具专业感。
本文以Vue 3 + Spring Boot 3这一国内高校毕设中最主流的技术栈为例，手把手带你完成从环境搭建到项目部署的完整流程。无论你是计算机专业还是其他工科方向，只要毕设涉及Web系统开发，这套方法都能直接落地。全文约2000字，建议边看边敲代码。
为什么选择前后端分离做毕业设计
前后端分离架构将用户界面（前端）与业务逻辑和数据处理（后端）拆分为两个独立项目，通过API接口进行通信。这种模式在企业级开发中已成为标配，用在毕业设计中有几个明显优势：
- 技术栈清晰：前端专注交互，后端专注数据，职责边界明确
- 答辩展示效果好：可以分别演示前端页面和后端接口，体现完整技术能力
- 扩展性强：前后端可以独立迭代，方便后期加功能或换技术
- 符合行业趋势：企业招聘普遍要求前后端分离开发经验
| 常见技术组合： | 前端 | 后端 | 适用场景 |
|---|---|---|---|
| Vue 3 + Element Plus | Spring Boot + MyBatis | 管理系统、信息平台 | |
| React + Ant Design | Spring Boot + JPA | 复杂交互系统 | |
| 微信小程序 | Spring Boot + MyBatis | 移动端应用 | |
| UniApp | Spring Boot | 跨平台App |
本文以Vue 3 + Spring Boot + MySQL组合为例，这是最稳妥、资料最丰富的毕设技术选型。
环境准备与项目初始化
后端：Spring Boot项目搭建
推荐工具：IntelliJ IDEA（社区版免费）或 VS Code + Spring Boot Extension Pack
搭建步骤：
- 访问Spring Initializr（https://start.spring.io/）在线生成项目
- 选择配置：
- Project：Maven
- Language：Java 17（或21）
- Spring Boot：3.2.x
- Dependencies：Spring Web、Spring Data JPA、MySQL Driver、Lombok
- 下载后导入IDEA，运行
DemoApplication主类验证
关键配置文件（application.yml）：
server:
port: 8080
spring:
datasource:
url: jdbc:mysql://localhost:3306/bishe_db?useUnicode=true&characterEncoding=utf-8
username: root
password: your_password
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
hibernate:
ddl-auto: update
show-sql: true前端：Vue 3项目搭建
推荐工具：VS Code + Volar插件
搭建步骤：
# 安装Node.js 18+后执行
npm create vue@latest bishe-frontend
# 选择：TypeScript、Router、Pinia、ESLint
cd bishe-frontend
npm install
npm install element-plus axios
npm run dev项目结构建议：
src/
├── api/ # 接口请求封装
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── views/ # 页面视图
└── utils/ # 工具函数后端接口开发：从实体到Controller
分层架构设计
Spring Boot项目推荐采用经典的三层架构：
| 层级 | 职责 | 对应包名 |
|---|---|---|
| Controller | 接收请求、返回响应 | controller |
| Service | 业务逻辑处理 | service / service.impl |
| Repository | 数据访问层 | repository |
| Entity | 数据实体 | entity |
| DTO | 数据传输对象 | dto |
完整CRUD示例
以"用户管理"模块为例：
1. 实体类（Entity）：
@Entity
@Table(name = "user")
@Data
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String username;
private String email;
private Integer status;
private LocalDateTime createTime;
}2. Repository接口：
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
User findByUsername(String username);
}3. Service层：
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
public List<User> findAll() {
return userRepository.findAll();
}
public User save(User user) {
return userRepository.save(user);
}
}4. Controller层：
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> list() {
return userService.findAll();
}
@PostMapping
public User add(@RequestBody User user) {
return userService.save(user);
}
}前端页面开发：从路由到组件
Vue Router配置
// src/router/index.ts
const routes = [
{ path: '/', redirect: '/login' },
{ path: '/login', component: () => import('@/views/Login.vue') },
{
path: '/dashboard',
component: () => import('@/views/Layout.vue'),
children: [
{ path: 'user', component: () => import('@/views/UserManage.vue') }
]
}
]Axios请求封装
// src/api/request.ts
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080/api',
timeout: 10000
})
// 请求拦截器：添加token
request.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) config.headers.Authorization = `Bearer ${token}`
return config
})
export default request用户管理页面示例
<template>
<el-table :data="userList">
<el-table-column prop="username" label="用户名" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作">
<template #default="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import request from '@/api/request'
const userList = ref([])
onMounted(async () => {
const res = await request.get('/user')
userList.value = res.data
})
</script>跨域问题与联调技巧
什么是跨域
当前端（localhost:5173）调用后端（localhost:8080）时，浏览器会阻止请求，因为端口不同。这就是跨域（CORS）问题。
后端解决方案（推荐）
在Spring Boot中添加CORS配置：
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true);
}
}联调检查清单
- [ ] 后端服务已启动，端口8080可访问
- [ ] 前端
baseURL配置正确 - [ ] CORS配置已生效
- [ ] 浏览器控制台无红色报错
- [ ] 网络请求返回200状态码
调试技巧：打开浏览器开发者工具（F12）→ Network标签，观察请求是否发出、响应内容是什么。80%的联调问题在这里都能找到答案。
项目部署与上线
打包构建
后端打包：
mvn clean package
# 生成 target/xxx.jar
java -jar target/xxx.jar前端打包：
npm run build
# 生成 dist/ 目录服务器部署建议
| 组件 | 推荐方案 | 免费替代 |
|---|---|---|
| 云服务器 | 阿里云/腾讯云轻量应用服务器 | 无（学生有优惠） |
| 后端运行 | jar包 + nohup | systemd服务 |
| 前端托管 | Nginx静态资源 | 同上 |
| 数据库 | 服务器本地MySQL | 同上 |
| 域名 | 购买域名 + 备案 | 无 |
Nginx配置示例：
server {
listen 80;
server_name your-domain.com;
location / {
root /var/www/bishe-frontend/dist;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
}
}毕业设计前后端分离常见问题（FAQ）
前后端分离项目答辩时怎么演示？
建议按以下顺序演示：
- 展示项目整体架构图（前后端分离示意图）
- 演示前端页面功能和交互
- 展示后端接口文档（Swagger或Postman）
- 演示数据库表结构设计
- 说明部署方式和访问地址
Vue和Spring Boot的版本怎么选？
- Vue：推荐Vue 3（Composition API更现代），配合Element Plus组件库
- Spring Boot：推荐3.x版本（基于Java 17+），或2.7.x（基于Java 8）
- 注意：版本要匹配，Spring Boot 3需要Java 17+
前后端分离项目比传统单体项目难吗？
对初学者来说，前后端分离确实多了一层接口联调的工作。但优势在于：
- 前后端可以并行开发，不用互相等
- 前端有热更新，调试效率更高
- 项目结构更清晰，代码更易维护
建议预留额外1-2天处理跨域和接口对接问题。
毕业设计需要写接口文档吗？
强烈建议写！Swagger是最佳选择：
// 添加依赖后，访问 /swagger-ui.html 即可查看文档
@Operation(summary = "获取用户列表")
@GetMapping
public List<User> list() { ... }接口文档不仅是答辩加分项，也是你自己梳理思路的好工具。
没有服务器怎么展示项目？
- 方案1：购买学生优惠云服务器（约100元/年）
- 方案2：使用内网穿透工具（如cpolar、ngrok）临时演示
- 方案3：录制项目演示视频作为答辩备用
总结
前后端分离架构是毕业设计技术选型中的"安全牌"——它既体现了你对现代Web开发的理解，又能在答辩时展示出完整的技术栈能力。本文从环境搭建、接口开发、页面实现到部署上线，覆盖了一个Vue + Spring Boot项目的完整生命周期。
核心要点回顾：
- Vue 3 + Spring Boot是国内毕设最主流的技术组合
- 三层架构（Controller-Service-Repository）是后端开发的标准范式
- 跨域问题通过后端CORS配置即可解决
- 接口文档（Swagger）是答辩的加分项
- 部署阶段建议预留足够时间处理环境配置问题
如果你是第一次做前后端分离项目，建议先按本文的步骤搭建一个最小可运行版本（比如一个用户CRUD功能），确保前后端能正常通信后，再逐步添加业务功能。毕设不是追求技术炫技，而是把一套技术栈用熟、用透。
相关文章：