Spring Boot + Vue.js 全栈开发：从前后端分离到高效部署，打造你的MVP利器！

文章目录

[一、为何选择 Spring Boot + Vue.js？全栈开发的"黄金搭档"！](#一、为何选择 Spring Boot + Vue.js？全栈开发的“黄金搭档”！)
二、项目初始化与基础架构搭建
- [2.1 后端：初始化 Spring Boot 项目](#2.1 后端：初始化 Spring Boot 项目)
- [2.2 前端：初始化 Vue.js 项目](#2.2 前端：初始化 Vue.js 项目)
- [2.3 核心配置：打通前后端通信与跨域！](#2.3 核心配置：打通前后端通信与跨域！)
- - [后端 CORS 配置 (`application.properties` 或 `application.yml`)](#后端 CORS 配置 (application.properties 或 application.yml))
  - 前端代理配置 (`vue.config.js`)
[三、前后端数据交互：构建你的第一个 RESTful API](#三、前后端数据交互：构建你的第一个 RESTful API)
- [3.1 后端：创建 RESTful API](#3.1 后端：创建 RESTful API)
- - 实体类 (`User.java`)
  - 控制器 (`UserController.java`)
- [3.2 前端：消费 RESTful API](#3.2 前端：消费 RESTful API)
- - 创建一个用户列表组件 (`UserList.vue`)
  - [在 `App.vue` 中使用它](#在 App.vue 中使用它)
四、全栈部署：将你的应用推向生产环境
- [4.1 前端打包与后端集成](#4.1 前端打包与后端集成)
- - 前端打包
  - 后端集成前端静态资源
- [4.2 部署 Spring Boot 应用](#4.2 部署 Spring Boot 应用)
- - 打包后端应用
  - [运行 Jar 包](#运行 Jar 包)
- [4.3 生产环境的数据库与配置](#4.3 生产环境的数据库与配置)
五、更进一步：提升你的全栈应用
- [5.1 认证与授权 (Spring Security)](#5.1 认证与授权 (Spring Security))
- [5.2 错误处理与日志](#5.2 错误处理与日志)
- [5.3 单元测试与集成测试](#5.3 单元测试与集成测试)
- [5.4 性能优化](#5.4 性能优化)
- [5.5 Docker 化部署](#5.5 Docker 化部署)
六、总结与展望

一、为何选择 Spring Boot + Vue.js？全栈开发的"黄金搭档"！

在现代Web应用开发中，前后端分离已成为主流。前端专注于用户体验和界面交互，后端则聚焦于业务逻辑和数据服务。在众多技术组合中，Spring Boot (后端) 和 Vue.js (前端) 无疑是一对备受推崇的"黄金搭档"。

为什么选择它们？

Spring Boot： Java生态的领军者，以其"约定大于配置"的理念，让后端开发变得极其高效。快速启动、自动配置、强大的生态（Spring Data, Spring Security等），是构建稳健、可扩展后端服务的首选。
Vue.js： 渐进式前端框架的代表，以其易学易用、性能优异、灵活的组件化开发而闻名。无论是小型项目还是大型单页应用，Vue 都能轻松驾驭。

这对组合能让你：

✅ 快速开发： 前后端各司其职，并行开发，大大缩短项目周期。
✅ 灵活部署： 前后端独立部署，便于微服务架构演进和弹性伸缩。
✅ 技术栈优势互补： Java的稳健与Vue的灵动完美结合，覆盖从数据到界面的全链路。
✅ 生态丰富： 遇到任何问题，两大社区都能提供海量资源和解决方案。

二、项目初始化与基础架构搭建

让我们从零开始，构建一个简单但完整的 Spring Boot + Vue.js 全栈项目。

2.1 后端：初始化 Spring Boot 项目

我们使用 Spring Initializr 快速生成一个 Spring Boot 项目。

访问地址： https://start.spring.io/
项目元数据：
- Project: Maven Project (或 Gradle Project，取决于你的偏好)
- Language: Java
- Spring Boot: 选择一个稳定的最新版本（例如 3.2.x 或 3.3.x SNAPSHOT 如果你想尝试最新功能）
- Group: com.example
- Artifact: demo-backend
- Package Name: com.example.demobackend
- Packaging: Jar
- Java: 17 或 21 (根据你的JDK版本)
添加依赖 (Dependencies)：
- Spring Web: 提供构建 RESTful API 的能力。
- Spring Data JPA: 简化数据库操作（可选，如果需要数据库）。
- H2 Database: 内存数据库，用于开发测试（可选，如果需要数据库）。
- Lombok: 简化 Java Bean 的编写（推荐）。

点击 Generate 下载项目，解压后导入你常用的 IDE（如 IntelliJ IDEA）。

2.2 前端：初始化 Vue.js 项目

使用 Vue CLI (或 Vite，如果追求极致速度) 创建 Vue.js 项目。

bash 复制代码

# 确保你已经安装了 Vue CLI
# npm install -g @vue/cli

# 创建 Vue 3 项目
vue create demo-frontend

# 选择 Vue 3 默认 preset
# ? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)

进入 demo-frontend 目录。

2.3 核心配置：打通前后端通信与跨域！

前后端分离的第一个挑战就是跨域 (CORS)。由于前后端运行在不同端口（甚至不同域名），浏览器会默认阻止跨域请求。我们需要在后端进行配置。

后端 CORS 配置 (`application.properties` 或 `application.yml`)

在 Spring Boot 项目的 src/main/resources/application.properties (或 application.yml) 中添加 CORS 配置。

yaml 复制代码

# application.yml
spring:
  # ... 其他配置

cors:
  allowed-origins: http://localhost:8080 # 你的Vue前端开发服务器地址
  allowed-methods: GET,POST,PUT,DELETE,OPTIONS
  allowed-headers: Authorization,Content-Type,X-Requested-With
  allow-credentials: true
  max-age: 3600

或者，你也可以在 Java 代码中更灵活地配置：

java 复制代码

// 后端 Spring Boot: src/main/java/com/example/demobackend/config/WebConfig.java

package com.example.demobackend.config;

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 implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 对所有API路径生效
                .allowedOrigins("http://localhost:8080") // 允许你的Vue前端域名/端口
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的HTTP方法
                .allowedHeaders("*") // 允许所有请求头
                .allowCredentials(true) // 允许发送Cookie
                .maxAge(3600); // 预检请求的缓存时间
    }
}

前端代理配置 (`vue.config.js`)

在 Vue.js 项目根目录创建或修改 vue.config.js 文件，配置开发服务器代理，将前端发往特定路径的请求转发到后端。

js 复制代码

// 前端 Vue.js: vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080, // 前端开发服务器端口，与后端配置的 allowed-origins 保持一致
    proxy: {
      '/api': { // 当请求路径以 /api 开头时，转发到后端
        target: 'http://localhost:8081', // 你的Spring Boot后端地址和端口
        changeOrigin: true, // 改变源，使其看起来像是从后端发出的请求
        pathRewrite: { '^/api': '' } // 重写路径，将 /api 移除
      }
    }
  }
})

注意： 确保你的 Spring Boot 后端默认端口（通常是 8080）与 Vue 前端开发服务器端口（通常也是 8080）冲突，可以在 Spring Boot 的 application.properties 中修改端口，例如：server.port=8081。

三、前后端数据交互：构建你的第一个 RESTful API

现在，我们来构建一个简单的用户管理功能，实现前后端的数据交互。

3.1 后端：创建 RESTful API

实体类 (`User.java`)

java 复制代码

// 后端 Spring Boot: src/main/java/com/example/demobackend/model/User.java
package com.example.demobackend.model;

import lombok.Data; // 使用 Lombok 简化 Getter/Setter 等

@Data // Lombok 注解，自动生成 Getter, Setter, toString, equals, hashCode
public class User {
    private Long id;
    private String username;
    private String email;
}

控制器 (`UserController.java`)

java 复制代码

// 后端 Spring Boot: src/main/java/com/example/demobackend/controller/UserController.java
package com.example.demobackend.controller;

import com.example.demobackend.model.User;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.atomic.AtomicLong;

@RestController // 标记为 RESTful 控制器
@RequestMapping("/api/users") // 所有方法的基础路径为 /api/users
public class UserController {

    private List<User> users = new ArrayList<>();
    private AtomicLong counter = new AtomicLong(); // 用于生成ID

    public UserController() {
        // 模拟一些初始数据
        users.add(new User(counter.incrementAndGet(), "zhangsan", "zhangsan@example.com"));
        users.add(new User(counter.incrementAndGet(), "lisi", "lisi@example.com"));
    }

    @GetMapping // GET /api/users
    public List<User> getAllUsers() {
        return users;
    }

    @GetMapping("/{id}") // GET /api/users/{id}
    public User getUserById(@PathVariable Long id) {
        return users.stream()
                .filter(user -> user.getId().equals(id))
                .findFirst()
                .orElse(null);
    }

    @PostMapping // POST /api/users
    public User createUser(@RequestBody User newUser) {
        newUser.setId(counter.incrementAndGet());
        users.add(newUser);
        return newUser;
    }

    @PutMapping("/{id}") // PUT /api/users/{id}
    public User updateUser(@PathVariable Long id, @RequestBody User updatedUser) {
        for (int i = 0; i < users.size(); i++) {
            if (users.get(i).getId().equals(id)) {
                updatedUser.setId(id); // 确保ID不变
                users.set(i, updatedUser);
                return updatedUser;
            }
        }
        return null; // 用户不存在
    }

    @DeleteMapping("/{id}") // DELETE /api/users/{id}
    public void deleteUser(@PathVariable Long id) {
        users.removeIf(user -> user.getId().equals(id));
    }
}

3.2 前端：消费 RESTful API

创建一个用户列表组件 (`UserList.vue`)

vue 复制代码

<template>
  <div class="user-list">
    <h2>用户列表</h2>
    <button @click="fetchUsers">刷新用户</button>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }} ({{ user.email }})
      </li>
    </ul>
    <h3>添加新用户</h3>
    <input v-model="newUser.username" placeholder="用户名" />
    <input v-model="newUser.email" placeholder="邮箱" />
    <button @click="createUser">添加</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios'; // 推荐使用 axios 进行 HTTP 请求

const users = ref([]);
const newUser = ref({ username: '', email: '' });

// 获取用户列表
const fetchUsers = async () => {
  try {
    // 通过代理配置，请求会自动转发到 http://localhost:8081/api/users
    const response = await axios.get('/api/users');
    users.value = response.data;
  } catch (error) {
    console.error('获取用户失败:', error);
  }
};

// 创建新用户
const createUser = async () => {
  try {
    const response = await axios.post('/api/users', newUser.value);
    console.log('用户创建成功:', response.data);
    newUser.value = { username: '', email: '' }; // 重置表单
    fetchUsers(); // 刷新列表
  } catch (error) {
    console.error('创建用户失败:', error);
  }
};

// 组件挂载时自动加载用户
onMounted(fetchUsers);
</script>

<style scoped>
.user-list {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  max-width: 600px;
  margin: 20px auto;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  background-color: #f9f9f9;
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 4px;
}
input {
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #36a372;
}
</style>

在 `App.vue` 中使用它

vue 复制代码

<template>
  <img alt="Vue logo" src="./assets/logo.png" style="width: 80px; margin-top: 20px;">
  <h1>全栈应用示例</h1>
  <UserList />
</template>

<script setup>
import UserList from './components/UserList.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

四、全栈部署：将你的应用推向生产环境

开发环境的代理和内存数据库在生产环境是不可行的。我们需要为生产环境进行打包和部署。

4.1 前端打包与后端集成

生产环境中，通常会将 Vue.js 的打包产物（静态文件）直接部署到 Spring Boot 的静态资源目录，由后端统一提供服务。

前端打包

bash 复制代码

# 进入前端项目目录
cd demo-frontend

# 执行打包命令
npm run build

打包完成后，你会看到 dist 目录下生成了静态文件（HTML, CSS, JS等）。

后端集成前端静态资源

将 demo-frontend/dist 目录下的所有文件复制到 Spring Boot 后端项目的 src/main/resources/static 目录下。

Spring Boot 会自动将 static 目录下的内容作为静态资源提供服务。当用户访问根路径 / 时，它会返回 index.html。

4.2 部署 Spring Boot 应用

打包后的 Spring Boot 应用是一个可执行的 Jar 包。

打包后端应用

bash 复制代码

# 进入后端项目目录
cd demo-backend

# 使用 Maven 打包
./mvnw clean package # Windows 用户可能需要使用 mvnw.cmd clean package

打包成功后，你会在 target 目录下找到 demo-backend-0.0.1-SNAPSHOT.jar (或类似名称) 的可执行 Jar 包。

运行 Jar 包

bash 复制代码

java -jar target/demo-backend-0.0.1-SNAPSHOT.jar

现在，你的 Spring Boot 应用会在其配置的端口（例如 8081）上运行，并同时提供后端 API 和前端静态资源。用户访问 http://localhost:8081 即可看到完整的应用！

4.3 生产环境的数据库与配置

在生产环境中，你不会使用 H2 内存数据库。通常会配置 MySQL、PostgreSQL 等外部数据库。

添加数据库依赖： 在 pom.xml 中添加对应数据库的 JDBC 驱动依赖。
配置数据库连接： 在 application.yml 或 application.properties 中配置数据库连接信息。

yaml 复制代码

# application.yml (生产环境数据库配置示例)
spring:
  datasource:
    url: jdbc:mysql://your_db_host:3306/your_database?useSSL=false&serverTimezone=UTC
    username: your_username
    password: your_password
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    hibernate:
      ddl-auto: update # 生产环境谨慎使用 update，通常是 none 或 validate
    show-sql: false

重要： 生产环境的数据库配置和敏感信息（如密码）应通过环境变量或外部配置中心来管理，而非直接硬编码在文件中。

五、更进一步：提升你的全栈应用

完成基础的全栈应用后，你可以考虑以下几点进行提升：

5.1 认证与授权 (Spring Security)

为你的后端 API 增加认证（例如 JWT）和授权功能，保护敏感接口。Vue.js 前端则负责登录流程和 Token 的管理。

5.2 错误处理与日志

前后端都应建立健壮的全局错误处理机制和完善的日志记录，便于问题定位和调试。

5.3 单元测试与集成测试

编写单元测试和集成测试，确保前后端代码的质量和稳定性。

5.4 性能优化

前端： 代码分割、懒加载、图片优化、组件性能优化。
后端： 数据库查询优化、缓存（Redis）、并发处理、异步编程。

5.5 Docker 化部署

将前后端应用打包成 Docker 镜像，实现更便捷、一致的容器化部署。结合 Docker Compose 可以一键启动整个全栈环境。

bash 复制代码

# Dockerfile for Spring Boot Backend
FROM openjdk:17-jdk-slim
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

# Dockerfile for Vue.js Frontend (Nginx serving static files)
FROM nginx:alpine
COPY ./dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

六、总结与展望

Spring Boot 与 Vue.js 的组合，为你提供了一套强大且高效的全栈开发解决方案。它既能让你快速构建 MVP (最小可行产品)，也能支持复杂企业级应用的开发。

掌握这种前后端分离的开发模式，不仅提升了你的项目开发效率，也为未来的微服务架构、云原生部署打下了坚实的基础。

现在，是时候动手实践，将你的奇思妙想变为现实了！你对 Spring Boot 和 Vue.js 的结合有哪些心得？在部署过程中遇到过哪些挑战？欢迎在评论区分享你的经验，一起学习成长！

---### 文章摘要生成方法

确定文章核心主题，提取文中关键论点或发现。保持客观中立，避免添加个人观点。

筛选文章中数据、案例或结论性陈述，用简洁语言概括。确保逻辑连贯，信息密度高。

控制摘要长度在256字以内，删除冗余修饰词。保留专业术语但避免过度复杂化。

检查摘要是否独立成文，无需回溯原文即可理解。核对是否准确反映文章重点无遗漏。

对于科技类文章，突出研究方法与创新点；人文类则侧重核心观点与论证脉络。

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多篇前端实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～

创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：

点个赞❤️ 让更多人看到优质内容

关注「前端极客探险家」🚀 每周解锁新技巧

收藏文章⭐️ 方便随时查阅

📢 特别提醒：

转载请注明原文链接，商业合作请私信联系

感谢你的阅读！我们下篇文章再见～ 💕

Spring Boot + Vue.js 全栈开发：从前后端分离到高效部署，打造你的MVP利器！

文章目录

一、为何选择 Spring Boot + Vue.js？全栈开发的"黄金搭档"！

二、项目初始化与基础架构搭建

2.1 后端：初始化 Spring Boot 项目

2.2 前端：初始化 Vue.js 项目

2.3 核心配置：打通前后端通信与跨域！

后端 CORS 配置 (application.properties 或 application.yml)

前端代理配置 (vue.config.js)

三、前后端数据交互：构建你的第一个 RESTful API

3.1 后端：创建 RESTful API

实体类 (User.java)

控制器 (UserController.java)

3.2 前端：消费 RESTful API

创建一个用户列表组件 (UserList.vue)

在 App.vue 中使用它

四、全栈部署：将你的应用推向生产环境

4.1 前端打包与后端集成

前端打包

后端集成前端静态资源

4.2 部署 Spring Boot 应用

打包后端应用

运行 Jar 包

4.3 生产环境的数据库与配置

五、更进一步：提升你的全栈应用

5.1 认证与授权 (Spring Security)

5.2 错误处理与日志

5.3 单元测试与集成测试

5.4 性能优化

5.5 Docker 化部署

六、总结与展望

后端 CORS 配置 (`application.properties` 或 `application.yml`)

前端代理配置 (`vue.config.js`)

实体类 (`User.java`)

控制器 (`UserController.java`)

创建一个用户列表组件 (`UserList.vue`)

在 `App.vue` 中使用它