[教程]解锁Vue.js与Spring Boot完美融合：一步到位的集成实战攻略

发布于 2025-07-06 07:35:11

281

引言随着互联网技术的不断发展，前后端分离的开发模式已成为主流。Vue.js作为前端框架，以其简洁的语法和高效的组件化开发，深受开发者喜爱。Spring Boot作为后端框架，以其快速开发、自动配置等特...

引言

随着互联网技术的不断发展，前后端分离的开发模式已成为主流。Vue.js作为前端框架，以其简洁的语法和高效的组件化开发，深受开发者喜爱。Spring Boot作为后端框架，以其快速开发、自动配置等特性，简化了Java项目的开发流程。本文将详细介绍Vue.js与Spring Boot的完美融合，并提供一步到位的集成实战攻略。

一、Vue.js与Spring Boot简介

1. Vue.js

Vue.js是一个渐进式JavaScript框架，用于构建用户界面和单页面应用（SPA）。它具有以下特点：

响应式数据绑定：实现数据与视图的自动同步。
组件化开发：提高代码复用性和可维护性。
虚拟DOM：提高页面渲染性能。

2. Spring Boot

Spring Boot是一个基于Spring框架的快速开发平台，它简化了Java项目的配置和部署。Spring Boot具有以下特点：

自动配置：根据项目依赖自动配置Spring框架。
无代码生成和XML配置：简化项目配置。
嵌入式服务器：内置Tomcat、Jetty等服务器。

二、Vue.js与Spring Boot集成

1. 创建Vue.js项目

使用Vue CLI创建Vue.js项目：

vue create vue-spring-boot-project

2. 创建Spring Boot项目

使用Spring Initializr创建Spring Boot项目：

https://start.spring.io/

选择Maven或Gradle作为构建工具，添加Web、Thymeleaf等依赖。

3. 配置跨域请求

在Spring Boot项目中，添加CORS依赖：

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId>
</dependency>

在Spring Boot主类上添加@CrossOrigin注解：

@SpringBootApplication
@CrossOrigin
public class SpringBootVueApplication { public static void main(String[] args) { SpringApplication.run(SpringBootVueApplication.class, args); }
}

4. 创建API接口

在Spring Boot项目中创建API接口，供Vue.js调用：

@RestController
@RequestMapping("/api")
public class ApiController { @GetMapping("/data") public ResponseEntity<?> getData() { // 获取数据 List<Data> dataList = dataService.findAll(); return ResponseEntity.ok(dataList); }
}

5. 调用API接口

在Vue.js项目中，使用Axios调用API接口：

import axios from 'axios';
export default { methods: { fetchData() { axios.get('/api/data') .then(response => { this.dataList = response.data; }) .catch(error => { console.error(error); }); } }
}

三、实战案例

以下是一个简单的Vue.js与Spring Boot集成案例：

Vue.js项目：创建一个简单的待办事项列表应用。
Spring Boot项目：创建一个RESTful API，提供待办事项的增删改查功能。

1. Vue.js项目

<!DOCTYPE html>
<html>
<head> <title>待办事项列表</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body> <div id="app"> <h1>待办事项列表</h1> <input v-model="newTodo" placeholder="添加待办事项"> <button @click="addTodo">添加</button> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="removeTodo(index)">删除</button> </li> </ul> </div> <script> new Vue({ el: '#app', data: { todos: [], newTodo: '' }, methods: { addTodo() { this.todos.push(this.newTodo); this.newTodo = ''; }, removeTodo(index) { this.todos.splice(index, 1); } } }); </script>
</body>
</html>

2. Spring Boot项目

@RestController
@RequestMapping("/api")
public class TodoController { @GetMapping("/todos") public ResponseEntity<?> getAllTodos() { List<Todo> todos = todoService.findAll(); return ResponseEntity.ok(todos); } @PostMapping("/todos") public ResponseEntity<?> addTodo(@RequestBody Todo todo) { todoService.save(todo); return ResponseEntity.ok(todo); } @DeleteMapping("/todos/{id}") public ResponseEntity<?> deleteTodo(@PathVariable Long id) { todoService.delete(id); return ResponseEntity.ok().build(); }
}