TOC

Как создать SPA (одностраничные приложения) с использованием NodeJS, SailsJS и DustJS в Ubuntu 14.04

Вступление

  • Node.js® * - это платформа, основанная на среде выполнения Chrome JavaScript, для простого создания быстрых, масштабируемых сетевых приложений. Node.js использует управляемую событиями неблокирующую модель ввода-вывода, которая делает ее легкой и эффективной, идеально подходящей для приложений с интенсивным использованием данных в реальном времени, работающих на распределенных устройствах.

  • Sails * - это инфраструктура NodeJS для внутреннего сервера. Основанный на шаблоне Model-View-Controller, он позволяет быстро разрабатывать приложения. У Sails есть встроенная интеграция для веб-сокетов для push-сообщений в реальном времени. Он использует Waterline ORM в качестве ORM по умолчанию, что делает его независимым от базы данных. Другими словами, он позволяет выполнять операции с базами данных в спектре SQL, а также в базах данных, отличных от SQL. Самое главное, Sails обеспечивает правильную структуру для вашего приложения.

  • Dust * - это шаблонизатор JavaScript. Он наследует свой внешний вид от семейства языков ctemplate и предназначен для асинхронной работы как на сервере, так и в браузере.

  • SPA * означает * Одностраничное приложение *. Это приложения, которые помещаются на одной веб-странице. Как только сайт открывается, страница не перезагружается после этого. Целью такого приложения является обеспечение удобного взаимодействия с пользователем за счет сокращения времени загрузки страницы и обеспечения простого перехода на разные страницы, как в приложениях для настольных компьютеров.

В этом руководстве мы настроим сервер NodeJS с SailsJS в качестве основы для управления нашим кодом. Мы будем использовать DustJS для изоморфных шаблонов, используемых как на клиенте, так и на сервере.

цели

Наша главная цель - использовать изоморфные (или одинаковые) шаблоны на клиенте и на сервере. Это здорово, потому что

  • Меньше кода для написания и поддержки одинаковых шаблонов как на клиенте, так и на сервере

  • Поисковая система индексируется, так как любую страницу можно получить непосредственно с сервера.

Предпосылки

В этом руководстве предполагается, что вы создали Ubuntu 14.04 x64 Droplet. Было протестировано с 512 МБ ОЗУ. + Вам также понадобится пользователь с доступом sudo для установки пакетов.

Шаг 1 - Установка программного обеспечения

Во-первых, для компиляции и установки собственных аддонов из npm вам необходимо установить инструменты сборки:

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

Затем установите NodeJs и NPM, используя следующие команды (из PPA * Chris Lea *):

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

Затем установите + SailsJs +:

sudo npm -g install sails

Шаг 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.

Затем установите пакеты + dustjs + и другие зависимости пакетов в файле + package.json +:

sudo npm install

Теперь мы используем + sails lift + для поднятия сервера:

sails lift

Посетите +: 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 + будет нашей целевой страницей. Все запросы будут поступать на эту страницу для первой страницы. После этого запросы будут обрабатываться во внешнем интерфейсе.

Создайте файл + 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> + куда будут загружаться наши шаблоны

Далее нам нужно установить представление для + / + в + rout.js. Откройте + config / rout.js + и отредактируйте его в:

routes.js

'/': {
  view: 'layout'
   }

Теперь давайте поднимем сервер (если сервер уже запущен, нажмите Ctrl + C, чтобы остановить его.) И проверим наш прогресс. Запустите эту команду из каталога + dust spa + (это наш текущий каталог):

sails lift

И укажите ваш браузер в следующем месте: +: 1337 +

Если вы видите страницу, тогда давайте продолжим. Если нет, пожалуйста, просмотрите предыдущие шаги. Кроме того, ссылки не будут работать на этом этапе.

Шаг 5 - Создание частичных

Создайте каталог + 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

Теперь у вас должно быть три файла в папке + assets / templates +:

  1. + + Home.js

  2. + + About.js

  3. + + 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 / click Handler.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 + (может содержать что угодно, здесь он содержит счетчик просмотров)

Ссылайтесь на этот новый файл + click Handler.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>

Что делает вышеуказанное изменение ?! Это * Повторное использование шаблона *. Движок представления + dust.js заменит` + {> "partials / home" /} + содержимым файла + view / partials / home.dust + `.

Как этот шаблон будет использоваться повторно? Скомпилированная версия этого шаблона (которую мы скомпилировали с помощью + dust-compiler +) находится в + assets / templates / home.js +. Этот скомпилированный шаблон будет включен в тег script позже. Как только шаблон включен с помощью тега + <script src =" / templates / home.js "/> +, он (шаблон) автоматически добавляется к объекту + dust.cache + в + frontend + , Теперь, чтобы перерисовать этот шаблон, мы используем + dust.render (" home ", obj, callbackFunction) +. Вы можете проверить код в + assets / js / click Handler.js для лучшего понимания кода.

Шаблон Dust с именем + xxx + создается в файле с именем + xxx.dust +. Вы можете иметь несколько файлов + .dust + и ссылаться на один шаблон dust.js как на часть другого. Это основа для «компонентов» или шаблонов многократного использования для таких задач, как общий верхний и нижний колонтитулы на нескольких страницах. Обратите внимание, что расширение «+ .dust » используется здесь в примерах, но также часто встречается « .tl +». Поскольку это имеет значение только для процесса сборки, вы можете использовать любое расширение, которое вам подходит.

Синтаксис частичной ссылки + {> name /} + также поддерживает пути, так что вы можете иметь шаблон с таким путем, как + shared / header.dust +, и ссылаться на него как `+ {>« shared / header »/} + `. Это позволяет организовать партиалы в библиотечно-подобные структуры с использованием каталогов.

Узнайте больше о Partials на github.

Ваш финальный + 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

Укажите в браузере следующее: +: 1337 +

Проверьте SPA, нажав на 3 верхних ссылки: * Главная *, * О *, * Контакт *

Заключение

Потрясающие ! Мы успешно создали изоморфный веб-сайт, который позволял использовать один и тот же шаблон как на клиенте, так и на сервере. + Мы создали сайт одностраничного приложения (SPA), а также получили представление об использовании платформы SailsJS.

Внешняя ссылка

Если вы хотите узнать больше об используемых технологиях, вы можете посетить ссылки, указанные ниже.

Related