Ubuntu14.04でNodeJS、SailsJS、DustJSを使用してSPA（シングルページアプリケーション）を構築する方法

投稿日: 2022-08-11 2022-10-22
タグ: Node.js, ubuntu

序章

Node.js®は、ChromeのJavaScriptランタイム上に構築されたプラットフォームであり、高速でスケーラブルなネットワークアプリケーションを簡単に構築できます。 Node.jsは、イベント駆動型の非ブロッキングI / Oモデルを使用しており、軽量で効率的であり、分散デバイス間で実行されるデータ集約型のリアルタイムアプリケーションに最適です。

Sails は、バックエンドサーバー用のNodeJSフレームワークです。 Model-View-Controllerパターンに基づいて、アプリケーションの迅速な開発を可能にします。 Sailsには、リアルタイムプッシュメッセージ用のWebソケットの統合が組み込まれています。 Waterline ORM をデフォルトのORMとして使用するため、データベースに依存しません。つまり、SQL以外のデータベースだけでなく、さまざまなSQLデータベースでのデータベース操作が可能になります。最も重要なことは、Sailsがアプリケーションに適切な構造を提供することです。

DustはJavaScriptテンプレートエンジンです。 ctemplateファミリーの言語から外観を継承し、サーバーとブラウザーの両方で非同期的に実行されるように設計されています。

SPA は、シングルページアプリケーションの略です。これらは、単一のWebページに適合するアプリケーションです。サイトが開くと、それ以降はページがリロードされません。このようなアプリケーションの目標は、デスクトップアプリと同じように、ページの読み込み時間を短縮し、さまざまなページに簡単に移行できるようにすることで、流動的なユーザーエクスペリエンスを提供することです。

このチュートリアルでは、コードを管理するためのフレームワークとしてSailsJSを使用してNodeJSサーバーをセットアップします。クライアントとサーバーの両方で使用される同形テンプレートにはDustJSを使用します。

目標

私たちの主な目的は、サーバーだけでなくクライアントでも同形（または同じ）テンプレートを使用することです。これは素晴らしいです

クライアントとサーバーの両方で同じテンプレートとして記述および維持するコードが少なくなります
任意のページをサーバーから直接フェッチできるため、検索エンジンはインデックスに登録可能

前提条件

このチュートリアルは、Ubuntu14.04×64ドロップレットを作成したことを前提としています。 512MBのRAMでテストされました。パッケージをインストールするには、sudoアクセス権を持つユーザーも必要です。

ステップ1—ソフトウェアのインストール

まず、npmからネイティブアドオンをコンパイルしてインストールするには、ビルドツールをインストールする必要があります。

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

次に、次のコマンド（ ChrisLeaのPPAから）を使用してNodeJとNPMをインストールします。

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

注：これにより、ノードパッケージマネージャーまたは npm. NPMは、ノードパッケージのインストールに使用されます。そのような apt-get NodeJの場合。これを使用して、Sailsなどのノードモジュールをインストールします。 dust-compiler、およびその他の要件。

次に、インストールします SailsJs:

sudo npm -g install sails

注：これにより、最新バージョンのSailsがインストールされます。 Sails.jsの詳細については、Webサイトを参照してください。

ステップ2—新しい帆プロジェクトを作成する

新しいアプリケーションを作成します。

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—ビューエンジンの設定

まず、 ViewEngineをに設定します 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 ランディングページになります。すべてのリクエストは、最初のページでこのページに送信されます。その後、リクエストはフロントエンドで処理されます。

ファイルを作成する layout.dust の中に views フォルダ：

touch views/layout.dust

次のHTMLコードをにコピーします layout.dust:

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は非常に単純です。それは使用しています：

スタイリング用のブートストラップ。
ナビゲーションリンクのシンプルなナビゲーション。
<div id="template">...</div> テンプレートが読み込まれる場所

次に、ビューを設定する必要があります / の routes.js. 開ける config/routes.js 次のように編集します。

ルート.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 次の内容のディレクトリ：

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

これで、3つのファイルが必要になります assets/templates フォルダ：

home.js
about.js
contact.js

これで、必要なすべてのファイルができました。

まず、 views/layout.dust、を追加します dust-js 内のライブラリとテンプレートファイル <body> 最後のタグ：

layout.dust

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

layout.dust

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

上記の変更は何をしますか？！これはテンプレートの再利用です。 The 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 ファイルを作成し、1つのdust.jsテンプレートを別のテンプレートの一部として参照します。これは、複数のページの共通のヘッダーやフッターなどのタスクの「コンポーネント」または再利用可能なテンプレートの基礎です。に注意してください .dust ここでは例でファイル拡張子が使用されていますが、 .tl よく見られます。ビルドプロセスにのみ関係するため、適切な拡張機能を使用できます。

部分参照構文 {> name /} パスもサポートしているため、次のようなパスにテンプレートを作成できます shared/header.dust そしてそれを参照してください {> "shared/header" /}. これにより、ディレクトリを使用してパーシャルをライブラリのような構造に編成できます。

githubでPartialsの詳細をご覧ください。

あなたの決勝 layout.dust 次のようになります。

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をテストします：ホーム、バージョン情報、連絡先

結論

素晴らしい！クライアントとサーバーの両方で同じテンプレートを使用できる同形のWebサイトを正常に構築しました。シングルページアプリケーション（SPA）Webサイトを構築し、SailsJSフレームワークの使用についても理解しました。

外部リンク

使用されているテクノロジーについて詳しく知りたい場合は、以下のリンクにアクセスしてください。

getdocs

13036