如何在 Ubuntu 14.04 中使用 NodeJS、SailsJS 和 DustJS 构建 SPA（单页面应用程序

介绍

Node.js® 是基于Chrome的JavaScript运行时间构建的平台,可轻松构建快速、可扩展的网络应用程序。Node.js使用一个以事件为导向的、非阻断的I/O模型,使其轻量级且高效,非常适合在分布式设备上运行的数据密集型实时应用程序。

Sails 是后端服务器的节点JS框架. 基于Model-View-Controller模式,它可以快速地开发应用程序. Sails对网络套接字进行了内置整合,用于实时推取消息. 它使用Waterline ORM作为默认的ORM,使它成为数据库不可知. 换句话说,它允许跨越SQL频谱以及非SQL数据库的数据库操作. 最重要的是,赛尔斯为您的应用提供了适当的结构.

Dust 是一个JavaScript模板引擎,它继承了它的外观,从cttemplate语言家族,并旨在在在服务器和浏览器上不同步运行。

SPA 是指** 单页应用程序** . 这些应用程序适合单个网页. 一旦网站打开,网页不会再加载之后。此类应用程序的目标是通过缩短网页加载时间并提供轻松过渡到不同的网页来提供流畅的用户体验,就像桌面应用程序一样。

在本教程中,我们将设置一个使用SailsJS的NodeJS服务器作为管理我们的代码的框架,我们将使用DustJS用于客户端和服务器上使用的同形模板。

目标

我们的主要目的是在客户端和服务器上使用 Isomorphic (或相同的) 模板。

在客户端和服务器上写和维护相同的模板的代码更少 * 搜索引擎可索引,因为任何页面都可以直接从服务器上获取

前提条件

本教程假定您已经创建了一个Ubuntu 14.04 x64 Droplet. 它被测试了 512 MB 的RAM. 您还需要一个用户与 sudo 访问来安装这些包。

第1步:安装软件

首先,要从 npm 编译和安装本地插件,您需要安装构建工具:

1sudo apt-get install python-software-properties python g++ make

然后,使用以下命令安装 NodeJs 和 NPM (从 Chris Lea 的 PPA ):

1sudo add-apt-repository ppa:chris-lea/node.js
2sudo apt-get update
3sudo apt-get install nodejs

<$>[注] 注: 这也安装了Node Package Manager或npm。NPM用于安装节点包,它类似于NodeJs的apt-get。

接下来,安装SailsJs:

1sudo npm -g install sails

<$>[注] 注: 此功能安装了最新版本的 Sails. 您可以在其网站上阅读更多有关 Sails.js 的信息(http://sailsjs.org/). <$>

步骤2 - 创建一个新的帆船项目

创建一个新的应用程序:

1sails new dustspa
2cd dustspa

Sails将创建以下结构的dustspa目录:

 1--config
 2--views
 3---api
 4--tasks
 5--assets
 6README
 7.gitignore
 8package.json
 9.sailsrc
10app.js
11Gruntfile.js

在「package.json」文件中找到以下行:

1"dependencies": {
2"sails": "~0.11.0",

将其更改为如下:

1"dependencies": {
2     "dustjs-linkedin": "^2.5.1",
3     "sails": "~0.11.0",

灰尘编译器用于编译灰尘模板来灰尘JavaScript模板。

接下来,在package.json文件中安装dustjs包以及其他包依赖:

1sudo npm install

现在,我们使用帆船升降器来提升服务器:

1sails lift

点击your_server_ip:1337查看默认主页. 停止服务器使用Ctrl+C完成后。

步骤 3 – 设置视图引擎

首先,我们将View Engine设置为dust:

在「config/views.js」中,將「engine:ejs」變為「engine:dust」:

1nano ./config/views.js

走到线上:

1engine: 'ejs',

把它改成:

1engine: 'dust',

完成更改后,按Ctrl+X(保存)、Y(确认文件名)和 _ENTER(保存和退出)。

我们将在未来使用上述方法来编辑所有文件。

第4步:创建 layout.dust

从layout.dust的内容将成为我们的定位页面. 所有请求将到达这个页面为第一页. 之后,请求将处理在前端。

在Views文件夹中创建layout.dust文件:

1touch views/layout.dust

将以下 HTML 代码复制到 layout.dust:

 1[label layout.dust]
 2<!DOCTYPE html>
 3<html>
 4<head>
 5  <title>Dust SPA</title>
 6  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 7</head>
 8<body>
 9  <div class="container">
10    <div class="header">
11      <nav>
12        <ul class="nav nav-pills pull-right">
13          <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
14          <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
15          <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
16        </ul>
17      </nav>
18      <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
19    </div>
20    <br/>
21    <div id="template">
22      <h1>Partial Goes Here</h1>
23    </div>
24    <footer class="footer">
25      <p>Styled by Bootstrap&copy;</p>
26    </footer>
27  </div>
28</body>
29</html>

HTML 很简单,它使用:

Bootstrap for styling. * 简单的导航链接。 * <div id="template">...</div> 我们的模板将被加载的地方

接下来,我们需要在routes.js中为/设置视图,打开config/routes.js并将其编辑为:

1[label routes.js]
2'/': {
3   view: 'layout'
4    }

现在,让我们举起服务器(如果服务器已经启动,请按 Ctrl + C 来阻止它),并检查我们的进展。

1sails lift

然后将浏览器指向以下位置: droplet_ip:1337

如果您可以看到页面,那么让我们继续。如果没有,请查看之前的步骤。

步骤5 - 创建部分

注:部分(或模板)是页面的一部分,在SPA中,我们不取代整个页面,只取代部分。

在视图目录中创建目录部分,然后更改到这个新目录:

1mkdir views/partials
2cd views/partials

在部分目录中创建home.dust,about.dust和contact.dust文件,其中包含以下内容:

 1[label home.dust]
 2    <div class="jumbotron">
 3      <h1>Home Page
 4        {?home}<small class="pull-right">Visit Count: {home}</small>{/home}
 5      </h1>
 6      <p class="lead">This is the home page. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</p>
 7      <p>
 8        <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
 9        <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
10      </p>
11    </div>

 1[label about.dust]
 2    <div class="panel panel-primary">
 3      <div class="panel-heading">
 4      <h1 class="panel-title">About Us
 5        {?about}<kbd class="pull-right">Visit Count: {about}</kbd>{/about}
 6      </h1>
 7      </div>
 8      <div class="panel-body">
 9        <h4>This is the About Us template. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</h4>
10        <br>
11        <p>
12          <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
13          <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
14      </p>
15      </div>
16    </div>

 1[label contact.dust]
 2    <div class="well">
 3      <h1 class="align-center">Show us some love and we'll get back to you !
 4        {?contact}<small class="pull-right">Visit Count: {contact}</small>{/contact}
 5      </h1>
 6      <hr/>
 7      <div class="input-group input-group-lg">
 8        <span class="input-group-addon" id="basic-addon1">@</span>
 9        <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
10      </div>
11      <br/>
12      <p>
13      <a class="btn btn-lg btn-success" href="#" role="button">Send Contact</a>
14      </p>
15    </div>

步骤6 - 编写模板

粉尘模板需要编译,才能在前端上使用。

让我们安装尘埃编译器:

1sudo npm install -g dust-compiler

我们将将所有编译的模板保存在资产/模板中. 转到主要的尘埃目录:

1cd ../..

现在,编译尘埃模板:

1dust-compiler -s views/partials/ -d assets/templates/ --bootstrap --nonotify

现在,您应该在您的资产/模板文件夹中有三个文件:

「home.js」 2 「about.js」 3 「contact.js」

现在,我们有所有所需的文件。

首先,在「views/layout.dust」中,在最底端的「」标签中添加「dust-js」库和模板文件:

1[label layout.dust]
2<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
3<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
4
5<script type="text/javascript" src="/templates/home.js"></script>
6<script type="text/javascript" src="/templates/about.js"></script>
7<script type="text/javascript" src="/templates/contact.js"></script>

完成后,我们需要添加一个脚本来捕捉链接点击并渲染所需的模板。

 1[label clickHandler.js]
 2    (function () {
 3
 4  var links = document.getElementsByClassName("links"),
 5  templateDiv = document.getElementById("template"),
 6  nav = document.querySelector('nav > ul'),
 7  clicked = false, viewCount = { home: 2, about: 1, contact: 1 };
 8
 9  function clickHandler(e) {
10    var target = event.target,
11    templateName = this.getAttribute("data-template");
12    if(clicked) {
13      clicked.removeAttribute('class');
14    }
15    else {
16      nav.querySelector('.active').removeAttribute('class');
17    }
18    target.parentElement.setAttribute('class','active');
19    clicked = target.parentElement;
20
21    dust.render(templateName, viewCount, function (err, out) {
22      if(err) console.log('Error:',err);
23      else {
24        viewCount[templateName]++;
25        templateDiv.innerHTML = out;
26      }
27    });
28  };
29
30  for(var i = 0; i < links.length; i++){
31    links[i].addEventListener('click', clickHandler, false);
32  }
33
34})();

上面的脚本非常简单,它可以做到以下几点:

捕捉链接上的点击事件 * 从)

引用这个新的clickHandler.js文件,通过编辑view/layout.dust并在<body>标签中添加下列内容:

1<script type="text/javascript" src="/js/clickHandler.js"></script>

最后,我们需要在视图目录中编辑layout.dust。

將「div id="template">...

」在「view/layout.dust」中變更為:

1[label layout.dust]
2<div id="template">
3  {> "partials/home"/}
4</div>

上面的变化是什么? 这是 Template Reuse . dust.js视图引擎将用view/partials/home.dust文件的内容代替{>partials/home`/}。

此模板将如何被重用 ? 这个模板的汇编版本(我们使用 " 粉尘编译器 " 汇编)位于 " 资产/平板/家庭.js " 。这个已编译的模板稍后将包含在脚本标记中. 一旦使用QQscript src=/templates/home.js"/QQ标记将模板(模板)自动添加到"前端"中的"dust.cache"对象. 现在,要重新提交这个模板,我们使用dust.render ("home",obj, callback Function)'. 您可以检查 assets/js/ clickHandler.js` 中的代码,以便更好地了解代码.

一个名为xxx的 Dust 模板是在一个名为xxx.dust的文件中创建的。你可以拥有多个.dust 文件,并将一个 dust.js 模板引用为另一个模板的一部分。这是组件或可重复使用的模板的基础,用于多个页面上共同的标题和脚印等任务。请注意,在这里的例子中使用了.dust 文件扩展,但.tl 也常见。因为它只关乎构建过程,你可以使用任何扩展功能。

部分引用语法 {> 名称 /} 也支持路径,因此您可以在像 shared/header.dust 这样的路径上有一个模板,并将其引用为 {> "shared/header" /}'。

阅读更多关于 Dust-Tutorial 在 github

您的最终layout.dust应该是这样的:

 1[label layout.dust]
 2<!DOCTYPE html>
 3<html>
 4<head>
 5  <title>Dust SPA</title>
 6  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 7</head>
 8
 9<body>
10  <div class="container">
11    <div class="header">
12      <nav>
13        <ul class="nav nav-pills pull-right">
14          <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
15          <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
16          <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
17        </ul>
18      </nav>
19      <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
20    </div>
21    <br/>
22    <div id="template">
23      {> "partials/home"/}
24    </div>
25    <footer class="footer">
26      <p>Styled by Bootstrap&copy;</p>
27    </footer>
28  </div>
29
30  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
31  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
32  <script type="text/javascript" src="/templates/home.js"></script>
33  <script type="text/javascript" src="/templates/about.js"></script>
34  <script type="text/javascript" src="/templates/contact.js"></script>
35  <script type="text/javascript" src="/js/clickHandler.js"></script>
36</body>
37
38</html>

第7步:测试应用程序

打开服务器:

1sails lift

将您的浏览器指向以下位置: your_server_ip:1337

测试 SPA 通过点击前 3 个链接: 主页 ,** 关于** ,** 联系**

结论

精彩!我们成功构建了一个同形网站,允许在客户端和服务器上使用相同的模板,我们建立了一个单页应用程序(SPA)网站,并了解了使用SailsJS框架。

外部左翼

如果您想更多地了解所使用的技术,您可以访问下面列出的链接。

NodeJS * SailsJS * DustJS

Published At2015-05-27 23:38 UTC

Categories with 技术

Tagged with