Отображение RSS-канала на Vue. js отдельном файловом компоненте - PullRequest
Новая
       27

Отображение RSS-канала на Vue. js отдельном файловом компоненте

0 голосов
/ 21 февраля 2020

Я хочу отобразить серию статей из ленты оповещений Google. Я получил это работает в Javascript. Как преобразовать мой интерфейс как компонент Vue. js, называемый каналами, и отобразить его на панели инструментов. vue? Должен ли мой сервер также существенно измениться, или я могу использовать rss.render (имя компонента) для отображения статей на Vue. js интерфейсе?

Вот код в JS который работает:

Клиент: 

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Test page</title>
</head>

<body>
  <section>
    <h1>Latest articles</h1>
    <div class="feed"></div>
  </section>
  <!-- Load the socket.io-client library -->
  <script src="/socket.io/socket.io.js"></script>
  <!-- Load JQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js">

  </script>
  <script type="text/javascript">
    // Websocket connection
    const socket = io();

    socket.on('feed', data => {
      for (const [i, item] of data.feed.entries()) {
        let itemContainer = $('<span></span>')
          .addClass('feed__content')
          .append(`<p>${i + 1}) ${item.title}<p>`)
          .append(`<p>${item.link}</p>`)
          .appendTo('.feed');
      }
    });
  </script>
</body>

</html>

Серверная часть 

    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('test.ejs');

  // Send the data to the client using socket.io
  io.on('connection', io => {
    io.emit('feed', {
      feed: feed
    });
  });
});
...