Я использую Node.js для создания приложения в реальном времени. Я также хотел бы использовать фреймворк Vue.js (с которым я совершенно новичок). Как я могу сделать следующее:
Предположим, что у меня есть страница index.html, размещенная Node.js в качестве главной страницы. Index.html представляет собой простой каркас и выглядит примерно так:
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title></title>
<script>
var socket = io();
</script>
</head>
<body>
<span id="module"></span>
</body>
</html>
Давайте предположим, что у меня также есть два дополнительных файла с именами moduleA.html и moduleB.html.
Я бы хотел, чтобы сервер вставил содержимое файла moduleA.html в раздел span модуля "module" файла index.html, а затем через несколько секунд (используя интервальный таймер) он заменит содержимое moduleA содержимым moduleB.html.
moduleA.html выглядит следующим образом:
moduleA.html
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>{{ data1 }}</td>
</tr>
<tr>
<td>{{ data2 }}</td>
</tr>
</tbody>
</table>
и moduleB.html выглядит в точности так:
moduleB.html
<div style="background-image:url('public/image.png');"></div>
Обратите внимание, что содержимое moduleA и moduleB совершенно разное, но они оба вставляются в одну и ту же область span с идентификатором модуля, заменяя друг друга.
Я не вижу в сети примеров, показывающих, как Node может анализировать содержимое moduleA и moduleB, отправлять его через веб-сокет, а затем Vue Framework заменяет модули.
Что, если бы также moduleA и moduleB имели свой собственный контент javascript и css, как сервер отправил бы это?