詳解vue2如何處理xml格式的數(shù)據(jù)
更新時(shí)間：2024年03月22日 08:52:46 作者：fruge
這篇文章主要為大家詳細(xì)介紹了在vue2中如何處理xml格式的數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
前言
最近看見(jiàn)csdn有Rss訂閱這個(gè)功能，但發(fā)現(xiàn)這個(gè)接口響應(yīng)的數(shù)據(jù)格式不是常用的Json格式而是xml，即下圖的格式。
附響應(yīng)的代碼
<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[amoureux555的博客]]></title><description><![CDATA[前端、js、npm、node、css、html]]></description><link>https://blog.csdn.net/qq_46123200</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright © qq_46123200]]></copyright><item><title><![CDATA[【已解決】Vue 3+TS項(xiàng)目，無(wú)法找到模塊“XXX”的聲明文件，項(xiàng)目報(bào)錯(cuò)無(wú)法找到聲明文件]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136903232</link><guid>https://blog.csdn.net/qq_46123200/article/details/136903232</guid><author>qq_46123200</author><pubDate>Thu, 21 Mar 2024 11:28:26 +0800</pubDate><description><![CDATA[【已解決】Vue 3+TS項(xiàng)目，無(wú)法找到模塊“XXX”的聲明文件，項(xiàng)目報(bào)錯(cuò)無(wú)法找到聲明文件]]></description><category></category></item><item><title><![CDATA[無(wú)法找到模塊“pinia-plugin-persist”的聲明文件。“c:/Users/16566/Desktop/demo/，pinia持久化依賴報(bào)錯(cuò)，解決親測(cè)有效]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136882974</link><guid>https://blog.csdn.net/qq_46123200/article/details/136882974</guid><author>qq_46123200</author><pubDate>Wed, 20 Mar 2024 17:27:05 +0800</pubDate><description><![CDATA[無(wú)法找到模塊“pinia-plugin-persist”的聲明文件。“c:/Users/16566/Desktop/demo/，pinia持久化依賴報(bào)錯(cuò)，解決親測(cè)有效]]></description><category></category></item><item><title><![CDATA[關(guān)于vue輪播vue-seamless-scroll自動(dòng)滾動(dòng)插件復(fù)制出來(lái)的數(shù)據(jù)點(diǎn)擊事件無(wú)效]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136850733</link><guid>https://blog.csdn.net/qq_46123200/article/details/136850733</guid><author>qq_46123200</author><pubDate>Wed, 20 Mar 2024 08:00:00 +0800</pubDate><description><![CDATA[vue-seamless-scroll 滾動(dòng)插件的使用及循環(huán)的列表點(diǎn)擊事件不生效的解決方案,vue-seamless-scroll 點(diǎn)擊click失效]]></description><category></category></item><item><title><![CDATA[vue2中使用vue-seamless-scroll時(shí)出現(xiàn)數(shù)據(jù)重復(fù)或者樣式錯(cuò)亂問(wèn)題]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136841560</link><guid>https://blog.csdn.net/qq_46123200/article/details/136841560</guid><author>qq_46123200</author><pubDate>Tue, 19 Mar 2024 14:19:21 +0800</pubDate><description><![CDATA[vue2中使用vue-seamless-scroll時(shí)出現(xiàn)數(shù)據(jù)重復(fù)或者樣式錯(cuò)亂問(wèn)題，前端使用vue-seamless-scroll出現(xiàn)數(shù)據(jù)重復(fù)或者樣式錯(cuò)亂問(wèn)題，部分沒(méi)樣式，上下樣式不一樣]]></description><category></category></item><item><title><![CDATA[vue2 實(shí)現(xiàn)數(shù)字滾動(dòng)效果，翻頁(yè)效果]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136821291</link><guid>https://blog.csdn.net/qq_46123200/article/details/136821291</guid><author>qq_46123200</author><pubDate>Tue, 19 Mar 2024 08:00:00 +0800</pubDate><description><![CDATA[vue2 實(shí)現(xiàn)數(shù)字，數(shù)值自動(dòng)滾動(dòng)效果，翻頁(yè)效果，引入直接使用]]></description><category></category></item><item><title><![CDATA[vscode中Chinese (Simplified)漢化無(wú)效解決方法]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136738457</link><guid>https://blog.csdn.net/qq_46123200/article/details/136738457</guid><author>qq_46123200</author><pubDate>Fri, 15 Mar 2024 14:23:15 +0800</pubDate><description><![CDATA[vscode中Chinese (Simplified)漢化無(wú)效解決方法]]></description><category></category></item><item><title><![CDATA[vue項(xiàng)目如何禁止屏幕縮放，vue項(xiàng)目進(jìn)行瀏覽器進(jìn)行縮放]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136507090</link><guid>https://blog.csdn.net/qq_46123200/article/details/136507090</guid><author>qq_46123200</author><pubDate>Wed, 06 Mar 2024 15:13:45 +0800</pubDate><description><![CDATA[vue項(xiàng)目如何禁止屏幕縮放，vue項(xiàng)目進(jìn)行瀏覽器進(jìn)行縮放]]></description><category></category></item><item><title><![CDATA[windows系統(tǒng)下，如何給文件夾添加備注？文件夾查看備注]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136484529</link><guid>https://blog.csdn.net/qq_46123200/article/details/136484529</guid><author>qq_46123200</author><pubDate>Wed, 06 Mar 2024 10:07:43 +0800</pubDate><description><![CDATA[windows系統(tǒng)下，如何給文件夾添加備注？文件夾查看備注]]></description><category></category></item><item><title><![CDATA[Failed to load module script: Expected a JavaScript module script but the server responded with a MI]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136483060</link><guid>https://blog.csdn.net/qq_46123200/article/details/136483060</guid><author>qq_46123200</author><pubDate>Tue, 05 Mar 2024 16:43:12 +0800</pubDate><description><![CDATA[項(xiàng)目打包報(bào)錯(cuò)`Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.` ]]></description><category></category></item><item><title><![CDATA[vscode 使用ssh進(jìn)行遠(yuǎn)程開(kāi)發(fā) (remote-ssh)，首次連接及后續(xù)使用，詳細(xì)介紹]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136193576</link><guid>https://blog.csdn.net/qq_46123200/article/details/136193576</guid><author>qq_46123200</author><pubDate>Mon, 04 Mar 2024 16:47:20 +0800</pubDate><description><![CDATA[vscode 使用ssh進(jìn)行遠(yuǎn)程開(kāi)發(fā) (remote-ssh)，首次連接及后續(xù)使用，詳細(xì)介紹]]></description><category></category></item><item><title><![CDATA[前端 Vue啟動(dòng)本地（.exe）文件]]></title><link>https://blog.csdn.net/qq_46123200/article/details/136191265</link><guid>https://blog.csdn.net/qq_46123200/article/details/136191265</guid><author>qq_46123200</author><pubDate>Tue, 20 Feb 2024 15:41:10 +0800</pubDate><description><![CDATA[前端 Vue啟動(dòng)本地（.exe）文件]]></description><category></category></item><item><title><![CDATA[ubuntu 20.04系統(tǒng)，桌面有個(gè)文件夾名為0.7.0，每次系統(tǒng)啟動(dòng)后都需要打開(kāi)終端，進(jìn)入0.7.0文件夾，然后執(zhí)行命令./webrtc-streamer命令，如何設(shè)置開(kāi)機(jī)自動(dòng)打開(kāi)終端執(zhí)行]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135869527</link><guid>https://blog.csdn.net/qq_46123200/article/details/135869527</guid><author>qq_46123200</author><pubDate>Fri, 26 Jan 2024 16:29:24 +0800</pubDate><description><![CDATA[ubuntu 20.04系統(tǒng)，桌面有個(gè)文件夾名為0.7.0，每次系統(tǒng)啟動(dòng)后都需要打開(kāi)終端，進(jìn)入0.7.0文件夾，然后執(zhí)行命令./webrtc-streamer命令，如何設(shè)置開(kāi)機(jī)自動(dòng)打開(kāi)終端執(zhí)行]]></description><category></category></item><item><title><![CDATA[VMware 17 中 安裝 Ubuntu 系統(tǒng)，系統(tǒng)中安裝todesk與向日葵。其他設(shè)備無(wú)法通過(guò)todesk和向日葵遠(yuǎn)控問(wèn)題]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135840220</link><guid>https://blog.csdn.net/qq_46123200/article/details/135840220</guid><author>qq_46123200</author><pubDate>Thu, 25 Jan 2024 11:30:02 +0800</pubDate><description><![CDATA[todesk連接ubuntu顯示當(dāng)前系統(tǒng)并無(wú)桌面環(huán)境，或無(wú)顯示器，無(wú)法顯示遠(yuǎn)程桌面，您需要自行安裝X11桌面環(huán)境，或者使用終端文件功能]]></description><category></category></item><item><title><![CDATA[ubuntu 20.04 使用 webrtc-streamer自動(dòng)退出，報(bào)錯(cuò)GLIBC 問(wèn)題解決方法]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135780846</link><guid>https://blog.csdn.net/qq_46123200/article/details/135780846</guid><author>qq_46123200</author><pubDate>Tue, 23 Jan 2024 19:21:40 +0800</pubDate><description><![CDATA[Ubuntu 20.04 部署webrtc-streamer視頻流遇到的問(wèn)題，及解決方法。webrtc-streamer報(bào)錯(cuò)、啟動(dòng)不起來(lái)。rtsp視頻流播放失敗問(wèn)題。親測(cè)有效]]></description><category></category></item><item><title><![CDATA[Ubuntu 常用命令、docker 常用命令、unzip常用命令、tar常用命令]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135755440</link><guid>https://blog.csdn.net/qq_46123200/article/details/135755440</guid><author>qq_46123200</author><pubDate>Tue, 23 Jan 2024 09:04:56 +0800</pubDate><description><![CDATA[ubuntu 復(fù)制文件夾下文件到其他文件夾下。查看容器的命令（無(wú)論運(yùn)行還是停止）查看正在運(yùn)行容器的命令。]]></description><category></category></item><item><title><![CDATA[windows 11安裝VMware 17 ，VMware安裝Ubuntu 20.4，ssh傳文件]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135749655</link><guid>https://blog.csdn.net/qq_46123200/article/details/135749655</guid><author>qq_46123200</author><pubDate>Mon, 22 Jan 2024 16:18:35 +0800</pubDate><description><![CDATA[小白都能學(xué)會(huì)的，在windows 11安裝VMware 17 ，VMware安裝Ubuntu 20.4，ssh傳文件手把手教你]]></description><category></category></item><item><title><![CDATA[【ubuntu】ubuntu 20.04安裝docker，使用nginx部署前端項(xiàng)目，nginx.conf文件配置]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135615589</link><guid>https://blog.csdn.net/qq_46123200/article/details/135615589</guid><author>qq_46123200</author><pubDate>Tue, 16 Jan 2024 10:24:39 +0800</pubDate><description><![CDATA[ubuntu 20.04安裝docker，使用nginx部署前端項(xiàng)目]]></description><category></category></item><item><title><![CDATA[【ubuntu】docker中如何ping其他ip或外網(wǎng)]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135608274</link><guid>https://blog.csdn.net/qq_46123200/article/details/135608274</guid><author>qq_46123200</author><pubDate>Mon, 15 Jan 2024 18:39:41 +0800</pubDate><description><![CDATA[docker中如何ping其他ip或外網(wǎng)]]></description><category></category></item><item><title><![CDATA[級(jí)聯(lián)選擇器el-cascader根據(jù)下拉數(shù)據(jù)的id獲取所對(duì)應(yīng)的文字]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135193901</link><guid>https://blog.csdn.net/qq_46123200/article/details/135193901</guid><author>qq_46123200</author><pubDate>Mon, 25 Dec 2023 10:39:23 +0800</pubDate><description><![CDATA[級(jí)聯(lián)選擇器el-cascader根據(jù)下拉數(shù)據(jù)的id獲取所對(duì)應(yīng)的文字]]></description><category></category></item><item><title><![CDATA[【DataV】DataV組件庫(kù)——更新數(shù)據(jù)視圖不更新]]></title><link>https://blog.csdn.net/qq_46123200/article/details/135192425</link><guid>https://blog.csdn.net/qq_46123200/article/details/135192425</guid><author>qq_46123200</author><pubDate>Mon, 25 Dec 2023 10:00:01 +0800</pubDate><description><![CDATA[大屏DataV組件庫(kù)——更新數(shù)據(jù)視圖不更新]]></description><category></category></item></channel></rss>
解決
那么在項(xiàng)目中怎么處理這種數(shù)據(jù)格式，變成我們好處理的數(shù)據(jù)呢，通過(guò)rss-parser,以vue2 項(xiàng)目為例
下載依賴
npm i rss-parser
處理代碼：
<template>
<div class="other-item">
<div class="inner">
<ul class="hot-list-article">
<li v-for="(item, i) in data.items" :key="i" @click="JumpFn(item)">
{{ item.title }}
</li>
</ul>
</div>
</div>
</template>
<script>
// 導(dǎo)入依賴
import RSSParser from 'rss-parser';
export default {
data() {
return {
data: {},
};
},
created() {
this.searchBtn()
},
methods: {
// 點(diǎn)擊跳轉(zhuǎn)事件
JumpFn(item) {
console.log("?? ~ JumpFn ~ item:", item)
// 打開(kāi)一個(gè)新的頁(yè)面
window.open(item.link, '_blank');
},
// RSS 事件
searchBtn() {
this.searchList = [];
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
// 引入并new一個(gè)新的parser
const parser = new RSSParser();
// 判斷是否返回
if (xhr.readyState === 4) {
// 判斷返回的狀態(tài)
if (xhr.status === 200) {
const data = xhr.responseText
parser.parseString(data).then((res) => {
this.data = res
})
} else {
console.log("請(qǐng)求接口失敗")
}
}
};
xhr.open("get", process.env.VUE_APP_BASE_API);
// VUE_APP_BASE_API 是請(qǐng)求接口的地址，我這里請(qǐng)求的地址是https://rss.csdn.net/qq_46123200/rss/map?spm=1001.2014.3001.5494
xhr.send(null);
},
},
}
</script>
<style lang="scss" scoped>
ul {
li {
text-align: left;
font-size: 16px;
cursor: pointer;
&:hover {
color: #2ea7e0;
}
}
}
.other-item-title {
margin: 10px 20px;
padding: 5px;
line-height: 30px;
font-weight: 400;
border-bottom: 1px solid #e8e9e7;
color: #383937;
position: relative;
font-size: 18px
}
.other-item .inner {
margin: 0 20px;
padding-bottom: 10px
}
.inner .hot-list-article li {
display: block;
line-height: 32px;
position: relative;
margin: 3px 0;
counter-increment: nums;
padding-left: 30px;
overflow: hidden;
word-wrap: normal !important;
white-space: nowrap;
text-overflow: ellipsis
}
.hot-list-article li a {
color: #787977
}
.hot-list-article li:before {
color: #000;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
content: counter(nums, decimal);
position: absolute;
left: 0;
top: 5px;
border-radius: 100%;
background-color: #edefee;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font-family: SourceCodeProRegular, Menlo, Monaco, Consolas, "Courier New", monospace, 'Helvetica Neue', Arial, sans-serif
}
/*以上就是一個(gè)稍微好看的有編號(hào)的li列表 */
/*加上以下之后，排名前三的數(shù)據(jù)編號(hào)就添加了編號(hào)顏色，更好看*/
.hot-list-article li:first-child:before,
.hot-list-article li:nth-child(2):before,
.hot-list-article li:nth-child(3):before {
color: #fff;
text-shadow: none
}
.hot-list-article li:first-child:before {
background-color: #e24d46
}
/*第1行的行號(hào)樣式*/
.hot-list-article li:nth-child(2):before {
background-color: #2ea7e0
}
/*第2行的行號(hào)樣式*/
.hot-list-article li:nth-child(3):before {
background-color: #6bc30d
}
/*第3行的行號(hào)樣式*/
.hot-list-article li a:hover {
text-decoration: underline;
color: #6bc30d
}
/*鼠標(biāo)移過(guò)更好看*/
</style>
上面附上了處理的源碼，如果接口請(qǐng)求不通，可以直接復(fù)制最上面的響應(yīng)體進(jìn)行測(cè)試。
到此這篇關(guān)于詳解vue2如何處理xml格式的數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue2處理xml數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue 限制input只能輸入正數(shù)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue開(kāi)發(fā)環(huán)境的搭建全過(guò)程
文章介紹了在網(wǎng)頁(yè)中使用Vue.js的四種方式：基本方式、腳手架方式（Vue2.0）、使用WebStorm集成環(huán)境創(chuàng)建vue-cli項(xiàng)目（Vue3.0）以及Vue項(xiàng)目的目錄結(jié)構(gòu),每種方式都有詳細(xì)的步驟和示例,幫助讀者快速上手Vue.js開(kāi)發(fā)2024-11-11
這篇文章主要介紹了vue項(xiàng)目中如何引入cesium問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
基于vue-element組件實(shí)現(xiàn)音樂(lè)播放器功能
這篇文章主要介紹了基于vue-element組件實(shí)現(xiàn)音樂(lè)播放器功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
element-ui 表格數(shù)據(jù)時(shí)間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時(shí)間格式化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3刷新頁(yè)面報(bào)錯(cuò)404的解決方法
本文主要介紹了Vue3刷新頁(yè)面報(bào)錯(cuò)404的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue如何修改瀏覽器的標(biāo)題title問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-05-05
解決antd的Form組件setFieldsValue的警告問(wèn)題
這篇文章主要介紹了解決antd的Form組件setFieldsValue的警告問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10