Vue + Spring Boot 整合全解析

一、引言

在当今的Web开发领域，前后端分离架构已成为主流。Vue.js作为一款流行的前端框架，以其简洁易用和高效的特点深受开发者喜爱；Spring Boot则是Java后端开发中快速构建应用的利器。将Vue和Spring Boot整合，能够充分发挥两者的优势，打造出高性能、易维护的Web应用。本文将详细介绍如何进行Vue + Spring Boot的整合。

二、环境准备

前端环境：确保已安装Node.js，它是运行Vue项目所必需的。可从Node.js官网下载并安装。安装完成后，通过node -v和npm -v命令检查版本，确保安装成功。
后端环境：安装JDK（建议JDK 8及以上）和Maven。可从Oracle官网下载JDK，从Maven官网下载Maven。配置好相应的环境变量后，通过java -version和mvn -v命令验证安装。

三、创建Spring Boot后端项目

使用Spring Initializr快速创建项目：
访问Spring Initializr，在网页上进行项目初始化配置。选择Maven项目，语言为Java，Spring Boot版本可根据需求选择（这里以2.6.4为例）。在“Dependencies”中添加“Spring Web”依赖，它会帮助我们快速搭建起Web服务。点击“Generate”下载项目压缩包，解压后即可在IDE（如IntelliJ IDEA或Eclipse）中打开。
创建一个简单的Controller：
在src/main/java/com/yourpackage/controller目录下创建一个新的类，例如HelloController。代码如下：

package com.example.demo.controller;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class HelloController {@GetMapping("/api/hello")public String hello() {return "Hello from Spring Boot!";}
}

上述代码定义了一个简单的RESTful接口，当访问/api/hello时，会返回“Hello from Spring Boot!”。

四、创建Vue前端项目

使用Vue CLI创建项目：
打开命令行工具，运行以下命令创建Vue项目：

vue create vue - spring - boot - integration

按照提示选择预设配置，这里我们选择默认配置即可。创建完成后，进入项目目录：

cd vue - spring - boot - integration

编写前端页面调用后端接口：
在src/views目录下创建一个新的组件，例如Hello.vue。代码如下：

<template><div><h1>{{ message }}</h1></div>
</template><script>
export default {data() {return {message: ''}},mounted() {this.fetchData();},methods: {async fetchData() {try {const response = await fetch('http://localhost:8080/api/hello');const data = await response.text();this.message = data;} catch (error) {console.error('Error fetching data:', error);}}}
}
</script>

上述代码在页面加载时（mounted钩子函数），通过fetch方法调用后端的/api/hello接口，并将返回的数据显示在页面上。

配置路由：
在src/router/index.js中配置路由，引入刚刚创建的Hello.vue组件。代码如下：

import { createRouter, createWebHistory } from 'vue-router'
import Hello from '@/views/Hello.vue'const routes = [{path: '/',name: 'Hello',component: Hello}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

五、解决跨域问题

由于前端运行在一个端口（如http://localhost:8081），后端运行在另一个端口（如http://localhost:8080），会出现跨域问题。在Spring Boot后端项目中解决跨域问题很简单，只需创建一个配置类。在src/main/java/com/yourpackage/config目录下创建CorsConfig.java，代码如下：

package com.example.demo.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:8081").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*");}};}
}

上述代码配置了允许来自http://localhost:8081的跨域请求，支持常见的HTTP方法，并允许所有的请求头。

六、启动项目

启动Spring Boot后端项目：在IDE中直接运行Spring Boot项目的主类（通常带有@SpringBootApplication注解），或者在项目根目录下通过命令行运行mvn spring-boot:run，启动后控制台会显示项目启动成功的信息，后端服务监听在默认的8080端口。
启动Vue前端项目：在Vue项目根目录下运行npm run serve，启动后控制台会输出项目的访问地址，一般为http://localhost:8081。在浏览器中访问该地址，即可看到前端页面显示“Hello from Spring Boot!”，这表明Vue和Spring Boot成功整合。