毕业设计前后端分离开发实战：Vue、Spring Boot项

如果你正在为毕业设计的技术选型发愁，或者已经决定做前后端分离项目却不知道从何下手，这篇文章就是为你准备的。前后端分离架构在近年来的毕业设计中越来越受欢迎——它不仅能体现你对现代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功能），确保前后端能正常通信后，再逐步添加业务功能。毕设不是追求技术炫技，而是把一套技术栈用熟、用透。

相关文章：

"毕业设计前后端分离开发实战：Vue+Spring Boot项目从零搭建指南"