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

debugcn 发表于 Dev

奥雷利安·吉罗（Aurelien Giraud）

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

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

因此，我想使用Node和Express服务于主页，然后为用户在浏览网站时使用AJAX调用更新的页眉和页脚之间的内容提供HTML。

我知道如何创建一个宁静的API来将数据作为JSON进行处理，但是关于如何处理SPA的HTML部分却知之甚少。

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

真的有意义吗？（页眉和页脚毕竟没有多少要重新加载的数据。）

埃里克·哈特曼

您绝对可以使用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％}之外的所有内容都将使用节点/ swig模板数据来呈现，而这些标记内的所有内容都可以使用您在内部使用的任何框架来呈现（jquery，angular，react）等等。

这个简单的单页应用程序的示例在我的github上，其中有一个用于angular的版本，一个用于react的版本。希望能有所帮助。

https://github.com/coguy450/fastMEAN

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。