更新xml格式转换为json格式代码
This commit is contained in:
xiaozhang
parent
e560788e56
commit
6465951ed8
|
|
@ -13,6 +13,7 @@
|
|||
"qrcode": "^1.5.3",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5",
|
||||
"x2js": "^3.4.4",
|
||||
"xml2js": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -703,6 +704,14 @@
|
|||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.19.tgz",
|
||||
"integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw=="
|
||||
},
|
||||
"node_modules/@xmldom/xmldom": {
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
|
||||
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
|
|
@ -1268,6 +1277,14 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/x2js": {
|
||||
"version": "3.4.4",
|
||||
"resolved": "https://registry.npmmirror.com/x2js/-/x2js-3.4.4.tgz",
|
||||
"integrity": "sha512-yG/ThaBCgnsa3aoMPAe7QwDpcyU4D70hjXC4Y1lZSfD/Tgd0MpE19FnZZRAjekryw0c8cffpOt9zsPEiqktO6Q==",
|
||||
"dependencies": {
|
||||
"@xmldom/xmldom": "^0.8.3"
|
||||
}
|
||||
},
|
||||
"node_modules/xml2js": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/xml2js/-/xml2js-0.6.2.tgz",
|
||||
|
|
@ -1711,6 +1728,11 @@
|
|||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.19.tgz",
|
||||
"integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw=="
|
||||
},
|
||||
"@xmldom/xmldom": {
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
|
||||
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
|
|
@ -2101,6 +2123,14 @@
|
|||
"strip-ansi": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"x2js": {
|
||||
"version": "3.4.4",
|
||||
"resolved": "https://registry.npmmirror.com/x2js/-/x2js-3.4.4.tgz",
|
||||
"integrity": "sha512-yG/ThaBCgnsa3aoMPAe7QwDpcyU4D70hjXC4Y1lZSfD/Tgd0MpE19FnZZRAjekryw0c8cffpOt9zsPEiqktO6Q==",
|
||||
"requires": {
|
||||
"@xmldom/xmldom": "^0.8.3"
|
||||
}
|
||||
},
|
||||
"xml2js": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/xml2js/-/xml2js-0.6.2.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"qrcode": "^1.5.3",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5",
|
||||
"x2js": "^3.4.4",
|
||||
"xml2js": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import App from './App.vue'
|
|||
import router from './router'
|
||||
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@ const router = createRouter({
|
|||
path: '/test',
|
||||
name: 'test',
|
||||
component: () => import('../views/test.vue')
|
||||
},
|
||||
{
|
||||
path: '/xmltojson',
|
||||
name: 'xmltojson',
|
||||
component: () => import('../views/xmltojson.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
// 递归将 XML 转换为 JSON
|
||||
function convertToJson(xml) {
|
||||
let obj = {}; // 将 obj 声明为可变的变量
|
||||
|
||||
if (xml.nodeType === 1) { // element
|
||||
// 处理属性
|
||||
if (xml.attributes.length > 0) {
|
||||
obj['@attributes'] = {};
|
||||
for (let j = 0; j < xml.attributes.length; j++) {
|
||||
const attribute = xml.attributes.item(j);
|
||||
obj['@attributes'][attribute.nodeName] = attribute.nodeValue;
|
||||
}
|
||||
}
|
||||
} else if (xml.nodeType === 3) { // text
|
||||
obj = xml.nodeValue;
|
||||
}
|
||||
|
||||
// 处理子节点
|
||||
if (xml.hasChildNodes()) {
|
||||
for (let i = 0; i < xml.childNodes.length; i++) {
|
||||
const item = xml.childNodes.item(i);
|
||||
const nodeName = item.nodeName;
|
||||
if (typeof obj[nodeName] === 'undefined') {
|
||||
obj[nodeName] = convertToJson(item);
|
||||
} else {
|
||||
if (typeof obj[nodeName].push === 'undefined') {
|
||||
const old = obj[nodeName];
|
||||
obj[nodeName] = [];
|
||||
obj[nodeName].push(old);
|
||||
}
|
||||
obj[nodeName].push(convertToJson(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
export function xmlToJson(xml) {
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(xml, 'text/xml');
|
||||
return convertToJson(xmlDoc);
|
||||
}
|
||||
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
<template>
|
||||
<div class="background">
|
||||
<p class="company-name">贵州智信云科技有限公司</p>
|
||||
<div v-if="jsonData" style="padding-top: 20px;">
|
||||
<div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName">
|
||||
<p v-if="fieldLabels[fieldName]">{{ fieldLabels[fieldName] }}: {{ field['#text'] }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ jsonData }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="qrCodeUrls[0].qrCodeUrl" class="custom-qr-code" />
|
||||
|
|
@ -16,25 +14,15 @@
|
|||
import { ref, onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
|
||||
import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
|
||||
import useQRCodeGenerator from '../utils/QRCodeGenerator';// 导入二维码生成器useQRCodeGenerator函数
|
||||
import x2js from 'x2js'; // 首字母小写
|
||||
|
||||
const x2jsInstance = new x2js(); // 使用首字母小写的 x2js
|
||||
|
||||
const token = ref('');
|
||||
const data = ref('');
|
||||
const jsonData = ref(null);
|
||||
|
||||
// 定义字段的中文名称映射
|
||||
const fieldLabels = ({
|
||||
FIELD0033: '地址',
|
||||
FIELD0013: '规划 ',
|
||||
FIELD0035: '联系人',
|
||||
FIELD0037: '电话',
|
||||
FIELD0006: '建设条件',
|
||||
FIELD0007: '产业条件',
|
||||
// ID: 'id',
|
||||
// 添加其他字段的中文名称
|
||||
});
|
||||
|
||||
//定义二维码地址
|
||||
const qrCodeUrls = ref([
|
||||
useQRCodeGenerator('https://zwy.guizhoujc.com/inc/xmtzk/kc/show-kc.html?id=974420865978944870')
|
||||
|
|
@ -60,10 +48,8 @@
|
|||
try {
|
||||
const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
|
||||
data.value = response.data;
|
||||
// console.log(data.value);
|
||||
//调用xml转json的方法
|
||||
const json = xmlToJson(response.data);
|
||||
jsonData.value = json;
|
||||
jsonData.value = x2jsInstance.xml2js(data.value);
|
||||
console.log(jsonData.value);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
<template>
|
||||
<div class="background">
|
||||
<p class="company-name">企业列表</p>
|
||||
<div v-if="jsonData" style="padding-top: 20px;">
|
||||
<div v-for="(row, rowIndex) in jsonData.root.kczy.row" :key="rowIndex">
|
||||
<div v-for="(value, fieldName) in row" :key="fieldName">
|
||||
<p v-if="fieldLabels[fieldName]" @click="showCompanyInfo(value['#text'])">
|
||||
{{ fieldLabels[fieldName] }}: {{ value['#text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ jsonData }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -18,7 +12,9 @@ import { ref } from 'vue';
|
|||
import { useRouter } from 'vue-router'; // 使用 useRouter 获取 router 实例
|
||||
import axios from 'axios';
|
||||
import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
|
||||
import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
|
||||
import x2js from 'x2js'; // 首字母小写
|
||||
|
||||
const x2jsInstance = new x2js(); // 使用首字母小写的 x2js
|
||||
|
||||
const router = useRouter(); // 使用 useRouter 获取 router 实例
|
||||
|
||||
|
|
@ -26,19 +22,6 @@ const token = ref('');
|
|||
const data = ref('');
|
||||
const jsonData = ref(null);
|
||||
|
||||
// 定义字段的中文名称映射
|
||||
const fieldLabels = {
|
||||
FIELD0033: '公司',
|
||||
// ID: 'id',
|
||||
// 添加其他字段的中文名称
|
||||
};
|
||||
|
||||
const showCompanyInfo = (companyId, idValue) => {
|
||||
// 导航到公司信息页面，并传递公司ID和ID数值
|
||||
router.push({ name: 'index', params: { id: companyId} });
|
||||
};
|
||||
|
||||
|
||||
// 在组件加载时调用 fetchToken 函数
|
||||
fetchToken().then((response) => {
|
||||
if (response) {
|
||||
|
|
@ -52,10 +35,8 @@ const fetchData = async (token) => {
|
|||
try {
|
||||
const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
|
||||
data.value = response.data;
|
||||
// console.log(data.value);
|
||||
//调用xml转json的方法
|
||||
const json = xmlToJson(response.data);
|
||||
jsonData.value = json;
|
||||
// 将XML数据转换为JSON数据，传递的是 data.value 而不是 data
|
||||
jsonData.value = x2jsInstance.xml2js(data.value);
|
||||
console.log(jsonData.value);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>xml格式转json格式</h1>
|
||||
<span>{{ jsonData }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import x2js from 'x2js'; // 首字母小写
|
||||
import { fetchToken } from '../utils/getToken';
|
||||
|
||||
const x2jsInstance = new x2js(); // 使用首字母小写的 x2js
|
||||
|
||||
const token = ref('');
|
||||
const data = ref('');
|
||||
const jsonData = ref(null);
|
||||
|
||||
// 在组件加载时调用 fetchToken 函数
|
||||
fetchToken().then((response) => {
|
||||
if (response) {
|
||||
token.value = response;
|
||||
fetchData(response); // 获取 token 后调用 fetchData 函数
|
||||
}
|
||||
});
|
||||
// 加入 token 获取数据
|
||||
const fetchData = async (token) => {
|
||||
try {
|
||||
const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
|
||||
data.value = response.data;
|
||||
// 将XML数据转换为JSON数据，传递的是 data.value 而不是 data
|
||||
jsonData.value = x2jsInstance.xml2js(data.value);
|
||||
console.log(jsonData.value);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue