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

原创

苏子晨

修改于 2018-09-21 09:58:13

3K0

修改于 2018-09-21 09:58:13

介绍

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

Sails是后端服务器的NodeJS框架。它基于模型 - 视图 - 控制器模式，允许快速开发应用程序。Sails内置了用于实时推送消息的Web套接字集成。它使用Waterline ORM作为默认ORM，使其与数据库无关。换句话说，它允许跨越一系列SQL以及非SQL数据库进行数据库操作。最重要的是，Sails为您的应用程序提供了适当的结构。

Dust是一个JavaScript模板引擎。它继承了ctemplate系列语言的外观，旨在在服务器和浏览器上异步运行。

SPA代表单页应用程序。这些是适合单个网页的应用程序。网站打开后，页面不会重新加载。此类应用程序的目标是通过减少页面加载时间并提供轻松转换到不同页面来提供流畅的用户体验，就像桌面应用程序一样。

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

目标

我们的主要目标是在客户端和服务器上使用Isomorphic（或相同）模板。这太棒了，因为

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

准备

本教程假设您已经创建了一个Ubuntu 14.04 x64 腾讯云CVM。它已使用过512 MB的RAM进行了测试。您还需要具有sudo访问权限的用户来安装软件包。(你可能需要一台已经设置好可以使用sudo命令的非root账号的Ubuntu服务器，并且已开启防火墙。没有服务器的同学可以在这里购买，不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后再购买服务器。)

第1步 - 安装软件

首先，要从npm编译和安装本机插件，您需要安装构建工具：

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

然后，使用以下命令安装NodeJs和NPM（来自Chris Lea的PPA）：

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

注意：这也会安装节点包管理器或npm。 NPM用于安装节点包。它就像apt-get对于NodeJs一样。我们将使用它来安装Sails dust-compiler等节点模块，以及其他需求。

接下来，安装SailsJs：

sudo npm -g install sails

注意：这将安装最新版本的Sails。您可以在他们的网站上阅读有关Sails.js的更多信息。

第2步 - 创建新的Sails项目

创建一个新应用程序：

sails new dustspa
cd dustspa

Sails将使用以下结构创建dustspa目录：

--config
--views
---api
--tasks
--assets
README
.gitignore
package.json
.sailsrc
app.js
Gruntfile.js

在package.json文件中找到以下行：

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

将它们更改为以下内容：

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

灰尘编译器用于编译灰尘模板以清除JavaScript模板。

接下来，在package.json文件中安装dustjs软件包以及其他软件包依赖项：

sudo npm install

现在，我们sails lift用来解除服务器：

sails lift

访问your_server_ip:1337以查看默认主页。完成后停止使用服务器Ctrl+C。

第3步 - 设置视图引擎

首先，我们将View Engine设置为dust：

在config/views.js，engine: 'ejs'改为engine: 'dust'：

nano ./config/views.js

转到行：

    engine: 'ejs',

并将其更改为：

    engine: 'dust',

更改完成后，按Ctrl+X（保存），Y（确认文件名）和ENTER（保存并退出）。

我们将来会使用上面的方法编辑所有文件。

第4步 - 创建layout.dust

来自的内容layout.dust将是我们的目标网页。所有请求都将转到第一页的此页面。之后，请求将在前端处理。

在views文件夹中创建layout.dust文件：

touch views/layout.dust

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

<!DOCTYPE html>
<html>
<head>
  <title>Dust SPA</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <nav>
        <ul class="nav nav-pills pull-right">
          <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
          <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
          <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
        </ul>
      </nav>
      <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
    </div>
    <br/>
    <div id="template">
      <h1>Partial Goes Here</h1>
    </div>
    <footer class="footer">
      <p>Styled by Bootstrap&copy;</p>
    </footer>
  </div>
</body>
</html>

HTML非常简单。它用：

Bootstrap用于造型。
导航链接的简单导航。
我们的模板将加载的位置是<div id="template">...</div>

接下来，我们需要为/in 设置视图routes.js。打开config/routes.js并编辑它：

'/': {
   view: 'layout'
    }

现在，让我们解除服务器（如果服务器已经启动，请按Ctrl + C将其停止。），然后检查我们的进度。从dustspa目录（这是我们的当前目录）运行此命令：

sails lift

并将浏览器指向以下位置： droplet_ip:1337

如果您可以看到该页面，那么让我们继续。如果没有，请查看以前的步骤。此外，链接在此时不起作用。

第5步 - 创建部分

注意：部分（或模板）是页面的一部分。在SPA中，我们不会替换整个页面，只是部分。

在目录partials中创建views目录，然后切换到这个新目录：

mkdir views/partials
cd views/partials

在partials目录创建home.dust，about.dust和contact.dust文件，内容如下：

home.dust

    <div class="jumbotron">
      <h1>Home Page
        {?home}<small class="pull-right">Visit Count: {home}</small>{/home}
      </h1>
      <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>
      <p>
        <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
        <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
      </p>
    </div>

about.dust

    <div class="panel panel-primary">
      <div class="panel-heading">
      <h1 class="panel-title">About Us
        {?about}<kbd class="pull-right">Visit Count: {about}</kbd>{/about}
      </h1>
      </div>
      <div class="panel-body">
        <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>
        <br>
        <p>
          <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
          <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
      </p>
      </div>
    </div>

contact.dust

    <div class="well">
      <h1 class="align-center">Show us some love and we'll get back to you !
        {?contact}<small class="pull-right">Visit Count: {contact}</small>{/contact}
      </h1>
      <hr/>
      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
      </div>
      <br/>
      <p>
      <a class="btn btn-lg btn-success" href="#" role="button">Send Contact</a>
      </p>
    </div>

第6步 - 编译模板

在可以在前端使用之前，需要编译灰尘模板。

我们安装dust compiler：

sudo npm install -g dust-compiler

我们将保留所有已编译的模板assets/templates。切换到主dusts目录：

cd ../..

现在，编译dust templates：

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

现在，您的文件assets/templates夹中应该有三个文件：

home.js
about.js
contact.js

现在，我们拥有所有必需的文件。

首先，在views/layout.dust中 <body>标签的最后添加dust-js函数库和模板文件：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>

<script type="text/javascript" src="/templates/home.js"></script>
<script type="text/javascript" src="/templates/about.js"></script>
<script type="text/javascript" src="/templates/contact.js"></script>

完成后，我们需要添加一个脚本来捕获链接点击并呈现所需的模板。使用以下内容创建assets/js/clickHandler.js：

    (function () {

  var links = document.getElementsByClassName("links"),
  templateDiv = document.getElementById("template"),
  nav = document.querySelector('nav > ul'),
  clicked = false, viewCount = { home: 2, about: 1, contact: 1 };

  function clickHandler(e) {
    var target = event.target,
    templateName = this.getAttribute("data-template");
    if(clicked) {
      clicked.removeAttribute('class');
    }
    else {
      nav.querySelector('.active').removeAttribute('class');
    }
    target.parentElement.setAttribute('class','active');
    clicked = target.parentElement;

    dust.render(templateName, viewCount, function (err, out) {
      if(err) console.log('Error:',err);
      else {
        viewCount[templateName]++;
        templateDiv.innerHTML = out;
      }
    });
  };

  for(var i = 0; i < links.length; i++){
    links[i].addEventListener('click', clickHandler, false);
  }

})();

上面的脚本非常简单。它执行以下操作：

捕获链接上的单击事件
从data-template属性中提取链接的模板名称
对单击的链接进行样式化
使用dust.render函数渲染模板并传递一个对象viewCount（可以包含任何内容，此处它包含视图访问的计数）

通过编辑views/layout.dust并在最后的<body>标记内添加以下内容来引用此新的clickHandler.js文件：

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

最后，我们需要layout.dust在views目录中进行编辑。

将views/layout.dust中的<div id="template">...</div>更改为：

<div id="template">
  {> "partials/home"/}
</div>

以上变化做了什么？！这是模板重用。该dust.js视图引擎将以文件view/partials/home.dust的内容取代{> "partials/home"/}。

该模板将如何重用？这个模板的编译版本（我们编译使用dust-compiler）驻留在assets/templates/home.js。此编译的模板稍后将包含在脚本标记中。使用<script src="/templates/home.js"/>标记包含模板后，它（模板）会自动添加到frontend的dust.cache对象中。现在，为了重新渲染这个模板，我们使用dust.render("home", obj, callbackFunction)。您可以检查assets/js/clickHandler.js中的代码，以便更好地理解代码。

名为xxx的Dust模板是在名为xxx.dust的文件中创作出来的。您可以拥有多个.dust文件，并将一个dust.js模板作为另一个模板的一部分。这是多个页面上常见页眉和页脚等任务的“组件”或可重用模板的基础。请注意，.dust文件扩展名在示例中使用，但.tl也常见。由于它只对构建过程有用，因此您可以使用任何扩展程序。

部分引用语法{> name /}也支持路径，因此您可以在路径上拥有模板shared/header.dust并将其引用为{> "shared/header" /}。这允许使用目录将部分组织成类似于库的结构。

在github上阅读有关Partials的更多信息。

你最终的layout.dust应该是这样的：

<!DOCTYPE html>
<html>
<head>
  <title>Dust SPA</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="header">
      <nav>
        <ul class="nav nav-pills pull-right">
          <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
          <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
          <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
        </ul>
      </nav>
      <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
    </div>
    <br/>
    <div id="template">
      {> "partials/home"/}
    </div>
    <footer class="footer">
      <p>Styled by Bootstrap&copy;</p>
    </footer>
  </div>

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
  <script type="text/javascript" src="/templates/home.js"></script>
  <script type="text/javascript" src="/templates/about.js"></script>
  <script type="text/javascript" src="/templates/contact.js"></script>
  <script type="text/javascript" src="/js/clickHandler.js"></script>
</body>

</html>

第7步 - 测试应用程序

运行服务器：

sails lift

将浏览器指向以下内容： your_server_ip:1337

单击前3个链接测试SPA：主页，关于，联系

结论

太棒了！我们成功构建了一个同构网站，允许在客户端和服务器上使用相同的模板。我们构建了单页应用程序（SPA）网站，并了解了使用SailsJS框架。

外部链接

如果您想了解有关所用技术的更多信息，可以访问下面列出的链接。

更多Ubuntu教程请前往腾讯云+社区学习更多知识。

参考文献：《How To Build SPAs (Single Page Applications) using NodeJS, SailsJS and DustJS in Ubuntu 14.04》

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

其他

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

其他

登录后参与评论

0 条评论

热度