Nội dung
- Bàn thắng - Yêu cầu - Bước 1 - Cài đặt phần mềm - Bước 2 - Tạo một dự án cánh buồm mới - Bước 3 - Cài đặt View Engine - Bước 4 - Tạo layout.dust - Bước 5 - Tạo Partials - Bước 6 - Biên dịch mẫu - Bước 7 - Kiểm tra ứng dụng - Kết luận - Liện kết ngoại

Thứ tư, 27/05/2015 | 00:00 GMT+7

Cách xây dựng các SPA (Ứng dụng một trang) bằng NodeJS, SailsJS và DustJS trong Ubuntu 14.04

Node.js® là một nền tảng được xây dựng dựa trên thời gian chạy JavaScript của Chrome để dễ dàng xây dựng các ứng dụng mạng nhanh, có thể mở rộng. Node.js sử dụng mô hình I / O hướng sự kiện, không chặn, giúp nó nhẹ và hiệu quả, hoàn hảo cho các ứng dụng thời gian thực sử dụng nhiều dữ liệu chạy trên các thiết bị phân tán.

Sails là một khung NodeJS cho server backend . Dựa trên mẫu Model-View-Controller, nó cho phép phát triển nhanh các ứng dụng. Sails đã tích hợp sẵn cho các socket web cho các thông báo đẩy trong thời gian thực. Nó sử dụng Waterline ORM làm ORM mặc định, làm cho nó trở thành bất khả tri database . Nói cách khác, nó cho phép các hoạt động database trên nhiều SQL cũng như các database không phải SQL. Quan trọng nhất, Sails cung cấp một cấu trúc thích hợp cho ứng dụng của bạn.

Dust là một công cụ mẫu JavaScript. Nó kế thừa giao diện từ họ ngôn ngữ ctemplate và được thiết kế để chạy không đồng bộ trên cả server và trình duyệt.

SPA là viết tắt của Single Page Application . Đây là những ứng dụng phù hợp trên một trang web. Khi trang web mở ra, trang sẽ không reload sau đó. Mục tiêu của ứng dụng như vậy là cung cấp trải nghiệm user linh hoạt bằng cách cắt giảm thời gian tải trang và cung cấp chuyển đổi dễ dàng sang các trang khác nhau, giống như ứng dụng dành cho máy tính để bàn.

Trong hướng dẫn này, ta sẽ cài đặt một server NodeJS với SailsJS làm khuôn khổ để quản lý mã của ta . Ta sẽ sử dụng DustJS cho các mẫu đẳng hình được sử dụng trên cả client và server .

Bàn thắng

Mục đích chính của ta là sử dụng các mẫu Isomorphic (hoặc tương tự) trên client cũng như trên server . Điều này thật tuyệt vời bởi vì

Ít mã để viết và duy trì như các mẫu giống nhau trên cả client và server
Công cụ tìm kiếm có thể lập index vì bất kỳ trang nào cũng có thể được tải trực tiếp từ server

Yêu cầu

Hướng dẫn này giả định bạn đã tạo một server Ubuntu 14.04 x64. Nó đã được thử nghiệm với 512 MB RAM.
Bạn cũng cần một user có quyền truy cập sudo để cài đặt các gói.

Bước 1 - Cài đặt phần mềm

Đầu tiên, để biên dịch và cài đặt các addon root từ npm, bạn cần cài đặt các công cụ xây dựng:

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

Sau đó, cài đặt NodeJs và NPM bằng các lệnh sau (từ PPA của Chris Lea ):

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

Lưu ý: Điều này cũng cài đặt Trình quản lý gói Node hoặc npm .
NPM được sử dụng để cài đặt các gói nút. Nó giống như apt-get cho NodeJs.
Ta sẽ sử dụng nó để cài đặt các module nút như Sails, dust-compiler và các yêu cầu khác.

Tiếp theo, cài đặt SailsJs :

sudo npm -g install sails

Lưu ý: Điều này cài đặt version mới nhất của Sails. Bạn có thể đọc thêm về Sails.js trên trang web của họ.

Bước 2 - Tạo một dự án cánh buồm mới

Tạo một ứng dụng mới:

sails new dustspa 
cd dustspa

Sails sẽ tạo folder dustspa với cấu trúc sau:

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

Tìm các dòng sau trong file package.json :

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

Thay đổi chúng thành như sau:

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

Trình biên dịch bụi được sử dụng để biên dịch các mẫu bụi thành các mẫu JavaScript bụi.

Tiếp theo, cài đặt các gói dustjs cũng như các gói phụ thuộc khác trong file package.json :

sudo npm install

Bây giờ, ta sử dụng bộ sails lift để nâng server :

sails lift

Truy cập your_server_ip :1337 để xem trang chủ mặc định. Dừng server bằng Ctrl+C khi hoàn tất.

Bước 3 - Cài đặt View Engine

Đầu tiên, ta đặt View Engine thành dust :

Trong config/views.js , thay đổi engine: 'ejs' thành engine: 'dust' engine: 'ejs' engine: 'dust' :

nano ./config/views.js

Chuyển đến dòng:

    engine: 'ejs',

và thay đổi nó thành:

    engine: 'dust',

Sau khi thay đổi xong, nhấn Ctrl+X (lưu), Y (xác nhận tên file ) và ENTER (lưu và thoát).

Ta sẽ sử dụng phương pháp trên để chỉnh sửa tất cả các file trong tương lai.

Bước 4 - Tạo layout.dust

Nội dung từ layout.dust sẽ là trang đích của ta . Tất cả các yêu cầu sẽ đến trang này cho trang đầu tiên. Sau đó, các yêu cầu sẽ được xử lý ở giao diện user .

Tạo file layout.dust trong folder dạng views :

touch views/layout.dust

Sao chép mã HTML sau vào 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 khá đơn giản. Nó sử dụng:

Bootstrap để tạo kiểu tóc.
Một chuyển đơn giản cho các liên kết chuyển .
<div id="template">...</div> nơi các mẫu của ta sẽ tải

Tiếp theo, ta cần cài đặt chế độ xem cho / trong routes.js . Mở config/routes.js và chỉnh sửa nó thành:

route.js

'/': {    view: 'layout'     }

Bây giờ, hãy nhấc server lên (Nếu server đã hoạt động, hãy nhấn Ctrl + C để dừng nó.) Và kiểm tra tiến trình của ta . Chạy lệnh này từ folder dustspa (là folder currect của ta ):

sails lift

Và trỏ trình duyệt của bạn đến vị trí sau: server_ip :1337

Nếu bạn có thể nhìn thấy trang, thì hãy tiếp tục. Nếu không, vui lòng xem lại các bước trước đó. Ngoài ra, các liên kết sẽ không hoạt động tại thời điểm này.

Bước 5 - Tạo Partials

Lưu ý: Các phần (hoặc mẫu) là một phần của trang. Trong SPA, ta không thay thế toàn bộ trang, chỉ một phần.

Tạo folder partials trong views folder , và thay đổi vào folder mới này:

mkdir views/partials 
cd views/partials

Tạo các home.dust , about.dust và contact.dust trong folder partials với nội dung sau:

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>

Bước 6 - Biên dịch mẫu

Các mẫu bụi cần được biên dịch trước khi có thể sử dụng chúng trên giao diện user .

Hãy cài đặt dust compiler :

sudo npm install -g dust-compiler

Ta sẽ giữ tất cả các mẫu đã biên dịch của ta trong nội dung assets/templates . Thay đổi folder dusts chính:

cd ../..

Bây giờ, hãy biên dịch các dust templates :

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

Bây giờ, bạn sẽ có ba file trong folder nội dung assets/templates :

home.js
about.js
contact.js

Bây giờ, ta có tất cả các file cần thiết.

Đầu tiên, trong views/layout.dust , hãy thêm thư viện dust-js và file mẫu vào bên trong <body> ở cuối:

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>

Sau khi thực hiện điều đó, ta cần thêm một tập lệnh để nắm bắt các nhấp chuột vào liên kết và hiển thị mẫu được yêu cầu. Tạo nội dung assets/js/clickHandler.js với nội dung sau:

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);   }  })();

Tập lệnh trên rất đơn giản. Nó làm như sau:

Chụp các sự kiện nhấp chuột vào các liên kết
Extract tên mẫu cho một liên kết từ thuộc tính data-template
Tạo kiểu cho liên kết được nhấp
Kết xuất mẫu bằng cách sử dụng hàm dust.render và chuyển một đối tượng viewCount (có thể chứa bất kỳ thứ gì, ở đây nó chứa số lượt truy cập chế độ xem)

Tham khảo file clickHandler.js mới này bằng cách chỉnh sửa các views/layout.dust và thêm phần sau vào bên trong các <body> ở cuối:

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

Cuối cùng, ta cần chỉnh sửa layout.dust trong folder views .

Thay đổi <div id="template">...</div> trong views/layout.dust thành:

layout.dust

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

Thay đổi trên có tác dụng gì ?! Đây là Tái sử dụng Mẫu . Công cụ chế độ xem dust.js sẽ thay thế {> "partials/home"/} bằng nội dung của file tin view/partials/home.dust .

Làm thế nào mẫu này sẽ được sử dụng lại? Phiên bản đã biên dịch của mẫu này ( ta đã biên dịch bằng dust-compiler ) nằm trong assets/templates/home.js Mẫu đã biên dịch này sẽ được đưa vào thẻ script sau này. Khi một mẫu được đưa vào bằng <script src="/templates/home.js"/> , nó (mẫu) sẽ tự động được thêm vào đối tượng dust.cache trong frontend . Bây giờ, để kết xuất lại mẫu này, ta sử dụng dust.render("home", obj, callbackFunction) . Bạn có thể kiểm tra mã trong assets/js/clickHandler.js để hiểu rõ hơn về mã.

Mẫu Bụi có tên xxx được tạo trong file có tên xxx.dust . Bạn có thể có nhiều file .dust và tham chiếu một mẫu Dust.js như một phần của một mẫu khác. Đây là cơ sở cho các "thành phần" hoặc các mẫu có thể sử dụng lại cho các việc như đầu trang và chân trang chung trên nhiều trang. Lưu ý phần mở rộng file .dust được sử dụng ở đây trong các ví dụ, nhưng .tl cũng thường thấy. Vì nó chỉ quan trọng đối với quá trình xây dựng, bạn có thể sử dụng bất kỳ tiện ích mở rộng nào phù hợp với mình.

Cú pháp tham chiếu một phần {> name /} cũng hỗ trợ đường dẫn để bạn có thể có một mẫu tại một đường dẫn như shared/header.dust và tham chiếu nó là {> "shared/header" /} . Điều này cho phép các phần tử được tổ chức thành các cấu trúc giống như thư viện bằng cách sử dụng các folder .

Đọc thêm về Partials trên github .

layout.dust cuối cùng của bạn sẽ trông như thế này:

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>

Bước 7 - Kiểm tra ứng dụng

Nâng server :

sails lift

Trỏ trình duyệt của bạn đến phần sau: your_server_ip :1337

Kiểm tra SPA bằng cách nhấp vào 3 liên kết hàng đầu: Trang chủ , Giới thiệu , Liên hệ

Kết luận

Tuyệt vời ! Ta đã tạo thành công một trang web isomorphic cho phép sử dụng cùng một mẫu trên cả client và server .
Ta đã xây dựng một Trang web Ứng dụng Trang đơn (SPA) và cũng đã hiểu về cách sử dụng khung công tác SailsJS.

Liện kết ngoại

Nếu bạn muốn đọc thêm về các công nghệ được sử dụng, bạn có thể truy cập các liên kết được liệt kê bên dưới.

Tags:

Các tin liên quan