使用 Node.js/Express 提供 HTML 以构建简单的 SPA答案

【问题标题】：Serving HTML to build a simple SPA using Node.js/Express使用 Node.js/Express 提供 HTML 以构建简单的 SPA
【发布时间】：2016-07-15 05:25:16
【问题描述】：

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

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

所以我想使用 Node 和 Express 来提供主页，然后为页眉和页脚之间的内容提供 HTML，这些内容在用户浏览网站时使用 AJAX 调用进行更新。

我知道如何创建一个 RESTful API 以将数据作为 JSON 提供，但我对如何处理 SPA 中发生变化的 HTML 部分知之甚少。

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

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

【问题讨论】：

标签： node.js express handlebars.js single-page-application

【解决方案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

【讨论】：