Этот пост в каком-то смысле продолжение поста про простейший NodeJS сервер, принимающий JSON объекты. Помимо того, что сервер может принимать данные извне (в данном случае, с помощью POST-запроса и JSON), хорошо бы чтобы он умел выдавать пользователю web-страницу с имеющимися данными. В принципе, в случае с одной страницей можно было бы вручную дописать сервер из предыдущего поста, но я решил использовать фреймворк Express, который сэкномит время на написание кода, а в дальнейшем позволит легко масштабировать сервер. Более того, Express имеет встроенные средства для генерации HTML кода из шаблонов страниц (я буду использовать EJS), и много других вещей, которые тоже, вполне возможно, пригодятся в дальнейшем.
Вот и весь код нашего сервера. Код достаточно подробно описан в комментариях, так что остановлюсь дополнительно на структуре каталогов, которую я использую.
Каталог views содержит шаблоны для генерации HTML-страниц (в нашем примере там только один шаблон).
Файл app.js мы уже рассмотрели, рассмотрим остальные файлы.
Помимо использования данных из Javascript-кода сервера в шаблоне также есть ссылка на CSS-файл colordemo.css. Приведу и его код.
Ну и осталось разобраться с файлом package.json, установкой и запуском сервера.
Вообще в этом файле помимо зависимостей можно разместить много другой полезной информации (подробнее об этом можно прочитать здесь), но для данного простого примера в этом нет необходимости. Я указал для пакета express минимальную версию 4.x, так как начиная с этих версий из него много чего выкинули в отдеьные пакеты (тот же body-parser).
Итак, чтобы установить все необходимы пакеты достаточно в корневом каталоге нашего мервера выполнить команду:
Затем можно запустить сервер командой:
Теперь наш сервер работает и принимает запросы через порт 3000. Можно открывать бразуер, вводить адрес http://localhost:3000/ и наслаждаться следующей картинкой:
Выполнить POST-запрос можно, как и в предыдущем посте с помощью утилиты curl, например:
Если после этого обновить страницу в браузере, то страница должна поменяться:
Код сервера
Весь основной код сервера будет расположен в одном Javascript файле, находящемся в корневом каталоге. Назовем его app.js. Вот его содержимое://Подключаем необходимые модули
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
Каталог views содержит шаблоны для генерации HTML-страниц (в нашем примере там только один шаблон).
Файл app.js мы уже рассмотрели, рассмотрим остальные файлы.
Шаблон HTML-страницы
В коде сервера при генерации HTML-страницы из шаблоны мы передавали в шаблон объект JSON. EJS позволяет обращаться к переданным данным прямо из HTML кода. Вот так выглядит мой шаблон:<!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>
CSS
div#color_demo {
width: 200px;
height: 100px;
margin: 0px;
padding: 0px;
text-align: center;
display: table-cell;
vertical-align:middle;
}
Установка и запуск сервера
В файле package.json хранится информация о необходимых для работы сервера пакетах. Этот файл нужен установщику пакетов npm (его самого нужно сначала установить). Вот содержимое файла:{
"name" : "DemoServer",
"version" : "0.0.1",
"dependencies" : {
"express" : ">=4.x",
"ejs": "*",
"body-parser": "*"
}
}
Итак, чтобы установить все необходимы пакеты достаточно в корневом каталоге нашего мервера выполнить команду:
npm install
nodejs app.js
curl -H "Content-Type: application/json" -X POST -d '{"color":"red","show_text":false}' 127.0.0.1:3000
В итоге мы получили работающий легко расширяемый WEB-сервер.
Комментариев нет :
Отправить комментарий