Простой маршрутизатор Express/Node.js для HTML сайта

Простой маршрутизатор Express/Node.js для HTML сайта
АННОТАЦИЯ: Популярность кросс-платформенной Node.js для создания серверных приложений, выполняемых на лету, растет лавинообразно, что особенно заметно на росте публикаций в Интеренет [1,2,5,...]. Node.js официально скачали около 100 миллионов раз. Node.js позволяет создавать высоконагруженные интернет-решения на JavaScript независимо от операционной системы, включая обычные UNIX-подобные платформы. Framework Express отлично зарекомендовал себя для написания приложений Node.js с высокой нагрузкой. В настоящей статье представлен простой маршрутизатор в среде Express-Node для создания HTML сайтов в стиле Full-Stack разработки (разработка полного цикла), включающей HTML, CSS, JavaScript, вывод изображений, парсинг Json, серверную логику маршрутизации. Настоящая статья из серии CGI программирование и интеграция Perl, PHP, JS, Ajax, MySQL Часть 1.

Содержание:

  1. Основные понятия (кратко)
  2. Download и установка
  3. Пример структуры несложного HTML сайта
  4. Написание приложений для реализации под Windows
  5. Реализация под Linux + Forever + MySQL
  6. Выводы

1. Основные понятия (кратко)


2. Download и установка NODE и EXPRESS


Загрузка под Windows и инсталляция NODE/EXPRESS весьма удачно и обстоятельно изложенa в статье [2]. Продублируем лишь ссылки Download: официальный сайт NODE https://nodejs.org/en/ предлагает загрузить последнюю версию node.js. Запускаем файл node-v11.3.0-x86.msi и устанавливаем NODE, например папку d:\tools\nodejs, которая будет корневой (ROOT). Проверить установку можно в консоли C:\WINDOWS\system32\cmd.exe с помощью команды node -v:
d:\tools\nodejs>node -v v11.3.0 Установленные модули будут сохранены в папке node_modules. Для установки Express с добавлением его в список зависимостей требуется в корневой папке выполнить команду [3]:
d:\tools\nodejs>npm install express --save В директории node_modules будет создана папка express с библиотекой и роутером. Проверим как выполняются скрипты Javascript. Для этого в корне создаем файл console.js с простейшей JS функцией вывода на печать console.log("Javascript, Ok!") и выполняем в консоли команду node console:
d:\tools\nodejs>node console Javascript, Ok!

3. Пример структуры несложного HTML сайта

node_modules action file.html data data.js images styles.css scripts.js banner_trump_obama_320x120.js node-js-express_train_356x200.jpg node-js-express356x200.jpg express-node-js356x200.jpg express3_server.js parser.js my_package.json register.html second.html В корневом каталоге вместе с windows программой node.exe расположены два наши приложения Node - express3_server.js и parser.js. Так же в корне лежат HTML файлы second.html и register.html, и файл JSON my_package.json. В папке NODE_MODULES инсталлированы модули NODE и EXPRESS. В папке DATA находится файл html-шаблонов data.js. В папке ACTION лежит еще один HTML файл file.html. В папке IMAGES собраны все файлы изображений, файл стилей styles.css и файлы обычных JS: scripts.js и banner_trump_obama_320x120.js.

Приложение express3_server.js осуществляет запуск сервера и реализует логику маршрутизации. Приложение parser.js выполняет чтение и парсинг файла JSON my_package.json.

4. Написание приложений для реализации под Windows


Сначала создадим предварительный файл express3_server.js для реализации http сервера с портом вызова 3000:
//-- node express3_server.js var express = require('express'); const app = express(); //*****************************// //--Здесь будет маршрутизотор--// //*****************************// app.get("/", function(request, response){ response.send('Hello, Word!'); }); // main html app.use(function(request, response,next) { var err = new Error('Файл не найден. Error 404'); err.status = 404; next(err); }); app.listen(3000, function () { console.log('Example app listening on port 3000!'); });
Запустим сервер по команде: d:\tools\nodejs>node express3_server.js Example app listening on port 3000! Посмотрим как работает скрипт в браузере Chrome: http://localhost:3000/:

Проверка в браузере работы сервера express

Прообраз нашего сайта готов. На следующем шаге напишем код маршрутизатора в соответвии со структурной схемой сайта из раздела 2:
const bodyParser = require("body-parser"); //-- парсер данных URL application/x-www-form-urlencoded: const urlencodedParser = bodyParser.urlencoded({extended: false}); //--------------------get-------------------------- app.get("/register", urlencodedParser, function (request, response) { response.sendFile(__dirname + "/register.html"); }); app.get("/second", urlencodedParser, function (request, response) { response.sendFile(__dirname + "/second.html"); }); app.get("/action", urlencodedParser, function (request, response) { response.sendFile(__dirname + "/action/file.html"); }); app.get("/package-json", function(request, response){ var Parser = require('./parser'); //-- /parser.js var resP = Parser.z_parser(data.cur_json); // console.log(resP); // ok response.send(resP); }); //----------------------------- app.get("/", function(request, response){ response.send(data.main_navig); }); // main html app.use( function (request, response,next) { response.send("<h1>Error 404</h1><hr><a href='/'>На Главную</a>"); }); Функция bodyParser.urlencoded() анализирует данные URL и предоставляет результирующий объект (содержащий ключи и значения) для request.body. Данные содержимого и html-шаблон главной страницы (main) возвращает переменная data.main_navig. Шаблон для вставки данных в формате JSON (файл my_package.json) содержится в переменной data.cur_json. JSON-парсинг осуществляется с помощью функции z_parser(data.cur_json), расположенной в файле parser.js. Указанные выше переменные html-шаблонов содержаться в файле data.js.

Чтобы обеспечить возможность обращений к файлам необходимо подгрузить модуль файловой системы filesystem(fs) [4]. Для предоставления браузеру статических файлов (изображений, файлов CSS и JavaScript, расположенных в папке images) добавим к Express функцию промежуточной обработки express.static:
var fs=require('fs'); app.use(express.static('images')); var data = require('./data/data.js');
Окончательный код приложения express3_server.js будет иметь следующий вид:
//-- node express3_server.js var express = require('express'); const bodyParser = require("body-parser"); const app = express(); var fs=require('fs'); app.use(express.static('images')); var data = require('./data/data.js'); //-- templates html //-- парсер данных application/x-www-form-urlencoded: const urlencodedParser = bodyParser.urlencoded({extended: false}); //--------------------get-------------------------- app.get("/register", urlencodedParser, function (request, response) { response.sendFile(__dirname + "/register.html"); }); app.get("/second", urlencodedParser, function (request, response) { response.sendFile(__dirname + "/second.html"); }); app.get("/action", urlencodedParser, function (request, response) { response.sendFile(__dirname + "/action/file.html"); }); app.get("/package-json", function(request, response){ var Parser = require('./parser'); //-- /parser.js var resP = Parser.z_parser(data.cur_json); // console.log(resP); // ok response.send(resP); }); //----------------------------- app.get("/", function(request, response){ response.send(data.main_navig); }); // main html app.use(function(request, response,next) { var err = new Error('Файл не найден. Error 404'); err.status = 404; next(err); }); app.listen(3000, function () { console.log('Example app listening on port 3000!'); });

Как отмечалось выше, html-шаблоны расположены в файле data.js. В переменной exports.main_navig задан код шаблона главной страницы сайта. В переменной exports.cur_json находится шаблон для вставки данных в формате JSON.

exports.main_navig = "<html><head><base href='http://localhost:3000/'>\ <link href='styles.css' rel='stylesheet' type='text/css'>\ <title>Express маршрутизатор для Node JS</title>\ <meta http-equiv=Content-Type content='text/html; charset=utf-8'></head><body>\ <h1>Простой маршрутизатор Express/Node.js</h1>\ <center><img src='express-node-js356x200.jpg'><br>\ Пример построения простого маршрутизатора на основе Express\ /Node, обеспечивающего загрузку файлов картинок и стилей.</center><hr>\ <h3>Main page</h3><b>Register page</b>:<a href=/register>/register</a><br>\ <b>Second page</b>: <a href=/second>/second</a><br>\ <b>Action page</b>: <a href=/action>/action</a><br>\ <b>Json file</b>: <a href=/package-json>/package-json</a><br>\ <script language=JavaScript src='banner_trump_obama_320x120.js'></script></body></html>"; exports.cur_json = "<html><head><base href='http://localhost:3000/'>\ <link href='styles.css' rel='stylesheet' type='text/css'>\ <title>Express маршрутизатор для Node JS</title>\ <meta http-equiv=Content-Type content='text/html; charset=utf-8'></head><body>\ <h1>Простой маршрутизатор Express/Node.js</h1>\ <center><img src='express-node-js356x200.jpg'><br>\ Чтение и применение функции парсер (JSON.parse(data)) для файлов Json в Express</center><hr>\ <a href='/'>Back to index</a><br><b>Вывод содержимого файла *.json:</b><br>\ <pre><!--datafs--><br><b>Пример парсинга полей <i>version</i> и <i>description</i>\ :</b>\nversion: <!--words.version-->\ \ndescription: <!--words.description-->\n<b>Вывод названия полей:</b>\nНазвание поля номер [5]\ : <!--fld5--></pre>\ <script language=JavaScript src='banner_trump_obama_320x120.js'></script></body></html>";

Парсинг данных JSON из файла my_package.json осуществляется с помощью приложения parser.js, которое представлен ниже:
//-- parser.js var fs=require('fs'); const z_parser = function(template) { var package_json = fs.readFileSync('my_package.json', 'utf8'); var words = JSON.parse(package_json); var fld = new Array() var k=0; for(var key in words) { //-- console.log(key); fld[k]=key; k++; }; var a_cmd = template.replace(/<!--datafs-->/, package_json); a_cmd = a_cmd.replace(/<!--words.version-->/, words.version); a_cmd = a_cmd.replace(/<!--words.description-->/, words.description); a_cmd = a_cmd.replace(/<!--fld5-->/, fld[5]); return a_cmd; } exports.z_parser = z_parser;
Подстановка переменных осуществляется на чистом Javascript с помщью стандартной функции replace(). Результатом подстановки является визуализация данных. В идеологии MVC (Model-View-Controller) реализация визуального интерфейса возложена на представления View. В концепции MVC PHP представления органично вписываются во фрейворки. В Express для этого имеется специальный компонент - движок представлений (view engine), который становиться доступным для работы с представлениями при установе пакета hbs с помощью команды: npm install hbs --save. Выбор способа представлений исключительная прерогатива программиста.

Выполним проверку работоспособности наших NODE приложений в браузере:

Проверка работоспособности сайта в среде node-express

Индексная страница выводится в браузер с помощью функции response.send(data.main_navig), обеспечивающей встраивание содержимого в html-шаблон на лету. Ниже показан вариант отображения страницы при загрузке статического HTML файла file.html из папки ACTION:

Загрузка в браузер статического HTML файла в среде node-express

Настоящий пример иллюстрирует логику маршрутизации при запросе страницы сайта из отдельной директории. Так же демонстрируется выполнение обычных JS скриптов из файла scripts.js.

Последний пример ниже, иллюстрирует парсинг данных в формате JSON:

Результат парсинга данных в формате JSON в среде node-express

Выводится результат парсинга данных в формате JSON выполняемого при встраивании данных JSON в html-шаблон на лету.

6. Выводы


В статье рассмотрен упрощенный, и вместе с тем успешно работающий, пример маршрутизатора, обеспечивающий навигацию для несложного сайта. Однако, одной из главных целей Node является построение масштабируемых сетевых серверов [6]. В продолжение этого цикла статей будет представлен пример применения модуля express.router, который в значительной степени упростит код и обеспечит практически неограниченный выбор маршрутов для сайта. Чтобы не перегружать статью, вопрос установки и запуска под Linux, представленных выше Node-приложений будет представлен на странице реализация простого маршрутизатора на Linux + Forever + MySQL.

Следуя позитивным откликам [1], констатируем - Node.js мощная и гибкая технология, ограничение использования которой обусловлено лишь фантазией программиста.

ЛИТЕРАТУРА:
 
Home http://www.smirnov.sp.ru/
Node.js/Express/Full-Stack http://www.smirnov.sp.ru/cgi_java/cgi_programming4.html
To help ATMs - protection via hidden water marks http://www.smirnov.sp.ru/watermark/cards/bankhelp.html
The elements of the probabilistic analysis of the Forex markethttp://www.smirnov.sp.ru/forex_html/forex3eng.html
Currency Prediction Software of market FOREXhttp://www.smirnov.sp.ru/forex_html/usd_euro15.html
Technology of a GUARD of text files from unauthorized copyinghttp://www.smirnov.sp.ru/graphic_text/pastxt1eng.html
Software for evaluating of ground resolution of remote sensing optical-systemhttp://www.smirnov.sp.ru/special/index.html
Objective estimation of digital scanners qualityhttp://www.smirnov.sp.ru/scanner/scan02.html
Watermarking photoshttp://www.smirnov.sp.ru/watermark/index.html
Restoration of imageshttp://www.smirnov.sp.ru/scanner/filter/index.html
Visual Gallery Manager 2.0http://www.smirnov.sp.ru/vgm20/index.html
Physical simulation of optical-electronic system of high-resolutionhttp://www.smirnov.sp.ru/simult_oes/index.html
Technology of counteraction to falsification of credit cardshttp://www.smirnov.sp.ru/watermark/cards/card_eng.html
Free Advertisment. Free Bulletin Board (english).http://www.smirnov.sp.ru/wwwboard/engboard.html
Free Advertisment. Free Bulletin Board (russian).http://www.smirnov.sp.ru/wwwboard/rusboard.html
Contact ushttp://www.smirnov.sp.ru/wwwboard/eng/contact.html
The latent transfer and storage of the confidential information on the Internet and cellular communicationhttp://www.smirnov.sp.ru/watermark/conf_data/guarding_eng.html
Software Prices http://www.smirnov.sp.ru/prices/prices_eng.html
Smirnov HomePage http://www.smirnov.sp.ru/man/page1eng.html

St. Petersburg, Russia
Mobile: +7(921)343-33-97
E-mail: smirnoff04@mail.ru
http://www.smirnov.sp.ru/