Express — это веб-фреймворк для Node, основанный на фреймворке Sinatra для Ruby . Он имеет множество функций, высокую производительность и поставляется с удобным исполняемым файлом для быстрого создания приложений. В этой статье мы рассмотрим, как вы можете приступить к работе с Express, что вы получаете, когда создаете новый веб-сайт Express, а также добавьте маршрут и представление для отображения результатов поиска из Twitter.
Установка Экспресс
Express можно легко установить через npm (менеджер пакетов узлов) :
$> npm install express -g
-g
на конце делает экспресс доступным во всем мире. Это означает, что мы можем запустить экспресс-файл из любого места, чтобы быстро создать новое приложение. Исполняемый файл Express, как ни странно, называется express:
$> type express express is hashed (/usr/local/bin/express)
Если вы введете команду самостоятельно, Express создаст новое приложение в текущем каталоге. Если текущий каталог не пустой, вас спросят, хотите ли вы продолжить:
$> express destination is not empty, continue?
Введите «y», если хотите продолжить, или «n», чтобы прервать. Вы не ограничены созданием новых приложений в текущем каталоге, вам просто нужно указать путь, по которому вы хотите создать новое приложение. Вы можете передать и другие варианты:
-
-s
чтобы включить сеансы -
-t
или--template <engine>
чтобы указать ваш шаблонизатор (в экспрессе по умолчанию используется jade) -
-c
или--css
для добавления поддержки CSS стилуса (по умолчанию обычный CSS) -
-v
или--version
для вывода текущей установленной вами версии express -
-h
или--help
для вывода этой справки и выхода
Список поддерживаемых шаблонизаторов приведен в экспресс-руководстве , а также в экспресс-вики . В этой статье мы будем использовать EJS . Давайте создадим новый сайт под названием myapp
:
$> express -t ejs myapp create : myapp create : myapp/package.json create : myapp/app.js create : myapp/public create : myapp/routes create : myapp/routes/index.js create : myapp/views create : myapp/views/layout.ejs create : myapp/views/index.ejs create : myapp/public/javascripts create : myapp/public/images create : myapp/public/stylesheets create : myapp/public/stylesheets/style.css dont forget to install dependencies: $> cd myapp && npm install
Экспресс создает новый сайт в папке myapp для нас. Мы получаем: файл package.json
файл app.js
для кода приложения, каталог маршрутов для маршрутов, каталог представлений для наших шаблонов представлений и общедоступный каталог для наших CSS, изображений и JavaScript на стороне клиента. Express также напоминает нам об установке зависимостей и дает нам команду сделать это. Мы могли бы также напечатать это сейчас, прежде чем мы забудем:
$> cd myapp && npm install npm http GET https://registry.npmjs.org/express/2.5.5 npm http GET https://registry.npmjs.org/ejs npm http 304 https://registry.npmjs.org/ejs npm http 304 https://registry.npmjs.org/express/2.5.5 npm http GET https://registry.npmjs.org/mime npm http GET https://registry.npmjs.org/qs npm http GET https://registry.npmjs.org/mkdirp/0.0.7 npm http GET https://registry.npmjs.org/connect npm http 304 https://registry.npmjs.org/mime npm http 304 https://registry.npmjs.org/qs npm http 304 https://registry.npmjs.org/mkdirp/0.0.7 npm http 304 https://registry.npmjs.org/connect npm http GET https://registry.npmjs.org/formidable npm http 304 https://registry.npmjs.org/formidable [email protected] ./node_modules/ejs [email protected] ./node_modules/express ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]
Вы должны увидеть нечто похожее, хотя точный вывод может отличаться в зависимости от того, какие версии зависимостей доступны через npm, а какие уже установлены. Если вы сейчас node app.js
в node app.js
и node app.js
по адресу http: // localhost: 3000, вы должны увидеть страницу Welcome to Express . Давайте посмотрим на код, сгенерированный Express, и на то, как он используется страницей приветствия.
app.js
app.js
вы настраиваете свой сайт и определяете маршруты. Переменная app
— это наш сервер Express, и мы вызываем ее функцию configure
чтобы сообщить Express, какой механизм представления использовать, где искать статические ресурсы и как обрабатывать ошибки. Посмотрите на код app.js по умолчанию, вы увидите, что app.configure
вызывается три раза:
- первый раз, когда он вызывается без аргумента имени — настройки будут применены к каждой среде
- во второй раз он
errorHandler
сdevelopment
в качестве первого аргумента — эти настройкиerrorHandler
будут применяться только в среде разработки - в третий раз он
errorHandler
сproduction
в качестве первого аргумента —errorHandler
в производственной среде отключит дампы исключений и трассировки стека
Теперь посмотрите на последние две строки в app.js
:
app.listen(3000); console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
Он сообщает Express, на каком порту прослушивать соединения, затем записывает сообщение на консоль, подтверждающее порт, который он прослушивает, а также текущую среду.
$ node app.js Express server listening on port 3000 in development mode
По умолчанию app.settings.env
настроен на development
. Чтобы изменить это в другую среду, например, рабочую, вставьте следующую строку над вызовом console.log
:
app.settings.env = 'production';
Перезапустите приложение ctrl+c
, затем снова введите node app.js
), и режим должен был измениться на node app.js
:
$ node app.js Express server listening on port 3000 in production mode
Маршрутизация
Express предоставляет 6 HTTP-глаголов в качестве API для определения маршрутов и позволяет захватывать параметры с помощью именованных параметров, подстановочных знаков, регулярных выражений и комбинаций всех трех. req.params
значения будут доступны через req.params
:
// using a named parameter app.get('/foo/:id', function(req, res) { var fooId = req.params.id; ... }); // using regular expressions app.get(/^/foo/(d+)/, function(req, res) { var fooId = req.params[1]; ... }); // using a combination of the two app.get('/foo/:id([0-9]+)', function(req, res) { var fooId = req.params.id; ... })
Все три маршрута выше показывают разные способы получения fooId
из URL.
В app.js
вы увидите маршрут, определенный для страницы приветствия. Это обрабатывает запросы GET к ‘/’: когда запрос получен для этого пути, routes.index
функция обратного вызова routes.index
.
,
Функция routes.index
определена в routes/index.js
. routes/index.js
— это модуль, который экспортирует функции для использования в качестве обработчиков маршрутов. Если вы откроете его, вы увидите код, который составляет функцию routes.index
:
exports.index = function(req, res){ res.render('index', { title: 'Express' }) };
Это говорит экспресс для рендеринга представления индекса. Объект, передаваемый в качестве второго аргумента для render
— это данные, которые будут доступны для представления.
Взгляды
Когда мы создавали myapp
мы указали Express использовать шаблонный движок EJS. Если вы посмотрите в папку views, то увидите, что Express создал для нас пару файлов: файл layout.ejs и файл index.ejs. layout.ejs — это то место, где живет основная часть HTML-разметки страницы, а index.ejs содержит HTML-код для конкретной страницы Если вы откроете layout.ejs, вы увидите что-то вроде этого:
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel="stylesheet" href="/stylesheets/style.css" /> </head> <body> <%- body %> </body> </html>
Помимо обычного HTML, title
объекта, который мы передали представлению, выводится в теге <title>, а содержимое из шаблонов, специфичных для страницы (например, index.ejs), включается через строку <%- body %>
, Давайте откроем index.ejs
чтобы увидеть, что там:
<h1><%= title %></h1> <p>Welcome to <%= title %></p>
Мы снова выводим title
из объекта, который мы передали представлению, сначала в <h1 & t; тег, а затем в теге <p>. Если вы измените значение, присвоенное title
в routes/index.js
и перезапустите приложение, вы должны увидеть изменение значения при обновлении браузера.
Добавление нового маршрута
Давайте добавим новый маршрут и представление, в котором будут отображаться десять последних твитов с упоминанием Sitepoint. Нам нужно добавить маршрут к app.js
, функцию обратного вызова для маршрута и представление для отображения твитов:
-
Откройте
app.js
и добавьте маршрут для страницы твитов:app.get('/twitter', routes.twitter);
-
Далее, откройте
routes/index.js
и добавьте эту строку вверху, чтобы импортировать модуль http:var http = require('http');
-
Оставайтесь в
routes/index.js
и добавьте следующую функцию:/* * GET twitter search results */ exports.twitter = function(req, res) { var options = { host: 'search.twitter.com', port: 80, path: '/search.json?q=sitepoint&rpp=10' }; http.get(options, function(response) { var tweets = ''; response.on('data', function(data) { tweets += data; }).on('end', function() { var tmp = JSON.parse(tweets), topTen = tmp.results; res.render('twitter', { title: 'Latest from Twitter', tweets: topTen }); }); }).on('error', function(e) { res.writeHead(500); res.write('Error: ' + e); }); }
Здесь мы используем
http.get
дляhttp.get
HTTP-запроса GET в API поиска Twitter . Мы передаемhttp.get
объектoptions
, который сообщает ему, откуда взять данные. Затем мы определяем пару функций обратного вызова:on('data', ...)
добавляетdata
вtweets
каждый раз, когда некоторые данные получены;on('end', ...)
вызывается, когда все данные получены, и отправляет твиты в представление Twitter. -
Наконец, создайте файл
twitter.ejs
в папке представлений. Откройте файл и добавьте следующее:<h1><%= title %></h1> <% if (tweets.length) { %> <ul> <% tweets.forEach(function(t) { %> <li> <h2> <a href="http://twitter.com/<%= t.from_user %>" rel="external"> <%= t.from_user_name %> <span><%= t.from_user %></span> </a> </h2> <blockquote> <p><%= t.text %></p> </blockquote> <a href="http://twitter.com/#!/<%= t.from_user %>/status/<%= t.id %>" rel="external">Open</a> </li> <% }); %> </ul> <% } // endif %>
После отображения заголовка, представление проверяет, что у нас есть несколько твитов для отображения. Если мы это сделаем,
forEach
перебирает каждый твит, используя функцию обратного вызова, чтобы отобразить текст твита и от кого был твит.
Перезапустите приложение, затем перейдите по адресу http: // localhost: 3000 / twitter и, если все прошло хорошо, вы увидите список из десяти последних твитов с упоминанием Sitepoint.
Так что это было краткое введение в создание веб-сайта в Node с использованием экспресс-веб-фреймворка. Мы посмотрели на то, что дает вам экспресс при создании нового экспресс-сайта, быстро взглянули на то, как он использует маршрутизацию и представления, и добавили новый маршрут и представление для отображения результатов поиска из Twitter. Экспресс способен на многое, и многое, что мы не рассмотрели. Если вы хотите узнать больше, зайдите на http://expressjs.com/guide.html и посмотрите экспресс-вики .