Vue.js项目实战：消费RSS API并渲染列表_在Vue.js中消费RSS API并渲染列表

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Vue.js项目实战：消费RSS API并渲染列表_在Vue.js中消费RSS API并渲染列表

2025-11-17

浏览次数：次

返回列表

在Vue.js中消费RSS需将XML转JSON，通过rss2json等服务获取数据，在mounted中用fetch请求并赋值给articles，再用v-for渲染列表，注意处理跨域、XSS风险及日期格式化。

vue.js项目实战：消费rss api并渲染列表_在vue.js中消费rss api并渲染列表

在Vue.js项目中消费RSS API并渲染列表，关键在于将RSS这种XML格式的数据转换为JSON结构，以便在前端方便地处理和展示。由于浏览器无法直接解析RSS（XML），我们需要借助第三方服务或后端代理将RSS源转换为可读的JSON格式。

使用RSS转JSON服务

常见的做法是使用如 rss2json.com 这样的免费API服务，它能将任意RSS地址转换为JSON响应。例如：

https://api.rss2json.com/v1/api.json?rss_url=YOUR_RSS_URL

在Vue组件中，你可以通过axios或fetch请求该接口获取数据。

创建新闻列表组件

在Vue中发起请求并渲染结果的基本流程如下：

在data()中定义一个数组用于存储新闻条目
在mounted()钩子中调用API获取数据
将返回的items字段赋值给本地数据
使用v-for指令遍历并渲染每条新闻

示例代码：

Whimsical

Whimsical推出的AI思维导图工具

182 查看详情 Whimsical

<font>
export default {
  data() {
    return {
      articles: []
    }
  },
  async mounted() {
    const response = await fetch(
      'https://api.rss2json.com/v1/api.json?rss_url=https://example.com/feed'
    )
    const result = await response.json()
    if (result.status === 'ok') {
      this.articles = result.items
    }
  }
}
</font>

模板部分：

<font>
<div v-for="item in articles" :key="item.guid">
  <h3>{{ item.title }}</h3>
  <p>{{ item.pubDate }}</p>
  <div v-html="item.description"></div>
  <a :href="item.link" target="_blank">阅读原文</a>
</div>
</font>