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

我想将网站构建为单页面应用程序。使用Node.js/Express构建简单SPA的HTML

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

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

我知道如何创建一个restful API来以JSON的形式提供数据，但并不知道如何处理正在改变的SPA的HTML部分。

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

它真的有意义吗？（一个头文件和一个页脚是没有太多的数据来重新加载毕竟）。

来源

2016-07-14 Aurelien Giraud

你可以肯定地做到这一点与node.js.首先，建立一个HTML模板引擎，例如痛饮，（但你可以使用别人），并配置标准的选项来渲染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>

当外界的一切{％原料％}和{％endraw％}将使用node/swig模板数据进行数据呈现，并且这些标记中的所有内容都可以使用您正在使用的任何框架（jQuery，angular，react等）来呈现。

这个简单的单页面应用程序的一个例子是在我的github上，有一个角度版本和一个反应版本。希望有所帮助。

https://github.com/coguy450/fastMEAN

来源

2016-07-14 21:25:16

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

回答

相关问题