一、引言

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

二、环境准备

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

三、创建Spring Boot后端项目

1. 使用Spring Initializr快速创建项目：

   访问Spring Initializr，在网页上进行项目初始化配置。选择Maven项目，语言为Java，Spring Boot版本可根据需求选择（这里以2.6.4为例）。在“Dependencies”中添加“Spring Web”依赖，它会帮助我们快速搭建起Web服务。点击“Generate”下载项目压缩包，解压后即可在IDE（如IntelliJ IDEA或Eclipse）中打开。

2. 创建一个简单的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前端项目

1. 使用Vue CLI创建项目：

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

vue create vue - spring - boot - integration

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

cd vue - spring - boot - integration

1. 编写前端页面调用后端接口：

   在src/views目录下创建一个新的组件，例如Hello.vue。代码如下：

  

    
{{ message }}
  


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);
      }
    }
  }
}

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

1. 配置路由：

   在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 {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                  .allowedOrigins("http://localhost:8081")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*");
            }
        };
    }
}

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

六、启动项目

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

七、总结

通过以上步骤，我们成功地将Vue和Spring Boot进行了整合。这种前后端分离的架构模式不仅提高了开发效率，也使项目的维护和扩展更加容易。在实际项目中，可以根据需求进一步完善前后端的功能，如添加用户认证、数据库操作等。希望本文能帮助你快速上手Vue + Spring Boot的整合开发。