feat(fake-server): 模拟 XML 数据并增强 API 页面解析功能

- 新增 XML 模拟数据路由，提供示例 XML 文档 - 在 API 页面中集成 XML 请求和解析功能 - 使用 Axios 请求 XML 数据，并通过 DOMParser 解析 - 展示 XML 字符串和解析后的结果
2025-09-02 15:43:09 +08:00
parent f0a65d16f7
commit b9e6a139b7
2 changed files with 67 additions and 0 deletions
--- a/fake/xml.fake.ts
+++ b/fake/xml.fake.ts
@@ -0,0 +1,26 @@
+import { defineFakeRoute } from 'vite-plugin-fake-server/client';
+
+// 通过 rawResponse 返回 XML 文本，便于在浏览器端演示 XML 解析
+export default defineFakeRoute([
+  {
+    method: 'GET',
+    url: '/xml/sample',
+    rawResponse(_req, res) {
+      // 这里模拟一个简单的 XML 文档
+      const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<note>
+  <to>George</to>
+  <from>John</from>
+  <heading>Reminder</heading>
+  <body>Don't forget the meeting at 3 PM today.</body>
+  <meta>
+    <id>42</id>
+    <createdAt>2025-09-02T10:00:00Z</createdAt>
+  </meta>
+</note>`;
+
+      res.writeHead(200, { 'Content-Type': 'application/xml; charset=UTF-8' });
+      res.end(xml);
+    },
+  },
+]);
--- a/src/pages/Page/API.page.vue
+++ b/src/pages/Page/API.page.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import axios from 'axios';
+
 const baseURL = '/fake-api';

 let fakeApiResult = $ref<null | Record<string, unknown>>(null);
@@ -9,6 +11,40 @@ onMounted(() => {
    .then((json) => (fakeApiResult = json));
 });

+// 使用 axios 请求 XML，并演示以文本获取后用 DOMParser 解析
+// 选择此方式的原因：可控性更强，便于处理编码、容错与字段抽取策略
+let xmlText = $ref<string | null>(null);
+let xmlParsed = $ref<Record<string, string> | null>(null);
+
+onMounted(async () => {
+  try {
+    const res = await axios.get<string>(`${baseURL}/xml/sample`, {
+      responseType: 'text',
+      headers: { Accept: 'application/xml' },
+      transformResponse: [(data: string) => data],
+    });
+    xmlText = res.data;
+
+    // 将 XML 字符串解析为 Document，再选择性抽取业务所需字段
+    const doc = new DOMParser().parseFromString(res.data, 'application/xml');
+    const pick = (selector: string) => doc.querySelector(selector)?.textContent?.trim() ?? '';
+    xmlParsed = {
+      to: pick('to'),
+      from: pick('from'),
+      heading: pick('heading'),
+      body: pick('body'),
+      id: pick('meta > id'),
+      createdAt: pick('meta > createdAt'),
+    };
+
+    // 备用方案：直接请求为 Document（部分运行环境可能不支持）
+    // const docRes = await axios.get<Document>(`${baseURL}/xml/sample`, { responseType: 'document' });
+    // console.log('Document:', docRes.data);
+  } catch (error) {
+    console.error('XML 请求失败: ', error);
+  }
+});
+
 /* fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json)); */
@@ -22,6 +58,11 @@ onMounted(() => {
 <template>
  <pre>{{ JSON.stringify(fakeApiResult, null, 2) }}</pre>
  <!-- <div>{{ npmRegistryApiResult?.['_id'] }}</div> -->
+  <h3>XML 字符串</h3>
+  <pre class="break-all whitespace-pre-wrap">{{ xmlText }}</pre>
+
+  <h3>解析后的结果</h3>
+  <pre>{{ xmlParsed }}</pre>
 </template>

 <style scoped></style>