examples/vue-ts-example
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 XML 模拟数据路由，提供示例 XML 文档
- 在 API 页面中集成 XML 请求和解析功能
- 使用 Axios 请求 XML 数据，并通过 DOMParser 解析
- 展示 XML 字符串和解析后的结果
This commit is contained in:
严浩
2025-09-02 15:43:09 +08:00
parent f0a65d16f7
commit b9e6a139b7
2 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
fake/xml.fake.ts Normal file
View File

@@ -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);
},
},
]);

41
src/pages/Page/API.page.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import axios from 'axios';
const baseURL = '/fake-api'; const baseURL = '/fake-api';
let fakeApiResult = $ref<null | Record<string, unknown>>(null); let fakeApiResult = $ref<null | Record<string, unknown>>(null);
@@ -9,6 +11,40 @@ onMounted(() => {
.then((json) => (fakeApiResult = json)); .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') /* fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json()) .then((response) => response.json())
.then((json) => console.log(json)); */ .then((json) => console.log(json)); */
@@ -22,6 +58,11 @@ onMounted(() => {
<template> <template>
<pre>{{ JSON.stringify(fakeApiResult, null, 2) }}</pre> <pre>{{ JSON.stringify(fakeApiResult, null, 2) }}</pre>
<!-- <div>{{ npmRegistryApiResult?.['_id'] }}</div> --> <!-- <div>{{ npmRegistryApiResult?.['_id'] }}</div> -->
<h3>XML 字符串</h3>
<pre class="break-all whitespace-pre-wrap">{{ xmlText }}</pre>
<h3>解析后的结果</h3>
<pre>{{ xmlParsed }}</pre>
</template> </template>
<style scoped></style> <style scoped></style>