微前端架构实战：Vue3、React、Angular + Spring Boot 数据共享与通信方案详解

微前端架构实战：Vue3、React、Angular + Spring Boot 数据共享与通信方案详解

1. 引言

在现代 Web 开发中，前端微应用架构已成为大型项目的首选方案，特别是在企业级应用中，它可以提升系统的可维护性、团队协作效率和系统稳定性。本篇文章将介绍如何使用 Vue3、React、Angular 作为前端微应用，并结合 Spring Boot 作为后端服务，打造一个高效、可扩展的前后端分离架构。

---

2. 技术栈选型

前端：

• Vue3（用户管理微应用）
• React（设备监控微应用）
• Angular（报表分析微应用）
• Single SPA（微应用管理）
• Webpack / Vite（前端构建工具）

后端：

• Spring Boot（后端 API 服务）
• Spring Cloud Gateway（微服务网关）
• Spring Security + JWT（用户认证与权限管理）
• MySQL / PostgreSQL（数据库）
• Redis（缓存优化）

---

3. 前端微应用架构

3.1 微前端架构设计

采用 Single SPA 作为微前端框架，每个前端应用独立开发和部署，主应用负责微应用的注册和加载。

frontend/
│── main-app/          # 微前端主应用（Single SPA）
│── user-app/          # Vue3 用户管理微应用
│── monitor-app/       # React 设备监控微应用
│── report-app/        # Angular 报表分析微应用
backend/
│── api-gateway/       # Spring Cloud Gateway 作为 API 统一入口
│── user-service/      # 用户管理服务
│── monitor-service/   # 设备监控服务
│── report-service/    # 报表分析服务

---

4. Vue3 微应用（用户管理）

4.1 初始化 Vue3 微应用

使用 Vite 创建 Vue3 项目：

npm create vite@latest user-app --template vue
cd user-app
npm install

4.2 配置 Single SPA

安装 Single SPA 相关插件：

npm install single-spa-vue

修改 main.js：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import singleSpaVue from 'single-spa-vue';

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render: () => h(App),
  },
});

export const { bootstrap, mount, unmount } = vueLifecycles;

---

5. React 微应用（设备监控）

5.1 初始化 React 微应用

npx create-react-app monitor-app
cd monitor-app
npm install single-spa-react react-router-dom

5.2 配置 Single SPA

修改 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import singleSpaReact from 'single-spa-react';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
});

export const { bootstrap, mount, unmount } = lifecycles;

---

6. Angular 微应用（报表分析）

6.1 初始化 Angular 微应用

ng new report-app --routing
cd report-app
ng add single-spa-angular

6.2 配置 Single SPA

在 main.ts 添加：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

import singleSpaAngular from 'single-spa-angular';

const lifecycles = singleSpaAngular({
  bootstrapFunction: () => platformBrowserDynamic().bootstrapModule(AppModule),
});

export const { bootstrap, mount, unmount } = lifecycles;

---

7. Spring Boot 后端

7.1 用户管理微服务

@RestController
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/{id}")
    public ResponseEntity<User> getUserById(@PathVariable Long id) {
        return ResponseEntity.ok(userService.getUserById(id));
    }
}

7.2 设备监控微服务

@RestController
@RequestMapping("/devices")
public class DeviceController {

    @GetMapping("/{id}")
    public ResponseEntity<String> getDeviceStatus(@PathVariable Long id) {
        return ResponseEntity.ok("设备 " + id + " 正常运行");
    }
}

7.3 Spring Cloud Gateway 配置

spring:
  cloud:
    gateway:
      routes:
        - id: user-service
          uri: http://localhost:8081
          predicates:
            - Path=/users/**
        - id: monitor-service
          uri: http://localhost:8082
          predicates:
            - Path=/devices/**

---

8. 运行与部署

8.1 运行各微应用

分别进入各微应用目录并运行：

cd main-app && npm start
cd user-app && npm start
cd monitor-app && npm start
cd report-app && npm start

8.2 运行 Spring Boot 后端

cd user-service && mvn spring-boot:run
cd monitor-service && mvn spring-boot:run
cd report-service && mvn spring-boot:run

---

9. 微应用之间数据如何接收、获取？

在前端微应用架构下，不同的前端微应用（Vue3、React、Angular）如何进行数据共享和通信 是一个重要问题。由于微前端架构下的各微应用通常是独立的，它们拥有各自的状态管理和生命周期，因此传统的跨组件通信（如 Vuex、Redux）无法直接应用。常见的跨微应用数据通信方式包括：

1. 全局状态管理（基于 Event Bus 或 store）
2. URL 参数传递
3. 主应用通过 props 传递数据
4. 微应用之间通过 postMessage 进行通信
5. 使用 WebSocket 进行实时数据共享
6. 使用后端 API 共享数据

---

9.1 方式 1：使用 Event Bus 进行数据共享

适用于场景

• 适用于所有前端框架（Vue3、React、Angular）。
• 适用于非持久化数据，如简单的用户状态、主题色等。

实现方式

使用 CustomEvent + Window 对象 作为 Event Bus，主应用和各微应用均可监听和触发事件。

1️⃣ 在主应用创建 Event Bus

在 event-bus.js 创建全局事件总线：

// event-bus.js
export const eventBus = {
  on(event, callback) {
    window.addEventListener(event, callback);
  },
  emit(event, detail) {
    window.dispatchEvent(new CustomEvent(event, { detail }));
  },
  off(event, callback) {
    window.removeEventListener(event, callback);
  }
};

2️⃣ 在 Vue3 微应用中监听事件

import { eventBus } from "./event-bus";

onMounted(() => {
  eventBus.on("user-update", (event) => {
    console.log("收到用户数据:", event.detail);
  });
});

3️⃣ 在 React 微应用中触发事件

import { eventBus } from "./event-bus";

const updateUser = () => {
  eventBus.emit("user-update", { name: "张三", role: "admin" });
};

---

9.2 方式 2：使用 URL 参数进行数据传递

适用于场景

• 适用于数据可持久化的场景，如当前选中的用户、筛选条件等。
• 适用于不同微应用间传递少量数据。

实现方式

主应用在跳转子应用时携带参数：

window.history.pushState({}, "", "/user-app?userId=123");

然后在 Vue3/React/Angular 微应用中获取参数：

const queryParams = new URLSearchParams(window.location.search);
const userId = queryParams.get("userId");
console.log("当前用户 ID:", userId);

---

9.3 方式 3：主应用通过 Props 传递数据

适用于场景

• 适用于 Single SPA 框架，主应用可以通过 props 传递数据给微应用。
• 适用于用户信息、权限管理等。

实现方式

在 single-spa 中注册 Vue3 微应用：

registerApplication({
  name: "user-app",
  app: () => System.import("user-app"),
  activeWhen: ["/users"],
  customProps: { userData: { name: "张三", role: "admin" } }
});

然后在 Vue3 微应用 main.js 中获取：

export const { bootstrap, mount, unmount } = singleSpaVue({
  createApp,
  appOptions: {
    render: () => h(App),
    props: { userData }
  }
});

---

9.4 方式 4：微应用之间使用 postMessage 通信

适用于场景

• 适用于完全独立的应用（如部署在不同域名）。
• 适用于数据传输较大的场景（如文件、报表）。

实现方式

Vue3 微应用向 Angular 微应用发送数据：

window.postMessage({ type: "user-update", data: { name: "张三" } }, "*");

Angular 微应用监听并处理：

window.addEventListener("message", (event) => {
  if (event.data.type === "user-update") {
    console.log("收到用户更新:", event.data.data);
  }
});

---

9.5 方式 5：使用 WebSocket 实现实时数据共享

适用于场景

• 适用于需要实时数据更新的场景（如设备监控、消息通知）。
• 适用于多个微应用需要同步数据。

实现方式

在后端 Spring Boot 创建 WebSocket 服务器：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

在 Vue3 / React / Angular 微应用中连接 WebSocket：

const ws = new WebSocket("ws://localhost:8080/ws");

ws.onmessage = (event) => {
  console.log("收到实时数据:", event.data);
};

---

9.6 方式 6：使用后端 API 进行数据共享

适用于场景

• 适用于用户权限、报表数据等需要持久化存储的场景。
• 适用于所有微应用（Vue3、React、Angular）。

实现方式

在 Spring Boot 服务器创建 API：

@RestController
@RequestMapping("/api/user")
public class UserController {
    @GetMapping("/{id}")
    public ResponseEntity<User> getUser(@PathVariable Long id) {
        return ResponseEntity.ok(new User(id, "张三", "admin"));
    }
}

然后在 Vue3 / React / Angular 微应用中获取数据：

fetch("http://localhost:8080/api/user/123")
  .then(response => response.json())
  .then(data => console.log("用户数据:", data));

---

10. 选择合适的微应用通信方式

方式	适用场景	是否适合不同框架	是否实时
Event Bus	轻量级数据传输	✅	❌
URL 参数	页面跳转传参	✅	❌
Props 传递	主应用 -> 微应用	✅（仅 Single SPA）	❌
postMessage	独立域名应用间通信	✅	❌
WebSocket	实时数据共享	✅	✅
后端 API	持久化数据	✅	❌

---

11. 总结

本文介绍了Vue3、React、Angular + Spring Boot 的微前端架构，并详细讲解了六种微应用数据共享方式，帮助你在实际项目中选择合适的通信方案。如果你的项目涉及多个微应用，请根据业务需求选择最优的通信方式，以提高应用的性能和可维护性。🚀