在现代Web开发中，前后端分离架构已经成为一个广泛应用的模式。作为Java开发者，我们可以使用Spring Boot构建后端服务，而Vue.js是一个非常流行的前端框架。本文将详细介绍如何在Spring Boot项目中集成Vue.js，实现一个完整的前后端分离应用。

一、项目结构设计

我们首先需要明确项目结构。在经典的前后端分离开发中，通常会有两个独立的模块：

  1. Spring Boot后端模块：负责提供RESTful API服务。
  2. Vue前端模块：负责实现用户界面，调用后端API获取和展示数据。

目录结构可能如下：

/my-app
|-- /backend  （Spring Boot项目）
|-- /frontend （Vue.js项目）

二、创建Spring Boot后端项目

  1. 生成Spring Boot项目：可以使用Spring Initializr生成骨架项目。选择Web依赖以便于构建RESTful服务。
  2. 开发API接口：创建一个简单的Controller，例如：
@RestController
@RequestMapping("/api")
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, Vue!";
    }
}
  1. 配置跨域支持：为了让Vue前端能够访问我们的Spring Boot后端，需要配置CORS。
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080"); // Vue.js的开发服务器地址
    }
}

三、创建Vue前端项目

  1. 使用Vue CLI创建项目：在/frontend目录下运行：
vue create my-vue-app

选择默认配置或者根据需要选择其他配置项。

  1. 开发Vue组件：在src/components目录下创建一个组件，比如HelloWorld.vue，并在App.vue中引入。
<template>
  <div>
    <h1>Vue 前端</h1>
    <button @click="fetchData">获取数据</button>
    <p>{ { message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8080/api/hello')
        .then(response => {
          this.message = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

四、运行与测试

  1. 运行Spring Boot后端
cd backend
mvn spring-boot:run
  1. 运行Vue前端
cd frontend/my-vue-app
npm run serve
  1. 测试应用

在浏览器中访问http://localhost:8080，点击“获取数据”按钮，应该可以看到通过Spring Boot API返回的消息。

五、构建和部署

在开发阶段，我们通常在本地分别启动前后端服务。在生产环境中，可以通过以下方式进行构建和部署：

  1. 构建Vue应用：运行npm run build生成静态文件。
  2. 将静态文件集成到Spring Boot项目中：可以通过将生成的静态文件复制到Spring Boot的resources/static目录中。
# 在 frontend/my-vue-app 中执行
npm run build

# 将生成的静态文件复制到后端的static目录
cp -r dist/* ../backend/src/main/resources/static/
  1. 重新打包并部署Spring Boot应用。

通过这种方式，我们的Spring Boot项目将同时作为前后端的托管环境。

通过这篇指南，你应该能够构建一个完整的Spring Boot + Vue.js项目。享受开发过程中的乐趣吧！如果你对本文有任何疑问或建议，欢迎留言讨论。