Question

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

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

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

我知道如何创建一个宁静的API来提供数据作为JSON，但不知道如何处理正在发生变化的SPA的HTML部分。

问题：如何使用Node和Express在服务器上实现这些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上，有一个版本用于角度，一个版本用于反应。希望有所帮助。

https://github.com/coguy450/fastMEAN

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

1 个答案: