NodeJS: простейший Express сервер

Этот пост в каком-то смысле продолжение поста про простейший NodeJS сервер, принимающий JSON объекты. Помимо того, что сервер может принимать данные извне (в данном случае, с помощью POST-запроса и JSON), хорошо бы чтобы он умел выдавать пользователю web-страницу с имеющимися данными. В принципе, в случае с одной страницей можно было бы вручную дописать сервер из предыдущего поста, но я решил использовать фреймворк Express, который сэкномит время на написание кода, а в дальнейшем позволит легко масштабировать сервер. Более того, Express имеет встроенные средства для генерации HTML кода из шаблонов страниц (я буду использовать EJS), и много других вещей, которые тоже, вполне возможно, пригодятся в дальнейшем.

Код сервера

Весь основной код сервера будет расположен в одном Javascript файле, находящемся в корневом каталоге. Назовем его app.js. Вот его содержимое:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//Подключаем необходимые модули
var express = require('express'); // express - выполняет обработку запросов извне
var http = require('http'); // http - предоставляет http сервер, который принимает
                            // запросы извне и передавает их на обработку в
                            // приложение Express
var path = require('path'); //path - инструменты для работы с файловой системой
var bodyParser = require('body-parser'); // body-parser - парсит JSON
 
//Создаем приложение Express
var app = express();
 
//Минимальная настройка сервера
app.set('port', 3000); // Выставляем порт, который будет "слушать" сервер
app.set('views', path.join(__dirname, 'views')); // Указываем путь к EJS шаблонам
                                                 // HTML страниц
app.set('view engine', 'ejs'); // Устанавливаем EJS в качестве генератора HTML страниц
app.use(express.static(path.join(__dirname, 'public'))); // Указываем путь к статичным ресурсам
                                                         // (В данном примере - к CSS файлу)
app.use(bodyParser.json()) // Устанавливаем JSON-парсер в качестве парсера запросов
 
// Переменная, в которой хранится JSON данные из последнего POST-запроса
var lastJson =
{
 color: "green",
 show_text: true
};
 
// Настраиваем обработчик GET-запроса для пути "/". В обработчике просто генерируем из
// EJS-шаблона index.ejs (который находится в папке views) HTML страницу используя данные
// из переменной lastJson и отдаем ее обратно.
app.get('/', function (req, res) {
    res.render('index', lastJson);
});
 
// Настраиваем обработчик POST-запроса для пути "/". В обработчике запоминаем тело запроса (JSON)
// в переменную lastJson и отправляем клиенту HTML-код 200 (ОК).
app.post('/', function (req, res) {
    console.log("Got JSON:");
    console.log(JSON.stringify(req.body));
    lastJson = req.body;
    res.sendStatus(200);
});
 
// Создаем HTTP-сервер и в качестве обработчика запросов назначаем ему созданное ранее приложение Express.
http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});
Вот и весь код нашего сервера. Код достаточно подробно описан в комментариях, так что остановлюсь дополнительно на структуре каталогов, которую я использую.

Дерево каталогов

Дерево каталогов у меня выглядит вот так (жирным выделены каталоги):
  • demo_server
    • public
      • images
      • javascripts
      • stylesheets
        • demoserver.css
    • views
      • index.ejs
    • app.js
    • package.json
В каталоге public хранятся ресурсы, которые пондобятся браузеру для правильного отображения HTML-страницы. В этом примере там только один css-файл, но в случае надобности туда же следует поместить файлы с картинками и Javascript.
Каталог views содержит шаблоны для генерации HTML-страниц (в нашем примере там только один шаблон).
Файл app.js мы уже рассмотрели, рассмотрим остальные файлы.

Шаблон HTML-страницы

В коде сервера при генерации HTML-страницы из шаблоны мы передавали в шаблон объект JSON. EJS позволяет обращаться к переданным данным прямо из HTML кода. Вот так выглядит мой шаблон:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>Demo Server</title>
    <link rel='stylesheet' href='/stylesheets/colordemo.css' />
</head>
<body>
    <h1>Demo Server</h1>
    <div id="color_demo" style="background-color:<%= color %>;">
        <%if ( show_text === true )
        {%>
            Color is <%= color %>
        <%}%>
    </div>
</body>
Помимо использования данных из Javascript-кода сервера в шаблоне также есть ссылка на CSS-файл colordemo.css. Приведу и его код.

CSS

?
1
2
3
4
5
6
7
8
9
div#color_demo {
        width: 200px;
        height: 100px;
        margin: 0px;
        padding: 0px;
        text-align: center;
        display: table-cell;
        vertical-align:middle;
    }
Ну и осталось разобраться с файлом package.json, установкой и запуском сервера.

Установка и запуск сервера

В файле package.json хранится информация о необходимых для работы сервера пакетах. Этот файл нужен установщику пакетов npm (его самого нужно сначала установить). Вот содержимое файла:
?
1
2
3
4
5
6
7
8
9
{
  "name" : "DemoServer",
  "version" : "0.0.1",
  "dependencies" : {
    "express" : ">=4.x",
    "ejs": "*",
    "body-parser": "*"
  }
}
Вообще в этом файле помимо зависимостей можно разместить много другой полезной информации (подробнее об этом можно прочитать здесь), но для данного простого примера в этом нет необходимости. Я указал для пакета express минимальную версию 4.x, так как начиная с этих версий из него много чего выкинули в отдеьные пакеты (тот же body-parser).
Итак, чтобы установить все необходимы пакеты достаточно в корневом каталоге нашего мервера выполнить команду:
?
1
npm install
Затем можно запустить сервер командой:
?
1
nodejs app.js
Теперь наш сервер работает и принимает запросы через порт 3000. Можно открывать бразуер, вводить адрес http://localhost:3000/ и наслаждаться следующей картинкой:

Выполнить POST-запрос можно, как и в предыдущем посте с помощью утилиты curl, например:
?
1
curl -H "Content-Type: application/json" -X POST -d '{"color":"red","show_text":false}' 127.0.0.1:3000
Если после этого обновить страницу в браузере, то страница должна поменяться:

В итоге мы получили работающий легко расширяемый WEB-сервер. 
Labels: , , , , , , , ,

Комментариев нет :

Отправить комментарий

Подписаться на: Комментарии к сообщению ( Atom )