Spring Boot 整合 Vue.js 完全指南

Spring Boot 整合 Vue.js 完全指南

Spring Boot 和 Vue.js 是两种常用的技术栈，分别用于后端和前端开发。整合 Spring Boot 和 Vue.js 需要经过以下几个步骤：1、创建 Spring Boot 项目；2、创建 Vue.js 项目；3、配置 Spring Boot 以支持静态资源；4、在 Spring Boot 中集成 Vue.js 的构建输出；5、配置跨域支持；6、进行前后端联调测试。下面详细介绍这些步骤：

一、创建 Spring Boot 项目

1. 使用 Spring Initializr 创建一个新的 Spring Boot 项目，选择所需的依赖（如 Spring Web, Spring Data JPA 等）。
2. 下载并解压生成的项目文件。
3. 导入项目到你的 IDE 中（如 IntelliJ IDEA 或 Eclipse）。
4. 确保你的 Spring Boot 项目可以成功运行，测试端点可以通过 @RestController 和 @GetMapping 注解来实现。

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

二、创建 Vue.js 项目

1. 确保已经安装 Node.js 和 npm。
2. 使用 Vue CLI 创建一个新的 Vue 项目：

npm install -g @vue/cli
vue create my-vue-app

3. 选择默认的配置或根据需要定制配置。
4. 进入项目目录并启动开发服务器：

cd my-vue-app
npm run serve

5. 确保 Vue 项目能够在浏览器中正常运行。

三、配置 Spring Boot 以支持静态资源

1. 在 Spring Boot 项目的 src/main/resources 目录下创建一个 static 文件夹。
2. 将 Vue 项目构建后的静态文件（通常在 dist 目录中）复制到 static 文件夹中。
3. 修改 Spring Boot 的配置文件 application.properties 或 application.yml，添加以下配置：

spring.mvc.static-path-pattern=/static/

四、在 Spring Boot 中集成 Vue.js 的构建输出

1. 在 Vue 项目中，运行构建命令生成静态文件：

npm run build

2. 将生成的 dist 目录内容复制到 Spring Boot 项目的 src/main/resources/static 目录中。
3. 修改 Spring Boot 的主类，设置默认的欢迎页：

@Controller
public class HomeController {
    @RequestMapping("/")
    public String index() {
        return "index.html";
    }
}

五、配置跨域支持

1. 在 Spring Boot 项目中，创建一个配置类来允许跨域请求：

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 WebConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/").allowedOrigins("http://localhost:8080");
            }
        };
    }
}

2. 确保配置中的 allowedOrigins 与 Vue 开发服务器的地址一致。

六、进行前后端联调测试

1. 启动 Spring Boot 项目，确保后端服务在运行。
2. 在 Vue 项目中通过 axios 或 fetch 发起请求，测试前后端的联通性：

axios.get('/api/hello')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

3. 确保前端能够正确接收到后端的响应。

总结

通过以上步骤，成功地整合了 Spring Boot 和 Vue.js，使其共同构建一个完整的全栈应用。在实际项目中，可以根据需求进一步优化和扩展。建议在开发过程中，保持前后端项目的独立性，便于维护和升级。此外，使用 Vue.js 的热更新功能可以大幅提升开发效率，Spring Boot 的强大后端能力也将为前端提供稳定的数据支持。