Vue 结合 Spring Boot 实现首次全栈连接的详细教程
搭建前端项目总能带来不少乐趣，开发后端服务则让人觉得充满掌控力，但将二者打通连接的过程，却常常让人摸不着头脑。
我初次尝试将 Vue 与 Spring Boot 整合时，本以为能顺利跑通，却接连遇到接口无响应、CORS 跨域错误以及数据流转不清晰等问题。本文将以新手友好的方式，一步步带你完成 Vue 应用与 Spring Boot 后端的对接。
技术栈说明
- 前端：基于 Vite 的 Vue 框架
- 后端：Spring Boot
- 通信方式：RESTful API
步骤1：创建 Spring Boot 后端服务
先搭建一个简易的 RESTful 接口服务：
@RestController
@RequestMapping("/api/v1")
public class GreetingController {
@GetMapping("/greeting")
public String getGreeting() {
return "您好，来自 Spring Boot！";
}
}
启动 Spring Boot 应用后，访问地址 http://localhost:8080/api/v1/greeting，浏览器将显示返回的文本内容：您好，来自 Spring Boot！。
步骤2：创建 Vue 前端项目
使用 Vite 快速初始化 Vue 项目：
- 执行命令
npm create vite@latest - 进入项目目录：
cd 你的项目名称 - 安装依赖：
npm install - 启动开发服务：
npm run dev
项目启动后将运行在 http://localhost:5173。
步骤3：实现 Vue 与后端的接口调用
在 Vue 组件中调用后端接口，我们使用 <script setup> 语法简化代码：
<template>
<h1>{{ greetingText }}</h1>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const greetingText = ref('')
onMounted(async () => {
try {
const response = await fetch('http://localhost:8080/api/v1/greeting')
greetingText.value = await response.text()
} catch (error) {
console.error('获取后端数据失败:', error)
}
})
</script>
该代码会在组件挂载完成后，向后端发起请求并将返回的文本渲染到页面上。
步骤4：修复 CORS 跨域错误
直接运行项目大概率会遇到 CORS 错误，这是因为 Vue 开发服务运行在 localhost:5173，而 Spring Boot 服务运行在 localhost:8080，不同源的请求会被浏览器的同源策略拦截。
在 Spring Boot 的控制器类上添加 @CrossOrigin 注解，指定允许的前端源即可修复问题：
@CrossOrigin(origins = "http://localhost:5173")
@RestController
@RequestMapping("/api/v1")
public class GreetingController {
@GetMapping("/greeting")
public String getGreeting() {
return "您好，来自 Spring Boot！";
}
}
刷新 Vue 开发页面后，就能正常显示后端返回的内容了。
最终效果
配置完成后，Vue 应用将显示：您好，来自 Spring Boot！
实践总结
- 前后端不会自动连通，RESTful API 是二者之间的通信桥梁
- CORS 并非程序漏洞，而是浏览器的安全防护机制
- 从简易示例入手，能更清晰地理解完整的数据流转流程
核心经验
- 使用 RESTful API 作为前后端通信的标准方式
- 本地开发环境中务必处理跨域请求问题
- 集成前后端前，先单独测试后端接口的可用性
- 先从简单功能开始开发，再逐步构建复杂业务逻辑
后续拓展
掌握该基础对接流程后，可以尝试开发以下小型项目加深理解：
- 简易登录系统
- 待办事项管理应用
- 个人用户仪表盘
"清晰的认知胜过复杂的代码，干净的集成往往源于扎实的理解。"
