一、引言

在當今的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

2. 編寫前端頁面調用后端接口：
   在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接口，并將返回的數據顯示在頁面上。

3. 配置路由：
   在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方法，并允許所有的請求頭。

六、啟動項目

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的整合開發。