如何建立使用的NodeJS，SailsJS和DustJS的SPA（单页应用程序）在Ubuntu 14.04-系统运维-优客志

介绍

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

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

灰尘是一个JavaScript模板引擎。它继承自ctemplate系列语言的外观，并设计为在服务器和浏览器上异步运行。

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

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

目标

我们的主要目的是在客户端以及服务器上使用同构（或相同）模板。这是真棒，因为

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

先决条件

本教程假设您已创建一个Ubuntu 14.04 x64 Droplet。它用512 MB的RAM进行测试。
您还需要具有sudo访问权限的用户来安装软件包。

第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。我们将用它来安装节点模块，如帆， dust-compiler ，以及其他要求。

接下来，安装SailsJs ：

sudo npm -g install sails

注：此安装最新版本的帆船之都。你可以阅读更多有关Sails.js在他们的网站上。

第2步 - 创建新的Sails项目

创建新应用程序：

sails new dustspa
cd dustspa

帆将创建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模板。

接下来，安装dustjs封装以及在其他软件包的依赖关系package.json文件：

sudo npm install

现在，我们用sails lift抬起服务器：

sails lift

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

第3步 - 设置视图引擎

首先，我们设置视图引擎 dust ：

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

nano ./config/views.js

转到行：

    engine: 'ejs',

并将其更改为：

    engine: 'dust',

变更完成后，按Ctrl+X （保存），Y（确认文件名），然后输入（保存并退出）。

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

第4步 - 创建layout.dust

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

创建文件layout.dust的views文件夹：

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>在那里我们的模板将加载

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

routes.js

'/': {
   view: 'layout'
    }

现在，让我们提起服务器（如果服务器已经启动，请按Ctrl + C停止它），并检查我们的进度。从运行此命令dustspa目录（这是我们当期的目录）：

sails lift

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

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

第5步 - 创建部分

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

创建目录partials的views目录，并切换到这个新的目录：

mkdir views/partials
cd views/partials

创建home.dust ， about.dust和contact.dust中的文件partials包含以下内容目录：

家庭

    <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>

大约

    <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 ，添加dust-js里面库和模板文件<body>在最后标签：

布局

<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包含以下内容：

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 （可以包含任何东西，在这里它包含的视图访问计数）

参考这个新clickHandler.js通过编辑文件views/layout.dust并添加里面以下<body>在最后标签：

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

最后，我们需要编辑layout.dust的views目录。

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

布局

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

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

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

命名灰尘模板xxx在一个名为撰写xxx.dust 。你可以有多个.dust文件，并引用一个dust.js模板作为另一个的一部分。这是“组件”或任务的可重用模板的基础，如多页上的公共页眉和页脚。注意， .dust文件扩展名用在这里的例子，但是.tl也常见。因为它只与构建过程有关，你可以使用任何扩展为你工作。

部分引用语法{> name /}还支持路径，这样你就可以在喜欢的路径有一个模板shared/header.dust ，并引用其作为{> "shared/header" /} 这允许partials使用目录组织成类库结构。

了解更多关于局部模板上github上。

您的最终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框架。

外部链接

如果您想详细了解所使用的技术，您可以访问下面列出的链接。

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

介绍

目标

先决条件

第1步 - 安装软件

第2步 - 创建新的Sails项目

第3步 - 设置视图引擎

第4步 - 创建layout.dust

第5步 - 创建部分

第6步 - 编译模板

第7步 - 测试应用程序

结论

外部链接

相关推荐

推荐云主机，建站更安全

热度排行

热门标签

回顶部

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏