如何使用 Vue 从命名空间 XML 源获取 url 属性？

Question

我正在尝试使用 Axios 在 Nuxt 中显示 Rss 提要。

我可以得到：

标题
link
描述

它正在工作，但对于位于以下位置的图像：

<media:content url="https://uploads-ssl.webflow.com/60f1911b212fd90baa99ee92/00e5cfa7_mv2.jpg" medium="image >

找不到访问方法

这是我的 axios：

<script>
  asyncData ({params}, callback) {
    axios.get("https://yaniimodels.webflow.io/categories/rss.xml" )
      .then((res) => {
        var parseString = require('xml2js').parseString
        var xml = res.data
        parseString(xml, (message, xmlres) => {
          callback(null,{ data: xmlres.rss.channel[0].item})
        })
      })
      .catch((e) => {
        callback({ statusCode: 404, message: 'error' })
      })
  },
</script>

在我的模板中：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      <a :href="item.link">
        {{item.title}}
        {{item.description}}
      </a>
    </li>
  </ul>
</template>

我的rss.xml是这样的:

<item>
    <title>Yanii Models | Ben and Ezra</title>
    <link>https://yaniimodels.webflow.io/categories/ben-and-ezra</link>
    <guid>https://yaniimodels.webflow.io/categories/ben-and-ezra</guid>
    <description>Petit Bâteau</description>
    <pubDate>Fri, 16 Jul 2021 16:27:00 GMT</pubDate>
    <media:content url="https://uploads-ssl.webflow.com/60f1911b212fd90baa99ee92/60f1b23cf09c3f73a4f92a1b_b79a66_8fa332a4dea94558b5f1e97200e5cfa7_mv2.jpg" medium="image"/>
    <media:thumbnail url="https://uploads-ssl.webflow.com/60f1911b212fd90baa99ee92/60f1b23cf09c3f73a4f92a1b_b79a66_8fa332a4dea94558b5f1e97200e5cfa7_mv2.jpg"/>
</item>

Answer 1

要显示 RSS 提要：

@nuxtjs/axios 通常与 Nuxt 一起使用，它通过 $axios 上下文属性提供对 axios 的访问（[=14 的第一个参数=]).无需在您的组件中导入它。
asyncData() callback 参数已弃用。请改用 async/await。
使用 Promise-based xml2js parser API 以获得更简洁的代码。
xml2js 似乎将所有属性都包装在一个数组中，因此您必须将其解包（或对其进行索引，这对我来说很不方便）。
没有item.id属性，但是有item.guid。将其用于 v-for 项目键。
图像URL存储在每个项目的media:content.$.url中。您可以将 URL 绑定到 <img>.src.

<script>
export default {
  async asyncData ({ $axios 1️⃣, params }, /* callback 2️⃣ */) {
    const res = await $axios.get("https://yaniimodels.webflow.io/categories/rss.xml")
    const xmlres = await parseStringPromise(res.data) 3️⃣
    
    4️⃣
    const data = xmlres.rss.channel[0].item.map(item => {
      const newEntries = Object.entries(item).map(([key,val]) => [key, val[0]])
      return Object.fromEntries(newEntries)
    })

    return { data }
  }
}
</script>

<template>
  <ul>
    <li v-for="item in data" :key="item.guid"> 5️⃣
      ...
      <img :src="item['media:content'].$.url"> 6️⃣
    </li>
  </ul>
</template>

demo

Answer 2

我知道 tony 已经得到了一个可接受的答案，但这是我对此的方法，我认为它可能仍然与分享有关。

我使用 fast-xml-parser 并通过 ignoreAttributes: false 选项从您的 xml 中获得了以下 JSON （因为我们需要您的 url 属性） .

{
  "title": "Yanii Models | Ben and Ezra",
  "link": "https://yaniimodels.webflow.io/categories/ben-and-ezra",
  "guid": "https://yaniimodels.webflow.io/categories/ben-and-ezra",
  "description": "Petit Bâteau",
  "pubDate": "Fri, 16 Jul 2021 16:27:00 GMT",
  "media:content": {
    "@_url": "https://uploads-ssl.webflow.com/60f1911b212fd90baa99ee92/60f1b23cf09c3f73a4f92a1b_b79a66_8fa332a4dea94558b5f1e97200e5cfa7_mv2.jpg",
    "@_medium": "image"
  },
  "media:thumbnail": {
    "@_url": "https://uploads-ssl.webflow.com/60f1911b212fd90baa99ee92/60f1b23cf09c3f73a4f92a1b_b79a66_8fa332a4dea94558b5f1e97200e5cfa7_mv2.jpg"
  }
}

这是集成基本页面的完整代码

<template>
  <div>
    <h1>{{ jsonObj.title }}</h1>
    <p>{{ jsonObj.description }}</p>
    <a :href="jsonObj.link">Link</a>

    <br />
    <img :src="jsonObj['media:thumbnail']['@_url']" alt="thumbnail image" />
    <br />
    <img :src="jsonObj['media:content']['@_url']" alt="full image" />
  </div>
</template>

<script>
import parser from 'fast-xml-parser'

export default {
  asyncData() {
    const xml = `<item>
      <title>Yanii Models | Ben and Ezra</title>
      <link>https://yaniimodels.webflow.io/categories/ben-and-ezra</link>
      <guid>https://yaniimodels.webflow.io/categories/ben-and-ezra</guid>
      <description>Petit Bâteau</description>
      <pubDate>Fri, 16 Jul 2021 16:27:00 GMT</pubDate>
      <media:content url="https://uploads-ssl.webflow.com/60f1911b212fd90baa99ee92/60f1b23cf09c3f73a4f92a1b_b79a66_8fa332a4dea94558b5f1e97200e5cfa7_mv2.jpg" medium="image"/>
      <media:thumbnail url="https://uploads-ssl.webflow.com/60f1911b212fd90baa99ee92/60f1b23cf09c3f73a4f92a1b_b79a66_8fa332a4dea94558b5f1e97200e5cfa7_mv2.jpg"/>
      </item>`
    const jsonObj = parser.parse(xml, { ignoreAttributes: false }).item
    return { jsonObj }
  },
}
</script>

这是它的样子

如何使用 Vue 从命名空间 XML 源获取 url 属性？

How to get an url attribute from a namespaced XML source with Vue?

rss-reader

vue.js

axios

nuxt.js