Question

我正在使用Node.js构建实时应用程序。我还想使用Vue.js框架（这是我的新手）。如何执行以下操作：

让我们假设我有一个由Node.js托管的index.html页面作为主页。 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的内容插入index.html的“ module” span部分，然后几秒钟后（使用间隔计时器）它将用moduleB.html内容替换moduleA内容

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>

请注意，模块A和模块B的内容完全不同，但是它们都插入到同一span id“模块”区域中，彼此替换。

我没有在网上看到任何示例，这些示例展示了Node如何解析模块A和模块B的内容，如何通过websocket发送它，然后Vue框架替换这些模块。

如果moduleA和moduleB也有自己的javascript和CSS内容，服务器将如何发送？

如何使用Vue.js和Node.js更新单页应用程序的各个部分

0 个答案: