前端vue2如何处理Rss订阅、聚合，前端 vue2 如何处理xml 格式的数据

文章目录

    • 前言
    • 解决

前言

最近看见csdn有Rss订阅这个功能，但发现这个接口响应的数据格式不是常用的Json格式而是xml，即下图的格式。

在这里插入图片描述

附响应的代码

<?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 &copy; qq_46123200]]></copyright><item><title><![CDATA[【已解决】Vue 3+TS项目，无法找到模块“XXX”的声明文件，项目报错无法找到声明文件]]></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项目，无法找到模块“XXX”的声明文件，项目报错无法找到声明文件]]></description><category></category></item><item><title><![CDATA[无法找到模块“pinia-plugin-persist”的声明文件。“c:/Users/16566/Desktop/demo/，pinia持久化依赖报错，解决亲测有效]]></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[无法找到模块“pinia-plugin-persist”的声明文件。“c:/Users/16566/Desktop/demo/，pinia持久化依赖报错，解决亲测有效]]></description><category></category></item><item><title><![CDATA[关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效]]></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 滚动插件的使用及循环的列表点击事件不生效的解决方案,vue-seamless-scroll 点击click失效]]></description><category></category></item><item><title><![CDATA[vue2中使用vue-seamless-scroll时出现数据重复或者样式错乱问题]]></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时出现数据重复或者样式错乱问题，前端使用vue-seamless-scroll出现数据重复或者样式错乱问题，部分没样式，上下样式不一样]]></description><category></category></item><item><title><![CDATA[vue2 实现数字滚动效果，翻页效果]]></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 实现数字，数值自动滚动效果，翻页效果，引入直接使用]]></description><category></category></item><item><title><![CDATA[vscode中Chinese (Simplified)汉化无效解决方法]]></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)汉化无效解决方法]]></description><category></category></item><item><title><![CDATA[vue项目如何禁止屏幕缩放，vue项目进行浏览器进行缩放]]></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项目如何禁止屏幕缩放，vue项目进行浏览器进行缩放]]></description><category></category></item><item><title><![CDATA[windows系统下，如何给文件夹添加备注？文件夹查看备注]]></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系统下，如何给文件夹添加备注？文件夹查看备注]]></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[项目打包报错`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进行远程开发 (remote-ssh)，首次连接及后续使用，详细介绍]]></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进行远程开发 (remote-ssh)，首次连接及后续使用，详细介绍]]></description><category></category></item><item><title><![CDATA[前端 Vue启动本地（.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启动本地（.exe）文件]]></description><category></category></item><item><title><![CDATA[ubuntu 20.04系统，桌面有个文件夹名为0.7.0，每次系统启动后都需要打开终端，进入0.7.0文件夹，然后执行命令./webrtc-streamer命令，如何设置开机自动打开终端执行]]></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系统，桌面有个文件夹名为0.7.0，每次系统启动后都需要打开终端，进入0.7.0文件夹，然后执行命令./webrtc-streamer命令，如何设置开机自动打开终端执行]]></description><category></category></item><item><title><![CDATA[VMware 17 中 安装 Ubuntu 系统，系统中安装todesk与向日葵。其他设备无法通过todesk和向日葵远控问题]]></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显示当前系统并无桌面环境，或无显示器，无法显示远程桌面，您需要自行安装X11桌面环境，或者使用终端文件功能]]></description><category></category></item><item><title><![CDATA[ubuntu 20.04 使用 webrtc-streamer自动退出，报错GLIBC 问题解决方法]]></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视频流遇到的问题，及解决方法。webrtc-streamer报错、启动不起来。rtsp视频流播放失败问题。亲测有效]]></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 复制文件夹下文件到其他文件夹下。查看容器的命令（无论运行还是停止）查看正在运行容器的命令。]]></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[小白都能学会的，在windows 11安装VMware 17 ，VMware安装Ubuntu 20.4，ssh传文件手把手教你]]></description><category></category></item><item><title><![CDATA[【ubuntu】ubuntu 20.04安装docker，使用nginx部署前端项目，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部署前端项目]]></description><category></category></item><item><title><![CDATA[【ubuntu】docker中如何ping其他ip或外网]]></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或外网]]></description><category></category></item><item><title><![CDATA[级联选择器el-cascader根据下拉数据的id获取所对应的文字]]></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[级联选择器el-cascader根据下拉数据的id获取所对应的文字]]></description><category></category></item><item><title><![CDATA[【DataV】DataV组件库——更新数据视图不更新]]></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组件库——更新数据视图不更新]]></description><category></category></item></channel></rss>

解决

那么在项目中怎么处理这种数据格式，变成我们好处理的数据呢，通过rss-parser,以vue2 项目为例

下载依赖

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>
// 导入依赖
import RSSParser from 'rss-parser';export default {data() {return {data: {},};},created() {this.searchBtn()},methods: {// 点击跳转事件JumpFn(item) {console.log("🚀 ~ JumpFn ~ item:", item)// 打开一个新的页面window.open(item.link, '_blank');},// RSS 事件searchBtn() {this.searchList = [];const xhr = new XMLHttpRequest();xhr.onreadystatechange = () => {// 引入并new一个新的parserconst parser = new RSSParser();// 判断是否返回if (xhr.readyState === 4) {// 判断返回的状态if (xhr.status === 200) {const data = xhr.responseTextparser.parseString(data).then((res) => {this.data = res})} else {console.log("请求接口失败")}}};xhr.open("get", process.env.VUE_APP_BASE_API);// VUE_APP_BASE_API 是请求接口的地址，我这里请求的地址是https://rss.csdn.net/qq_46123200/rss/map?spm=1001.2014.3001.5494xhr.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
}/*以上就是一个稍微好看的有编号的li列表 */
/*加上以下之后，排名前三的数据编号就添加了编号颜色，更好看*/
.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行的行号样式*/
.hot-list-article li:nth-child(2):before {background-color: #2ea7e0
}/*第2行的行号样式*/
.hot-list-article li:nth-child(3):before {background-color: #6bc30d
}/*第3行的行号样式*/
.hot-list-article li a:hover {text-decoration: underline;color: #6bc30d
}/*鼠标移过更好看*/
</style>

上面附上了处理的源码，如果接口请求不通，可以直接复制最上面的响应体进行测试。

下班~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/281592.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

微软开源Garnet高性能缓存服务安装

微软开源Garnet高性能缓存服务安装

Garnet介绍 Garnet是一款微软研究院基于C#开发而开源的高性能缓存服务&#xff0c;支持Windows、Linux多平台部署&#xff0c;Garnet兼容Redis服务API&#xff0c;在性能和使用架构上较Redis有很大提升&#xff08;官方说法&#xff09;&#xff0c;并提供与Redis一样的命令操…
阅读更多...
UE5的渲染-太难了

UE5的渲染-太难了

大家可以看到&#xff0c;这些都是UE的渲染&#xff0c;非常漂亮惊叹&#xff0c;渲染已经非常成熟&#xff0c;这些画面并不是离线渲染&#xff0c;而是实时渲染。早先年我们渲染CG动画都采用离线渲染&#xff0c;要用到庞大的渲染农场&#xff0c;每渲染一帧都可能需要半个小…
阅读更多...
WebGIS航线编辑器(无人机航线规划)

WebGIS航线编辑器(无人机航线规划)

无人机航点、航线规划&#xff0c;实现全自动航点飞行作业及飞行航拍。禁飞区、作业区功能保障飞行安全。 GIS引擎加载 const viewer new Cesium.Viewer("cesiumContainer", { imageryProvider: new Cesium.IonImageryProvider({ assetId: 3872 }), }); const im…
阅读更多...
【Django实战一】创建新项目

【Django实战一】创建新项目

一、新建Project django-admin startproject 项目名称二、创建应用 1、创建应用 python manage.py startapp 应用名称应用创建后&#xff0c;项目的根目录下会生成对应应用名称的文件夹 2、注册应用 新创建的应用需要在settings.py中的INSTALLED_APPS中注册该应用 INSTALL…
阅读更多...
应急救援装备无人机是否必要？无人机在应急救援中的具体应用案例有哪些？

应急救援装备无人机是否必要？无人机在应急救援中的具体应用案例有哪些？

无人机&#xff08;Drone&#xff09;是一种能够飞行并自主控制或远程操控的无人驾驶飞行器。它们通常由航空器、控制系统、通讯链路和电源系统组成&#xff0c;并可以根据任务需求搭载不同类型的传感器、摄像头、货物投放装置等设备。 无人机的种类繁多&#xff0c;从大小、形…
阅读更多...
基于python+vue的幼儿园管理系统flask-django-php-nodejs

基于python+vue的幼儿园管理系统flask-django-php-nodejs

随着信息时代的来临&#xff0c;过去的传统管理方式缺点逐渐暴露&#xff0c;对过去的传统管理方式的缺点进行分析&#xff0c;采取计算机方式构建幼儿园管理系统。本文通过课题背景、课题目的及意义相关技术&#xff0c;提出了一种活动信息、课程信息、菜谱信息、通知公告、家…
阅读更多...
Docker专题-04 Nginx部署

Docker专题-04 Nginx部署

Docker专题-04 Nginx部署 注&#xff1a; 本教程由羞涩梦整理同步发布&#xff0c;本人技术分享站点&#xff1a;blog.hukanfa.com 转发本文请备注原文链接&#xff0c;本文内容整理日期&#xff1a;2024-03-21 csdn 博客名称&#xff1a;五维空间-影子&#xff0c;欢迎关注…
阅读更多...
本地化语音识别、视频翻译和配音工具：赋能音频和视频内容处理

本地化语音识别、视频翻译和配音工具：赋能音频和视频内容处理

随着人工智能技术的飞速发展&#xff0c;语音识别、视频翻译和配音等任务已经变得更加容易和高效。然而&#xff0c;许多现有的工具和服务仍然依赖于互联网连接&#xff0c;这可能会导致延迟、隐私问题和成本问题。为了克服这些限制&#xff0c;我们介绍了一种本地化、离线运行…
阅读更多...
MATLAB环境下基于健康指标（Health indicator）的齿轮故障诊断

MATLAB环境下基于健康指标（Health indicator）的齿轮故障诊断

基于数据驱动的健康指标HI根据其构建策略的不同&#xff0c;常被分成两类&#xff0c;即&#xff1a;有量纲的物理指标和无量纲的虚拟指标。 有量纲的物理指标通常是由信号处理技术对收集到的时频域信号进行分析得到&#xff0c;常见的时域指标有均方根值、峰值指标、峰值因子…
阅读更多...
docker swarm 集群创建

docker swarm 集群创建

1&#xff0c;目的&#xff1a; 通过docker swarm 工具将一台或者多台安装了docker的服务器组成一个完整的集群&#xff0c;该集群中的node节点可以通过Leader节点管理。在使用docker stack部署时&#xff0c;可以将容器自动分发到合适的节点上。 2&#xff0c;服务器准备&am…
阅读更多...
0基础学习VR全景平台篇第146篇：为什么需要3D元宇宙编辑器？

0基础学习VR全景平台篇第146篇：为什么需要3D元宇宙编辑器？

一.什么是3D元宇宙编辑器&#xff1f; 3D元宇宙编辑器是全新3DVR交互渲染创作工具&#xff0c;集3D建模、虚拟展厅、AI数字人等能力&#xff0c;渲染和虚拟现实技术于一身的生产力工具。 具有跨平台和随时随地编辑等特点&#xff0c;可广泛应用于展会、展厅、博物馆、可视化园…
阅读更多...
flink join的分类

flink join的分类

带窗口的join 下图是固定窗口，同样的还有滑动窗口和会话窗口join DataStream<Integer> orangeStream = ...; DataStream<Integer> greenStream = .
阅读更多...
LeetCode每日一题——数组串联

LeetCode每日一题——数组串联

数组串联OJ链接&#xff1a;1929. 数组串联 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 思路&#xff1a; 题目说 ans 由两个 nums 数组 串联 形成。那么我们就只需要历遍两次nums数组&#xff0c;将它放在我们的ans数组里。 注意&#xff1a; 题目函数对于我…
阅读更多...
由浅到深认识Java语言（9）：Eclipse IDE简介

由浅到深认识Java语言（9）：Eclipse IDE简介

该文章Github地址&#xff1a;https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…
阅读更多...
springboot网站开发如何配置log4j日志插件

springboot网站开发如何配置log4j日志插件

springboot网站开发如何配置log4j日志插件&#xff01;为了便于服务器等环境下的错误情况的排查根源&#xff0c;还是很有必要使用日志插件的&#xff0c;它可以记录下我们提前埋下的锚点信息。 在遇到故障&#xff0c;查看这些锚点记录的日志信息&#xff0c;可以快速高效的解…
阅读更多...
鸿蒙一次开发，多端部署（一）简介

鸿蒙一次开发，多端部署（一）简介

背景 随着终端设备形态日益多样化&#xff0c;分布式技术逐渐打破单一硬件边界&#xff0c;一个应用或服务&#xff0c;可以在不同的硬件设备之间随意调用、互助共享&#xff0c;让用户享受无缝的全场景体验。而作为应用开发者&#xff0c;广泛的设备类型也能为应用带来广大的…
阅读更多...
el-select动态禁用

el-select动态禁用

在一个el-form表单中有5个el-form-item; 每个el-form-item是一个el-select控件&#xff1b; 这5个el-select控件遵循这样的规则&#xff0c;都是使用同一个list集合&#xff0c;如果第一个el-select选择了list中的某一项&#xff0c;那么这一项就被禁用&#xff1b;其他的el-…
阅读更多...
陈巍：Sora大模型技术精要万字详解（上）——原理、关键技术、模型架构详解与应用

陈巍：Sora大模型技术精要万字详解（上）——原理、关键技术、模型架构详解与应用

​目录 收起 1 Sora的技术特点与原理 1.1 技术特点概述 1.2 时间长度与时序一致性 1.3 真实世界物理状态模拟 1.4 Sora原理 1.4.1扩散模型与单帧图像的生成 1.4.2 Transformer模型与连续视频语义的生成 1.4.3 从文本输入到视频生成 2 Sora的关键技术 2.1 传统文生图技…
阅读更多...
详解python中函数的参数传递

详解python中函数的参数传递

在这个用例中&#xff0c;我们要讨论的是关于函数的传参问题 我所使用的python版本为3.3.2 对于函数: def fun(arg):print(arg)def main():fun(hello,Hongten)if __name__ __main__:main() 当我们传递一个参数给fun()函数&#xff0c;即可打印出传递的参数值信息。 这里打印…
阅读更多...
【嵌入式学习】Qtday03.21

【嵌入式学习】Qtday03.21

一、思维导图 二、练习 自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面。&#xff08;不要使用课堂上的图片和代码&#xff0c;自己发挥&#xff0c;有利于后面项目的完成&#xff09; 要求&#xff1a; 1. 需要使用Ui界面文件进行界面设计 2. ui界面上的组件…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023