Начните с Express.js

Создание приложений для браузера с Node.js становится утомительным. Express.js. это JavaScript Framework Выделенные одностраничные и многостраничные приложения, размещенные в среде Node.js.

• 29 инструментов веб-дизайна для ускорения вашего рабочего процесса

Он предоставляет тонкий слой фундаментальных функций веб-приложений, которые не будут скрывать функции Node.js, с которыми вы уже знакомы, поэтому вы можете быть уверены, что ваше готовое приложение будет до того, как царапает производительность. И это также отлично подходит для создания устойчивых API, благодаря стекам методов утилиты HTTP и промежуточного программного обеспечения готовы к использованию.

Если вы хотите менее сложный вариант, вы можете создать сайт без кодирования с помощью Строитель сайта Отказ В любом случае, убедитесь, что вы получите свой веб хостинг Сервис права. Хотите начать? Вот что вам нужно знать о Express.js.

01. Создать работоспособную структуру

Express.js гордится тем, что является «неоткрытым» - то есть структура позволяет разработчику смешивать и совпадать с точки зрения архитектур, шаблонов и разметки двигателей. К сожалению, с большой силой приходит большая ответственность.

Команда Express Developer стремится смягчить удар, введя генератор проекта (если вы проектируете вместе с командой, развертывая лучшие облачное хранилище держать вещи сплоченными). Речь идет о вашей рабочей станции в виде пакета NPM и поможет нашим экспериментам со следующей структурой:

 Tamhan @ Tamhan-ThinkPad: ~ / Desktop /
Вещи / 2018aug / futureexpressjs /
Рабочая область $ sudo npm Установить
Экспресс-генератор -G 

Генератор также содержит десятки вариантов проекта - фигуру, сопровождающий этот шаг, показывает полный вывод справки. Для простоты, мы ограничимся проектом на основе настроек по умолчанию. Запустить процесс поколения с:

 Tamhan @ Tamhan-ThinkPad: ~ / Desktop /
Вещи / 2018aug / futureexpressjs /
Рабочая область $ Express Futuretest 

ПРЕДУПРЕЖДЕНИЕ. Двигатель просмотра по умолчанию не будет нефритом в будущих выпусках.

Когда закончите, текущий рабочий каталог содержит новую папку, называемую «Futuretest». Он является домом для нашего тестового проекта и должен быть настроен с использованием команды загрузки пакета NPM. На момент написания, генератор включает в себя генератор Windows View - проект планирует изменить это в ближайшее время, обязывая вас пропустить параметр, выбрав Meance Engine. Альтернативно, запросите использование мопса - это официальный преемник нефритового двигателя:

 CD Futuretest /
NPM установить 

02. Поймите структуру приложений

Теперь, когда генератор проекта сделал свое дело, позвольте нам открыть app.js в редакторе выбора. Это гораздо сокращенная - структура представляет себя следующим образом:

 var indexroter = требуется ('./
маршруты / индекс »);
VAR UsersRouter = требуется ('./
маршруты / пользователи ');
var app = express ();
// Просмотр настройки двигателя
app.set ('Views', path.join (__
Дирнама, «взгляды»));
app.set («Просмотр двигателя», «Джейд»);
app.use (регистратор ('dev'));
app.use (Express.json ());
app.use (Express.urlencoded ({{
Расширенный: false}));
app.use (cookieparter ());
App.use (Express.Static (путь.
Присоединяйтесь (__ dirname, «публично»))); 

Express.js очень модульный. App.js служит точкой входа, где одно или несколько функций «использования ()» позволяют добавлять компоненты, предназначенные для обработки различных запросов. Завершение «SET ()». Позвольте вам настроить параметры в двигателе - один из которых является установка двигателя JADE View, упомянутой на предыдущем шаге.

Фактическое излучение веб-контента происходит в классах маршрутизатора. Для краткости, давайте ограничимся index.js:

 VAR Express = требуется («Express»);
VAR Router = Express.Rooter ();
Router.get ('/', Функция (req, res,
следующий) {
  Res.render («Индекс», {Название:
'Выражать' });
});
module.exports = маршрутизатор; 

«GET ()» снабжен строкой сопоставления и обработчиком событий, который вызывает всякий раз, когда происходит соответствующее событие. В нашем случае метод визуализации выбранного шаблонного двигателя везен возвращает содержимое в браузере пользователя, который вошел в систему.

03. Запустите веб-страницу

На данный момент мы готовы забрать сайт для спина в первый раз. Вернуться к терминалу, содержащему установку Express.js, и вызов на NPM Начните с набора флага отладки:

 Debug = MyApp: * NPM Start 

Когда закончите, введите http: // localhost: 3000 / в браузер выбора, чтобы посмотреть на лесах, созданные генератором проекта. Когда закончите, нажмите Ctrl +. Слияние Чтобы закрыть окно и управление возвратом в интерпретатор командной строки - имейте в виду, что это также закрывает отладку веб-сервера.

04. Это все о маршрутизации и конечных точках

Ради простоты, давайте договоримся о том, что веб-приложение обычно состоит из последовательности точек входа. Express.js обрабатывает их через класс маршрутизатора - подумайте об этом как о репозитории методов, которые вызывают в ответ на входящий запрос.

Добавление новой конечной точки на приложение осуществляется путем добавления нового работника в очередь. Наш автоматический пример создает два типа маршрутизатора, каждый из которых поднимается с помощью метода «требуется»:

 var indexroter = требуется ('./
маршруты /
индекс');
VAR UsersRouter = требуется ('./
маршруты /
пользователи '); 

На следующем шаге «App.use» регистрирует маршрутизаторы и подключает их к строкам запроса. Кроме того, наш код добавляет обработчик ошибок, который вызывается, если в систему вводится не существующий URL-адрес:

 app.use ('/', indexroter);
App.use («/ пользователи», пользователиРутера);
app.use (Функция (REQ, RES, Далее)
{
  Далее (CreateError (404));
}); 

05. Создать новый маршрут

Открыть users.js и измените свой код, как показано ниже:

 Router.get ('/ user1', Функция (req,
res,
следующий) {
  res.send («будущее говорит привет
1 ');
});
Router.get ('/', Функция (req, res,
следующий) {
  res.send (ответить с
ресурс');
}); 

Добавление новых маршрутов в Express.js - механический процесс. Возьмите объект маршрутизатора по выбору и вызовите метод, соответствующий HTTP-гламу, вы стремитесь обращаться. Далее пропустите строку, которая будет добавлена ​​в «Смещение», зарегистрированное в «App.use». С этого момента обоих http: // localhost: 3000 // userhost: 3000 // users / user1 и http: // localhost: 3000 / Пользователи / Верните действительный ответ.

Имейте в виду, что Express.js не ограничивается обработкой ресурсов «Получить». «Post ()», «PUT ()» и «Удалить ()» обрабатывать традиционные четыре HTTP-запросы с десятками дополнительных методов глаголов, обслуживающих более необычные потребности. Наконец, объект «REQ» обеспечивает доступ к заголовке запроса - поместите его хорошо, используйте при анаразрядных параметрах или информацию о клиентах.

06. Расширенное совпадение

Добавление маршрутов вручную становится утомительным, поскольку сложность программы растет. Express.js обслуживает эту проблему, представляя как подстановочный знак, так и для поддержки регулярных выражений. Например, посмотрите на следующую декларацию, которая использует регулярное выражение, чтобы соответствовать различным строкам, содержащим собаку последовательности символов.

 app.get (/.* Собака $ /, Функция (REQ,
res) {
  ...}) 

07. Ненормальная маршрутизация

При обращении с четырьмя запросами HTTP должны быть достаточно для всех (Hat Ti To Bill Gates), Express.js также может работать с дополнительными протоколами. Экспресс-ws. Это особенно вкусный кандидат на этот раздел - он расширяет достижение Express.js, чтобы включить связь Websocket.

Как только плагин добавляется к проекту Main Express.js, включение его выполнено через вызов «требуется». Он возвращает вспомогательный объект, содержащий все, кроме одного метода - вызовите его, чтобы установить соединение между маршрутизатором и плагином:

 VAR Expressws = Требуется ('Express-
WS ')
приложение);
После этого может быть вызван новый метод «WS ()», может быть вызван добавлять новые маршруты на основе технологии WebStocket:
app.ws ('/', Функция (ws, req) {
  WSHON («сообщение», функция (MSG)
{
    console.log (MSG);
  });
  Console.log («Разъем», REQ.
тестирование); }); 

Их прототип отличается от обычных маршрутов из-за наличия объекта «WS» - он обеспечивает доступ к основному экземпляру Websocket, подключенным к клиенту, ответственным за подключение.

08. Интеграция баз данных и шаблонных двигателей

На основе Node.js означает, что богатый экосистема плагина находится в вашей команде при работе над веб-приложениями. Например, доступ к базам данных SQL и NOSQL - обычно необычайно утомительная задача - может быть обработана с помощью плагинов, предоставляемых поставщиками баз данных. Фактическое развертывание так же просто, как установка необходимого модуля NPM - если ваш код должен получить доступ к базе данных Redis, просто добавьте следующее:

var redis = требуют ('redis')
var client = redis.createClient ()
Client.Set («Stringkey», «AVAL»,
Redis.Print)
Отказ Отказ 

Конечно, в памяти SQLite также поддерживается:

 var sqlite3 = требуют ('sqlite3').
подробный()
var db = новый sqlite3.
База данных (': память:')
db.serialize (функция () {
  db.run («создать столовую лорему
(Информационный текст) ') 

Имейте в виду, что интеграция Node.js не ограничивается плагинами баз данных. Авантюрные разработчики могли бы пойти насколько включать в себя такие продукты, как Tessel, создавая тем самым веб-приложения, которые также могут взаимодействовать с Интернет вещей устройства.

09. Шаблон в стиле

Одна область, где простые и реальные программы отличаются, - это создание просмотров. В то время как небольшой пример проекта обычно использует ручную струны, сборки больших полос HTML со скоростью подключенных вещей очень раздражают.

Шаблонные двигатели обеспечивают аккуратный обходной путь. Они позволяют создавать предопределенные файлы схемы, которые могут быть заполнены программно в выполнении.

В случае нашей примерной программы представления лежали в файлах .jade. Индекс открытия показывает следующую структуру:

 Расширяет макет
Контент блокировки
  H1 = титул
  p Добро пожаловать в # {title} 

Выражения, заключенные в вьющиеся скобки, действуют как поля шаблона, значения которых должны быть заменены во время выполнения. Index.js вызывает рендеринг с объектом параметра, что приводит к рендерингу начальной страницы, показанной на рисунке, сопровождающему этот шаг:

 Router.get ('/', Функция (req, res,
следующий) {
  Res.render («Индекс», {Название:
'Выражать' });
}); 

Большинство шаблонных двигателей также могут проанализировать массивы при условии установления шаблона элемента. В этом случае каждая строка массива отображается с одним экземпляром модели DOM - сходства с моделью отображения списка, найденной в Android, являются чисто совпадающими. Express.js не ограничивается предопределенными дракотериями шаблонов. Должны ли вы чувствовать себя как качения по какой-то причине, просто следуйте описанию шагов здесь - В принципе, вы должны переопределить все, кроме одной функции.

10. Обработка статического контента

Axpress.js Приложения, как правило, содержат файлы и изображения CSS. Обслуживание их через функцию рендеринга неэффективна - более умный способ привлекать их на свой веселый путь с традиционным HTTP-запросом. Это может быть достигнуто через функцию «Express.Static ()», которая может пометить все папки для экспорта:

 App. Использовать (Express.Static («публично»)))
App.use (Express.Static («файлы»)) 

11. Изменить поток событий

Наконец, позвольте нам упомянуть термин промежуточную программу в ближайшее время. В Express.js Madrance промежуточное ПО - это набор одного или нескольких компонентов, которые интегрируются в блок-схему, показанную напротив. Затем они могут быть использованы для изменения запросов, когда они проходят через систему маршрутизации - при правильной реализованной, безграничной функциональности могут быть достигнуты.

Кроме того, некоторые готовые компоненты можно найти здесь - Посетите этот сайт, прежде чем отправиться в крупномасштабный проект развития.

12. Как провести приложение Express.js

Тестирование приложений Express.js легко. Проблемы, когда вы хотите, чтобы страница стала доступной для третьих сторон - из-за того, что она генерируется средой Node.js, нет способа получить статическое изображение, подходящее для развертывания FTP для веб-хостинга.

Теоретически нет ничего против использования Raspberry Pi, OrangePi, выделенного сервера или виртуальной машины, арендованной из облачной службы или веб-хостира, который предлагает виртуальный хостинг. Тем не менее, аренды полной виртуальной машины могут обременять вас обязанностями сохранения среды выполнения и операционной системы.

Если эта задача не на ваш вкус, поставщик платформы As-A-A-Service может быть более привлекательным (хотя и, в большинстве случаев, довольно дорогой) выбор.

Многие разработчики считают Heroku, с его ценообразованием, показанным на рисунке, сопровождающем эту Boxout, быть золотым стандартом для всех вещей, связанных с хостингом Node.js.

Это, однако, немного несправедливо в Истине - упругости упругости Amazon, облачная платформа Google и Azure Microsoft, предоставляют аналогичную поддержку удаленного выполнения полезных нагрузок на основе Node.js. Во всех этих системах основной проблемой обрабатывается - в то время как Azure известен своими медленными развертываниями, другие загрузки нагрузки по провайдерам с трудно используемыми в ответные услуги чрезвычайно сложных систем конфигурации.

Кроме того, поддерживаемая версия среды Node.js отличается от провайдера для провайдера. Конечно, у нас недостаточно места, чтобы покрыть тему в глубине. Посещение Учебное пособие на развертывание Mozilla и espuret.js ' Производительность и надежность и безопасность Лучшие практики страницы для некоторых из проблем. Обязательно посмотрите на документацию поставщика для GLAN более лучших практик.

13. Будущие доказательства ваших приложений

Цикл развития Express.js далеко не гладкий: разработчики хорошо известны для частых изменений API, требующих перезаписи клиентского кода. Переключатель с 3.x до 4.x был особенно болезненным, поэтому предстоящий выпуск 5.x может уйти довольно много из вас неудобных.

В то время как Express.js 5.0 приносит несколько изменений, их влияние более ограничено. Прежде всего, набор уже устаренных функций удаляется на реальный - если код все еще использует их, обновление до 5.x требует обслуживания.

Дизайнеры просмотра двигателей необходимо проверить «res.render ():« Ранг роста в отношении просмотра рендеров, что привело к некоторым синхронным реализациям, проскальзовавшимися. Версия 5 структуры повышает производительность путем обеспечения асинхронного рендеринга.

В дополнение к этому, набор разумных улучшений и изменений, задокументированных здесь Видит возвращение некоторых вымерших функций из предыдущих версий - кроме того, некоторые давние ошибки будут исправлены в новом выпуске.

Наконец, осознайте, что вы уже можете попробовать новую версию. Просто создайте копию исходного кода, возьмите терминал и введите следующую команду, чтобы загрузить стоимость архива, едва протежимого кровотечения JavaScript. Быть в безопасности.

 $ NPM Install Express @ & GT; = 5.0.0-
Альфа.1 --save 

Эта статья была первоначально опубликована в номере 279 Treative Web Design Web Designer. Купить проблему 279 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• Все, что вам нужно знать о новом Node.js 8
• 20 модулей Node.js вам нужно знать
• 25 изменяющих игровые инструменты JavaScript