在 Vue.js 前端显示 RSS 提要 [英] Displaying RSS feed on Vue.js frontend
本文介绍了在 Vue.js 前端显示 RSS 提要的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想从组件Feed.vue"在我的Dashboard.vue"上显示一个谷歌警报提要.我在 javascript 中完成了这项工作,但不确定如何将我的 js 前端转换为 Vue.
I want to display a google alert feed on my "Dashboard.vue" from the component "Feed.vue". I got this working in javascript but not sure how to convert my js front end to Vue.
我收到错误消息:io 未定义.关于如何解决这个问题并在我的 Vue.js 应用程序上显示来自提要的文章的任何想法?
I am getting the error: io is not defined. Any ideas as to how I can resolve this and display the articles from the feed on my Vue.js application?
后端代码:
const feedparser = require('feedparser-promised');
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const fs = require('fs');
server.listen(8000);
console.log('Server started on localhost:8000');
let url = 'https://www.google.ie/alerts/feeds/10663948362751557705/4511034072220974544';
// Declare a variable for the feed content
let feed = [];
// Parse the feed
feedparser.parse(url).then(items => {
// Update the variable with the new data
for (const [i, item] of items.entries()) {
// Retrieve the ten first elements, with their title and description
// And add them to the feed array
if (i < 9) {
feed.push({
title: item.title,
link: item.link
});
}
}
// Write it to a file so you can know how to parse it better
// The callback is mandatory, but it's useless here
fs.writeFile('feed.json', JSON.stringify(items, null, 2), 'utf-8', (data) => {});
});
// Define the default route
app.get('/', (req, res) => {
// Render the page
res.render('App.vue');
// Send the data to the client using socket.io
io.on('connection', io => {
io.emit('feed', {
feed: feed
});
});
});
仪表板.vue
<template>
<li>
{{feed.title}}
</li>
</template>
<script>
export default {
props: ["feed"]
}
</script>
Feed.vue
<template>
<ul>
<feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
</ul>
</template>
<script>
import Feed from './Feed.vue'
export default {
components: {
Feed
},
data () {
return {
feeds: []
}
},
mounted() {
this.subscribeToFeed();
},
methods: {
subscribeToFeed() {
const socket = io();
socket.on('feed', data => {
data.feed.entries().forEach(feed => {
this.feeds.push(feed);
});
});
}
}
}
推荐答案
检查这一行:
const socket = io();
你好像忘记在这个 vue 组件中导入 io 模块了.
It seems you forgot to import the io module in this vue-component.
这篇关于在 Vue.js 前端显示 RSS 提要的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文