Статьи

Проявлять себя

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 , функцию обратного вызова для маршрута и представление для отображения твитов:

  1. Откройте app.js и добавьте маршрут для страницы твитов:

     app.get('/twitter', routes.twitter); 
  2. Далее, откройте routes/index.js и добавьте эту строку вверху, чтобы импортировать модуль http:

     var http = require('http'); 
  3. Оставайтесь в 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.

  4. Наконец, создайте файл 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 и посмотрите экспресс-вики .