基于微前端框架的多平台档案资源开发融合服务全流程实操

一、准备工作

1. 环境与工具安装

• Node.js 18.x LTS：直接下载安装包 https://nodejs.org/dist/v18.20.4/node-v18.20.4-x64.msi ，一路点击“下一步”安装
• VS Code： https://code.visualstudio.com/Download ，安装默认插件“Live Server”“Prettier”“ESLint”
• 轻量API网关工具Hutool-API（Java无需额外依赖环境，用嵌入式Tomcat）：下载完整JAR包 https://repo1.maven.org/maven2/cn/hutool/hutool-all/5.8.32/hutool-all-5.8.32.jar
• 本地JSON档案库示例：新建文件夹`local-archives`，里面放入预整理的结构化/非结构化JSON样本

2. 预整理本地档案资源

将已有零散的档案（如Word/PDF转文本+元数据、Excel转结构化数据）统一整理成JSON格式，分为两类：

• 结构化档案（如档案目录、借阅记录）：每个对象包含唯一ID、类型、名称、摘要、创建时间、存储路径
• 非结构化档案索引：仅存元数据+对应文件在本地的绝对路径，避免JSON过大

完整结构化档案样本`archive-directory.json`（可直接复制到`local-archives`）：

```json [ { "id": "AD-2024-0001", "type": "文书档案", "name": "XX公司2024年度技术创新立项报告", "summary": "涵盖AI档案检索、云存储融合两项核心技术立项内容", "create_time": "2024-01-15", "storage_path": "C:\\Users\\Public\\Documents\\archives\\doc\\AD-2024-0001.docx" }, { "id": "AD-2024-0002", "type": "声像档案", "name": "XX技术创新大会2024全程录像", "summary": "120分钟会议内容，包含技术方案演示、颁奖环节", "create_time": "2024-03-20", "storage_path": "C:\\Users\\Public\\Documents\\archives\\video\\AD-2024-0002.mp4" } ] ```

二、搭建轻量级档案API网关

1. 编写Hutool嵌入式网关代码

新建文件夹`api-gateway`，创建`ArchiveApi.java`文件，完整可直接编译运行代码如下：

```java import cn.hutool.core.io.FileUtil; import cn.hutool.json.JSONUtil; import cn.hutool.http.server.HttpServer; import cn.hutool.http.server.HttpServerRequest; import cn.hutool.http.server.HttpServerResponse; import cn.hutool.http.server.action.Action; import java.io.File; import java.io.IOException; import java.util.List; import java.util.Map; public class ArchiveApi { // 配置本地JSON档案库路径 private static final String LOCAL_ARCHIVE_DIR = "C:\\Users\\Public\\Documents\\local-archives"; // 配置监听端口 private static final int PORT = 8081; public static void main(String[] args) { HttpServer server = HttpServer.create(PORT); // 添加跨域支持（关键，避免多平台融合时的跨域报错） server.addFilter((req, res, chain) -> { res.addHeader("Access-Control-Allow-Origin", ""); res.addHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); res.addHeader("Access-Control-Allow-Headers", "Content-Type"); if ("OPTIONS".equals(req.getMethod())) { res.send(""); return; } chain.doFilter(req, res); }); // 获取所有档案目录的API server.addAction("/api/archives/list", new Action() { @Override public void doAction(HttpServerRequest req, HttpServerResponse res) throws IOException { File dirFile = new File(LOCAL_ARCHIVE_DIR); File[] jsonFiles = FileUtil.loopFiles(dirFile, file -> file.getName().endsWith(".json")); StringBuilder allArchives = new StringBuilder("["); boolean first = true; for (File jsonFile : jsonFiles) { String content = FileUtil.readUtf8String(jsonFile); List> list = JSONUtil.toList(content, Map.class); for (Map item : list) { if (!first) allArchives.append(","); allArchives.append(JSONUtil.toJsonStr(item)); first = false; } } allArchives.append("]"); res.write(allArchives.toString()); } }); // 按ID查询单个档案的API server.addAction("/api/archives/detail", new Action() { @Override public void doAction(HttpServerRequest req, HttpServerResponse res) throws IOException { String id = req.getParam("id"); File dirFile = new File(LOCAL_ARCHIVE_DIR); File[] jsonFiles = FileUtil.loopFiles(dirFile, file -> file.getName().endsWith(".json")); for (File jsonFile : jsonFiles) { String content = FileUtil.readUtf8String(jsonFile); List> list = JSONUtil.toList(content, Map.class); for (Map item : list) { if (id.equals(item.get("id"))) { res.write(JSONUtil.toJsonStr(item)); return; } } } res.write("{\"code\":404,\"msg\":\"档案不存在\"}"); } }); server.start(); System.out.println("档案API网关已启动，访问地址：http://localhost:8081"); } } ```

2. 启动API网关

• 确保本地已安装JDK 11+（没有的话去 https://www.oracle.com/java/technologies/downloads/java17 下载安装）
• 打开`cmd`，进入`api-gateway`文件夹，执行命令编译：javac -cp hutool-all-5.8.32.jar ArchiveApi.java
• 执行命令启动网关：java -cp ".;hutool-all-5.8.32.jar" ArchiveApi（注意Windows下用分号分隔类路径，Mac/Linux用冒号）

三、搭建微前端多平台融合服务

1. 初始化基座应用

打开VS Code，新建文件夹`fusion-service-base`，在终端执行以下命令：

```bash npm init -y npm install qiankun@2.10.16 vite@5.4.10 vite-plugin-qiankun@1.0.26 vue@3.4.38 ```

创建`index.html`（基座入口）：

```html

```

创建`vite.config.js`（基座配置）：

```javascript import { defineConfig } from 'vite'; import qiankun from 'vite-plugin-qiankun'; export default defineConfig({ server: { port: 8080, cors: true }, plugins: [ qiankun('fusion-service-base', { useDevMode: true }) ] }); ```

创建`main.js`（基座逻辑）：

```javascript import { registerMicroApps, start } from 'qiankun'; // 注册两个档案子应用：列表页、预览页 registerMicroApps([ { name: 'archive-list', entry: '//localhost:8082', container: 'sub-app-archive-list', activeRule: '/list' }, { name: 'archive-viewer', entry: '//localhost:8083', container: 'sub-app-archive-viewer', activeRule: '/viewer' } ]); // 启动qiankun start({ sandbox: { experimentalStyleIsolation: true } }); ```

2. 初始化档案列表子应用

在VS Code新建终端窗口，创建文件夹`sub-app-archive-list`，执行：

```bash npm init -y npm install vite@5.4.10 vite-plugin-qiankun@1.0.26 vue@3.4.38 element-plus@2.8.3 ```

创建`index.html`：

```html

```

创建`vite.config.js`：

```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import qiankun from 'vite-plugin-qiankun'; export default defineConfig({ server: { port: 8082, cors: true, origin: '//localhost:8082' }, plugins: [ vue(), qiankun('archive-list', { useDevMode: true }) ] }); ```

创建`main.js`：

```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import App from './App.vue'; let app = null; function render(props = {}) { const { container } = props; app = createApp(App); app.use(ElementPlus); app.mount(container ? container.querySelector('app') : 'app'); } if (!window.__POWERED_BY_QIANKUN__) { render(); } export async function bootstrap() {} export async function mount(props) { render(props); } export async function unmount() { app?.unmount(); } ```

创建`App.vue`：

```vue ```

3. 初始化档案预览子应用

类似列表子应用，新建`sub-app-archive-viewer`，端口设为8083，`App.vue`改为读取URL参数ID，调用API获取档案信息，显示在页面上（简单实现文本展示，如需支持PDF/视频预览可引入`vue-pdf-embed`或`video.js`）：

```vue ```

四、启动全流程验证

• 保持API网关的`cmd`窗口运行
• 在基座应用终端执行：npx vite
• 在列表子应用终端执行：npx vite
• 在预览子应用终端执行：npx vite
• 浏览器访问`http://localhost:8080/list`，点击“预览”跳转到对应页面，验证融合服务和档案资源获取是否正常