服务 HTML 使用 Node 构建一个简单的 SPA。js/Express

Question

我想将网站构建为单页应用程序。

据我了解，SPA 以 HTML 文件的形式向应用程序发送单个入口点。

所以我想使用 Node 和 Express 为主页提供服务，然后为页眉和页脚之间的内容提供服务 HTML，当用户导航时使用 AJAX 调用更新这些内容网站。

我知道如何创建 restful API 来将数据作为 JSON 提供，但对如何处理 SPA 的 HTML 部分知之甚少改变。

问题：如何使用 Node 和 Express（如果有帮助的话，最终使用 handlebars 之类的模板引擎）在服务器上实现 HTML 部分的服务？

它真的有意义吗？（页眉和页脚毕竟不是要重新加载的数据。）

Answer 1

你绝对可以用 node.js 做到这一点。首先设置一个 HTML 模板引擎，例如 Swig，（但您可以使用其他引擎）并配置标准选项以呈现 html 页面：

var swig  = require('swig');
app.set('view engine', 'html');
app.set('view options', {
    layout: false
});

app.engine('html', swig.renderFile);
app.set('view cache', false);
// To disable Swig's cache, do the following:
swig.setDefaults({ cache: false });
app.use(express.static(__dirname + '/public'));

其次，您设置了一个服务于您的主要 HTML 页面的端点。

  app.get('/',function(req, res) {
      res.render('index');
   };

然后您可以创建 node.js 个端点来获取您的数据：

 app.get('/users', function(req, res) {
        // Do database stuff here
        res.status(200).send(results);
    }

然后设置 HTML 文件：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet">

<title>fast MEAN</title>
</head>
<body ng-controller="MainController">
<div class="col-md-12" style="background-color: #006699">

</div>
{% raw %}
{{helloWorld}}

<ng-view></ng-view>

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>

{% endraw %}
</body>
</html>

{% raw %} 和 {% endraw %} 之外的所有内容都将使用 node/swig 模板数据与数据一起呈现，而这些标签内的所有内容都可以使用您在内部使用的任何框架呈现（jquery、angular、反应）等

我的 github 上有这个简单的单页应用程序的一个示例，angular 有一个版本，而 React 有一个版本。希望对您有所帮助。

https://github.com/coguy450/fastMEAN

服务 HTML 使用 Node 构建一个简单的 SPA。js/Express

Serving HTML to build a simple SPA using Node.js/Express

node.js

express

handlebars.js

single-page-application