Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Знакомство с Express

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Несколько лет назад я, как и множество других людей, стал всё чаще слышать о Node.js. Я создавал серверные приложения с ColdFusion в течении десятилетия, но мне всегда было любопытно, как работают другие платформы. Мне нравиться писать JavaScript на стороне клиента, использование его на стороне сервера кажется не менее интересным. (Хоть это и не ново). Я помню ещё те времена, когда Netscape выпустил SSJS в 90-ых.) Я прочитал пару туториалов, испробовал его несколько раз, и на этом моё знакомство с ним закончилось... он меня не впечатлил.

Каждый раз когда мне приходится читать что-либо о Node, я вижу одну и ту же историю: создание веб-сервера. Откровенно говоря, это не очень увлекательно. Даже когда я начинал создавать веб-приложения с CGI скриптами Perl, мне не приходилось беспокоиться об этом. Я вижу потенциал в маленьких, легковесных API, буду-ли я создавать простые сайты с ними, конечно нет!

В один прекрасный день мне повезло. Я решил посмотреть очередную презентацию посвящённую Node (в основном потому что я знал хорошо спикера) и во время его презентации он показал Express. В этот момент над моей головой загорелась лампочка. Это был Node фреймворк, которого мне не хватало! Да, в теории, вы всё ещё создаёте свой собственный веб-сервер, но данный аспект, так сказать, минимизирован и вам остаётся лишь сфокусироваться на построении логики сайта и добавлению контента. Что ещё лучше, интеграция шаблонизатора позволяет использовать ColdFusion (или PHP). В этой статье я покажу, как установить Express и как начать создавать веб-приложения используя фреймворк.


Установка

Скорее всего вы уже знакомы с разработкой на Node. В случае если же вы новичок и не знаете как работать с данной платформой, мощь npm может вас немного шокировать. Так было и со мной. Как я говорил, большинство своей жизни я работал с ColdFusion. Для этой платформы существует богатая, огромная экосистема проектов с открытым исходным кодом. Однако установку и поиск приходится осуществлять вручную. Первый раз столкнувшись с npm я был просто изумлён. Честно говоря, я не могу представить на данный момент, как можно использовать платформу без такого замечательного инструмента, как npm. Давайте начнём с добавления Express, как зависимости нашего проекта в файл package.json.

Подобные действия являются стандартом для Node разработчиков. Откройте командную строку и запустите:

Тем самым будет установлен Express и его зависимости.

Также есть возможность установить Express, как инструмент командной строки для быстрой генерации общей структуры, скелета приложения. Этого можно добиться, запустив:

Как только это будет сделано, можно запустить express в командной строке, для генерации приложения.


Первые шаги

Давайте вернёмся к созданному приложению с файлом package.json и добавим файл app.js. По минимуму, приложение создаст новый экземпляр объекта Express, который будет прослушивать определённый порт. Давайте начнём, добавим следующий код:

Лично я изучаю функции нового фреймворка, довольно медленно, так что возможно есть смысл, как можно быстрее запустить node приложения, чтобы убедиться, что всё работает.

Создаём роуты

Теперь давайте добавим несколько простых роутов нашему приложению. Express приложения могут отвечать на различные HTTP методы посредством методов своего API. К примеру:

Давайте создадим живой пример и добавим главную страницу нашему приложению:

Обратите внимание, что Express добавляет простой метод send() к объекту ответа. Тем самым мы абстрагируем шаблонный код, для обработки ответов. Если всё сделано правильно, перезагрузите приложение и откройте браузер на порту 3000.

Также request.send() API соответствующим образом обрабатывает различные типы данных. Представьте добавление API основанного на JSON своему сайту. Возвращая объект вместо строки, Express будет конвертировать результат в JSON, а также добавлять необходимый заголовок ответа.

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


Создание приложения-блога 9000

Первый сайт, который мо создадим будет являться блогом. Да, я знаю, это не очень увлекательно и ново, однако концепция подобного проекта будет понятна всем. Исходники данного приложения можно найти в прикреплённых файлах для скачивания в папке blog1. Мы пропустим описание файла package.json, так как он ничуть не изменился. Вместо этого взглянем на app.js.

Первая вещь, которую вы заметите, мы отказались от send api в пользу sendfile.Несмотря на то что у нас есть возможность добавлять большие строки HTML в наш файл app.js, код таким образом довольно быстро станет неаккуратным и неразборчивым. Первая вещь, которую вы заметите, мы отказались от send api в пользу sendfile. Несмотря на то что у нас есть возможность добавлять больше строки HTML в наш файл app.js, код таким образом довольно быстро станет неаккуратным и неразборчивым.

Добавление HTML

HTML для наших страницы будет выглядеть также довольно просто. Ниже разметка главной страницы:

Обратите внимание, что сейчас в разметке нет ничего особенного. Это обычный, статичный HTML, который будет возвращён Express приложением, в таком состоянии, в котором он описан в коде. Обе страницы About и Article ничем не отличаются, кроме title и текста в h1.

Как и прежде, запустите команду в командной строке и откройте браузер. (Кстати, во время изучения Node, я всегда забывал остановить до этого запущенный процесс, это было моей самой частой ошибкой). Если у вас всё ещё запущено предыдущее приложение, порт 3000 будет занят. Либо остановите его, либо используйте другой порт для текущего приложения. Вы сможете разобраться в работе этого простого приложения за пару кликов.

Теперь давайте добавим динамики статичным страницам.

От статичного к динамичному

Express поддерживает множество различных шаблонизаторов. Шаблонизатор - программное обеспечение, позволяющее использовать html-шаблоны для генерации конечных html-страниц. Команда express может добавить поддержку для Jade, EJS, JSHTML и Hogan. Согласно документации Express, любой шаблонизатор который соответствует определённой подписи в коде Express, будет работать. Разработчики Express также рекомендуют проверить библиотеку consolidate.js, чтобы ознакомиться со списком шаблонизаторов.

Лично я большой поклонник Handlebars (handlebarsjs.com). Я использовал его во многих приложениях работающих на стороне клиента, и для меня он одинаково хорошо вписывается в разработку на стороне сервера. Для того чтобы воспользоваться Handlebars вам надо установить библиотеку-обертку под названием hbs. Давайте добавим её к нашему приложению.

Теперь обновим наш app.js, чтобы использовать данный движок шаблонов:

Здесь мы делаем несколько важных вещей. Для Handlebars, мы загружаем (с помощью require) библиотеку-обёртку HBS. После чего нам необходимо сообщить Express, чтобы он использовал её. По умолчанию, Handlebars будет обрабатывать файлы с расширением шаблонизатора. В нашем случае - .hbs. Однако мы можем сообщить Express рассматривать HTML файлы, как динамичные, используя "view engine" директиву, это можно увидеть в примере выше. Хоть это и не обязательно, но я предпочитаю работать с HTML файлами. Мой текстовый редактор, в этом случае, будет показывать удобные подсказки в коде и подсветку синтаксиса. Вообще, загрузка шаблонизатора осуществляется с помощью app.engine.

Наконец, роуты переключатся на использование нового метода (render) отображения. По умолчанию Express использует папку views, мы можем оставить это без изменений. Так как Express знает файловое расширение, которое мы предпочитаем, можно об этом не беспокоиться. По сути, res.render('что-нибудь') сообщает Express следить за views/что-нибудь.html, после чего парсить это согласно правилам шаблонизатора и возвращать результат браузеру.

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

Отображение записей блога на главной странице

Таким образом в нашем распоряжении есть динамические шаблоны, давайте сделаем их действительно динамичными. Так как мы создаём блог, мы должны реализовать список записей блога на главной странице, а также возможность использовать определённый движок блога. Конечно мы можем реализовать соединение с MySQL или Mongo, давайте создадим статичный набор данных, а также простую библиотеку-обёртку для них. Ниже показан файл blog.js, который позволяет вывести список записей или показать лишь одну из них.

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

Давайте разберёмся с обновлениями, которые мы сделали. (Эту версию можно найти в папке blog3). Сначала, мы загружаем наш движок, вызывая require. Тем самым мы можем вызвать его и получить записи. Можно увидеть новую строку под названием bodyParser, пока не обращайте на это внимания.

В нашем роутере главной страницы, мы передаём второй аргумент для рендеринга API. Аргумент является объектом с двумя ключами, заголовок (title) и записи (entries). Значения для заголовка - просто строка, однако записи вызвают наш blogEngine API. Вот тут начинается интересное. Любые данные, которые мы передаём будут доступны нашим шаблонам. В зависимости от языка шаблонов, детали как мы будем их использовать могут измениться, но, тем не менее давайте взглянем на главную станицу.

Если вам прежде не доводилось работать с Handlebars, скорее всего вам не составит труда догадаться, что здесь происходит. Директива #each обойдёт массив. Внутри блока я использовал комбинацию Handlebar токенов, которые указывают на данные моего блога, а также HTML для генерации простого списка записей блога. Данная конструкция должна быть знакома, тем кто сталкивался с ColdFusion.

Создание структуры

Думаю вы удивляетесь, а где же остальной HTML. Когда вы используете шаблонизатор в Express, в вашем распоряжении автоматическая поддержка общей структуры (layout). Это значит, что я могу создать основную структуру дизайна сайта и Express добавит данную структуру для соответствующих страниц. Есть соглашение, согласно которому данные файлы носят название layout.что-либо, где "что-либо", является определённым файловым расширением, которые вы используете. Так как мы использует HTML, данный файл будет представлять из себя layout.html:

Не правда-ли это довольно удобно? Страница About не так интересна, так что мы её пропустим, но давайте взглянет на роут article. Теперь он включает в себя токен, :id, в адресе. Express позволяет нам создавать динамичные адреса (URL), которые в дальнейшем будут соответствовать аргументам запроса. Можно заметить что во время работы надо главной страницей, мы создали ссылки, которые выглядят следующим образом: /article/{{id}}.

В теории мы могли создать роут для каждой записи блога, но гораздо лучше сделать абстрактный роут, который будет отвечать любому запросу, определённой его форме. Чтобы получить значение, мы добавим ещё один кусочек к строке bodyParser, который мы определили ранее. (Данная функция идёт вместе с фреймворком Connect и она довольно полезна - помогает поддерживать строку запроса и тела форм. Эта функция пригодится почти в каждом Express приложении).

Отображаем отдельные статьи

Так как у нас есть доступ к динамическому значению в конце адреса, мы можем просто-напросто передать его объекту blogEngine и использовать результат, как аргумент нашего представления (view).

Ниже файл article.html:

Теперь у нас есть по настоящему динамичное приложение, но некрасивое. В примере ниже можно увидеть новую, главную страницу:

express-blog3-home

А вот как выглядит отдельная запись блога:

express-blog3-article

Загримируем свинью!

Добавим основные стили нашему приложению, чтобы оно выглядело немного красивее. В Express есть простой способ добавить статические ресурсы, такие как изображения, библиотеки JavaScript и таблицы стилей. Указывая статичную папку, каждый запрос будет проверять файл согласно определённой папке, для каждого роута. Вот пример финальной версии движка нашего блога (который можно найти в директории blog4):

На этом этапе, если запросить /foo.css, и в случае если файл foo.css существует в папке public, он будет возвращён. Так как мои навыки дизайна так же хороши, как у любого разработчика, я воспользуюсь простым способом и добавлю копию Bootstrap (http://twitter.github.io/bootstrap/). Я добавил его, а также копию jQuery в папку public.

После чего в layout.html я могу ссылаться на эти ресурсы. Вот пример ссылки bootstrap.css:

Теперь Express будет автоматически проверять наличие этого файла в папке public. У вас может быть множество статичных папок, на вроде этой, даже можно указать кастомные префиксы адреса. Результат потрясающий. (Хорошо, по сравнению с первой версией, это пожалуй значительное улучшение!).

Главная страница:

express-blog4-home

И страница статьи:

express-blog4-article

Что дальше?

Хотите узнать ещё больше? Вот некоторые ссылки, которые могут оказаться полезными.

  • Очевидно, что отправной точкой будет главная страница Express.
  • Можно присоединиться к группе Google, для общения с другими разработчиками.
  • Если хотите быть в курсе всех обновлений, присоединитесь к IRC каналу: #express.
  • Ну и наконец, взгляните на огромное количество примеров на GitHub.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.