• Главная
  •  > 
  • Questions
  •  > 
  • Как работает express node js. Основы Node JS & Express (III)

Как работает express node js. Основы Node JS & Express (III)

Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

  • Что такое JSON?
  • Для чего используется JSON?
  • Как создать строку JSON?
  • Простой пример строки JSON.
  • Сравним JSON и XML.
  • Как работать с JSON в JavaScript и PHP?
Что такое JSON?

JSON - простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.

После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

JSON имеет следующие преимущества:

  • Он компактен.
  • Его предложения легко читаются и составляются как человеком, так и компьютером.
  • Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
  • Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.

Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

Для чего используется JSON?

Наиболее частое распространенное использование JSON - пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX , который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

  • Пользователь нажимает миниатюру продукта в онлайн магазине.
  • JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
  • Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
  • JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.

    • Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

    Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON() , которые упрощают получение данных с помощью JSON через запросы AJAX.

    Как создать строку JSON?

    Есть несколько основных правил для создания строки JSON:

    • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
    • Массив заключается в квадратные скобки ([ и ]) и содержит разделенный запятой список значений.
    • Объект заключается в фигурные скобки ({ и }) и содержит разделенный запятой список пар имя/значение.
    • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие (:) и значение поля.
    • Значение в массиве или объекте может быть:
      • Числом (целым или с плавающей точкой)
      • Строкой (в двойных кавычках)
      • Логическим значением (true или false)
      • Другим массивом (заключенным в квадратные скобки)
      • Другой объект (заключенный в фигурные скобки)
      • Значение null

    Чтобы включить двойные кавычки в строку, нужно использовать обратную косую черту: \" . Так же, как и во многих языках программирования, можно помещать управляющие символы и шестнадцатеричные коды в строку, предваряя их обратной косой чертой. Смотрите детали на сайте JSON .

    Простой пример строки JSON

    Ниже приводится пример оформления заказа в формате JSON:

    { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }

    Рассмотрим строку подробно:

    • Мы создаем объект с помощью фигурных скобок ({ и }).
    • В объекте есть несколько пар имя/значение: "orderID": 12345 Свойство с именем "orderId" и целочисленным значением 12345 "shopperName": "Ваня Иванов" свойство с именем "shopperName" и строковым значением "Ваня Иванов" "shopperEmail": "[email protected]" Свойство с именем "shopperEmail" и строковым значением "[email protected]" "contents": [ ... ] Свойство с именем "contents" , значение которого является массивом "orderCompleted": true Свойство с именем "orderCompleted" и логическим значением true
    • В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .

    Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

    var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true };

    Сравнение JSON и XML

    Во многих отношениях вы можете рассматривать JSON как альтернативу XML, по крайней мере, в сфере веб приложений. Концепция AJAX оригинально основывалась на использовании XML для передачи данных между сервером и браузером. Но в последние годы JSON становится все более популярным для переноса данных AJAX.

    Хотя XML является проверенной технологией, которая используется в достаточном количестве приложений, преимуществами JSON являются более компактный и простой для распознавания формат данных.

    Вот как будет выглядеть выше приведенный пример объекта на XML:

    orderID 12345 shopperName Ваня Иванов shopperEmail [email protected] contents productID 34 productName Супер товар quantity 1 productID 56 productName Чудо товар quantity 3 orderCompleted true

    Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON - только 323 символа. Версию XML также достаточно трудно воспринимать.

    Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

    Работаем со строкой JSON в JavaScript

    JSON имеет простой формат, но создавать строку JSON вручную достаточно утомительно. Кроме того, часто нужно взять строку JSON, конвертировать ее содержание в переменную, которую можно будет использовать в коде.

    Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.

    Создаем строку JSON из переменной

    JavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

    var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }; alert (JSON.stringify(cart));

    Данный код выдаст:

    Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

    Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный - использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

    var jsonString = " \ { \ "orderID": 12345, \ "shopperName": "Ваня Иванов", \ "shopperEmail": "[email protected]", \ "contents": [ \ { \ "productID": 34, \ "productName": "Супер товар", \ "quantity": 1 \ }, \ { \ "productID": 56, \ "productName": "Чудо товар", \ "quantity": 3 \ } \ ], \ "orderCompleted": true \ } \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);

    Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .

    В результате мы получим следующий вывод:

    В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.

    JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

    Работаем со строкой JSON в PHP

    PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

    Создаем строку JSON из переменной PHP

    Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

    Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

    {"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"[email protected]","contents":[{"productID":34,"productName":"Супер товар","quantity":1},{"productID":56,"productName":"Чудо товар","quantity":3}],"orderCompleted":true}

    В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

    Вы может передавать различные флаги в качестве второго аргумента функции json_encode() . С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

    Создаем переменную из строки JSON

    Для преобразования строки JSON в переменную PHP используется метод json_decode() . Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

    Как и для JavaScript данный код выдаст:

    [email protected] Чудо товар

    По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

    Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:

    $cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
    "; echo $cart["contents"]["productName"] . "
    ";

    Данный код выдаст такой же вывод:

    [email protected] Чудо товар

    Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.

    Заключение

    Хотя JSON прост для понимания и использования, он является очень полезным и гибким инструментом для передачи данных между приложениями и компьютерами, особенно при использовании AJAX. Если вы планируете разрабатывать AJAX приложение, то нет сомнений, что JSON станет важнейшим инструментом в вашей мастерской.

    JSON или JavaScript Object Notation - это формат, реализующий неструктурированное текстовое представление структурированных данных, основанное на принципе пар ключ-значение и упорядоченных списках. Хотя JSON начал свое распространение с JavaScript, он поддерживается в большинстве языков, либо изначально, либо с помощью специальных библиотек. Обычно Json используется для обмена информацией между веб-клиентами и веб-сервером.

    За последние 15 лет JSON стал формальным стандартом обмена данными и используется практически везде в интернете. Сегодня он используется практически всеми веб-серверами. К такой популярности привело еще и то, что многие базы данных поддерживали JSON. Современные реляционные базы данных, такие как PostgreSQL и MySQL теперь поддерживают хранение и экспорт данных в JSON. Базы данных, такие как MongoDB и Neo4j также поддерживают JSON, хотя MongoDB использует слегка модифицированную версию JSON. В этой статье мы рассмотрим что такое JSON, его преимущества над XML, его недостатки, а также когда его лучше использовать.

    Чтобы понять зачем нужен формат JSON и как он работает не обойтись без практики. Сначала давайте рассмотрим такой пример:

    {
    “firstName”: “Jonathan”,
    “lastName”: “Freeman”,
    “loginCount”: 4,
    “isWriter”: true,
    “worksWith”: [“Spantree Technology Group”, “InfoWorld”],
    “pets”: [
    {
    “name”: “Lilly”,
    “type”: “Raccoon”
    }
    ]
    }

    В этой структуре мы четко определили некоторые атрибуты человека. Сначала мы определили имя, фамилию, количество авторизаций в системе, является ли этот человек писателем, список компаний, с которыми он работает и список домашних животных. Такая или похожая структура может быть передана с сервера в веб-браузер или мобильное приложение, которое уже может делать все что нужно с этими данными, например, отобразить их или сохранить.

    JSON - это общий формат данных с минимальным количеством типов значений - строки, числа, булевы значения (единица или ноль), списки, объекты и нуль. Несмотря на то, что JSON является подмножеством JavaScript, такие типы данных есть в большинстве популярных языков программирования что делает JSON хорошим кандидатом для передачи данных между программами, написанными на разных языках.

    Почему вам следует использовать JSON?

    Чтобы понять полезность и важность JSON нам нужно немного разобраться в истории интерактивности в интернет. В начале 2000 годов интерактивность работы веб-сайтов начала меняться. В то время браузер служил только для отображения информации, а всю работу по подготовке контента к отображению выполнял веб-сервер. Когда пользователь нажимал кнопку в браузере, запрос отправлялся на сервер, где собиралась и отправлялась страница HTML, готовая для отображения. Такой механизм был медленным и неэффективным. Это требовало, чтобы браузер повторно перерисовывал все на странице, даже если изменилась небольшая часть данных.

    В то время передача тарификация выполнялась за количество переданных данных, поэтому разработчики понимали, что перезагрузка целой страницы обходится очень дорого и рассматривали новые технологии для улучшения пользовательского интерфейса. Тогда возможность создания веб-запросов в фоновом режиме, которая была добавлена в Internet Explorer 5 оказалась довольно жизнеспособным подходом к поэтапной загрузке данных для отображения. Вместо перезагрузки страницы, нажатие на кнопку просто выполнит веб-запрос, который будет работать в фоновом режиме. Содержимое будет обновлено, как только загрузится. Им можно управлять с помощью JavaScript, универсального языка программирования для браузеров.

    Изначально данные передавались в формате XML, но он был сложным для его использования в JavaScript. В JavaScript уже были объекты, которые использовались для представления данных в языке, поэтому Дуглас Крокфорд взял синтаксис объектов JS и использовал его в качестве спецификации нового формата обмена данными, который назывался JSON. Этот формат было намного проще читать и разбирать в браузере на JavaScript. Вскоре разработчики начали использовать JSON вместо XML.

    Сейчас быстрый обмен данными JSON является стандартом де-факто для передачи данных между сервером и клиентом, мобильными приложениями и даже внутренними системными службами.

    JSON против XML

    Как я говорил выше, основной альтернативой JSON был и является XML. Однако XML становится все менее распространенным в новых системах. И очень легко понять почему. Ниже приведен пример записи данных, которые вы видели выше в Json через XML:


    Jonathan
    Freeman
    4
    true

    Spantree Technology Group
    InfoWorld

    Lilly
    Raccoon


    В дополнение к избыточности кода, по сути запись данных заняла в два раза больше места, XML еще вводит некоторую двусмысленность при анализе структуры данных. Преобразование XML в объект JavaScript может занять от десятков до сотен строк кода и требует тонкой настройки для каждого анализируемого объекта. Преобразование JSON в объект JavaScript выполняется в одну строчку и не требует каких-либо предварительных знаний об анализируемом объекте.

    Ограничения JSON

    Хотя JSON относительно сжатый и гибкий формат данных, с которым легко работать на многих языках программирования, у него есть некоторые недостатки. Вот некоторые ограничения:

    • Нет структуры. С одной стороны, это означает, что у вас есть полная гибкость для представления данных любым способом. С другой, вы можете легко хранить неструктурированные данные.
    • Только один тип чисел. поддерживается формат с плавающей запятой и двойной точностью IEEE-754. Это довольно много, но вы не можете использовать то многообразие числовых типов, что есть в других языках.
    • Нет типа даты. разработчики должны использовать строковые представления дат, что может вызвать несоответствие форматирования. Или же использовать в качестве даты количество миллисекунд, прошедших с начала эпохи Unix (1 января 1970).
    • Нет комментариев - вы не сможете делать аннотации для полей, которые требуют этого прямо в коде.
    • Подробность - хотя JSON менее подробный, чем XML, это не самый сжатый формат обмена данными. Для высокопроизводительных или специализированных служб вы захотите использовать более эффективные форматы.
    Когда следует использовать JSON?

    Если вы разрабатываете программное обеспечение, которое взаимодействует с браузером или нативным мобильным приложением, вам лучше использовать JSON. Использование XML считается устаревшим. Для связи между серверами JSON может быть не очень эффективным и лучше использовать инфраструктуру сериализации, похожую на Apache Avro или Apache Thrift. Даже здесь JSON - это не плохой выбор, и он может давать все что вам нужно. Но нет точного ответа что выбрать.

    Если вы используете базы данных MySQL, ваша программа будет в большой степени зависеть от того, что делается в базе данных. В реляционных базах данных, которые поддерживают JSON считается хорошим тоном использовать его как можно меньше. Реляционные базы данных были разработаны для данных определенной схемы. Хотя большинство из них сейчас поддерживает формат данных JSON, производительность работы с ним будет значительно ниже.

    Выводы

    JSON - это формат данных, нацеленный в первую очередь на отправку данных между веб-серверами и браузерами или мобильными приложениями. Формат имеет простой дизайн и гибкость, его легко читать и понимать, а также легко работать с такими данными в большинстве языков программирования. Отсутствие строгой схемы обеспечивает гибкость формата, но такая гибкость иногда затрудняет чтение и понимание данных.

    Возможно, вам придется трудно при работе с JSON в строго типизированных языках, таких как Scala или Elm, но широкое распространение формата предполагает, что есть утилиты и библиотеки, которые помогут даже при решении сложных задач. Теперь вы знаете что такое json и как его использовать.

    Основы Node JS & Express (III). Разбираемся, что такое npm и для чего он нужен. Устанавливаем Express и шаблонизатор EJS. Делаем полную подготовительную работу и начинаем создавать свой собственный сайт на NodeJS. Теперь с параметрами, которые постоянно будут меняться. Если нам нужно создать ссылку на некое значение, после /mews/значение . Оно будет меняться. Например: 23, part или любое др значение.

    App.get("/news/:id", function(req, res){ res.send("ID is - " + req.params.id); });

    В зависимости от этого параметра мы можем брать данные из БД (базы данных) и выводить конкретную статью.

    Нам нужен некий html файл куда мы будем передавать данные нашего id и в зависимости от этих данных выводить ту или иную информацию.

    Нам нужен некий шаблонизатор .

    Благодаря Express мы можем использовать несколько шаблонизаторов.

    Поскольку EJS является дополнительным пакетом, то нам нужно его установить.

    Нажать Enter

    После этого он установится в наш проект.

    Он позволяет передавать данные в различные шаблоны, причем эти шаблоны будут иметь расширение.ejs .

    В этих шаблонах мы сможем выводить наш html код вместе с вставленным в него js кодом (переменными, выводить циклы и многое другое).

    Будет такой шаблон страницы, который будет изменяться в зависимости от переданных в него данных.

    Первое, что нам нужно сделать это указать какой view engine мы будем использовать.

    View engine - по сути шаблонизатор.

    Поскольку их существует огромное количество, а мы выбрали именно EJS, то мы должны его указать в нашем index.js файле.

    Сразу после инициализации переменной app .

    App.set("view-engine", "ejs");

    Все файлы, которые мы будем отображать, по умолчанию будут искаться в папке views .

    На том же уровне, где index.js создадим папку views .

    В ней создадим новый файл news.ejs . Это будет некий шаблон, который мы будем наполнять.

    В эти шаблоны мы можем помещать самый обычный html-код.

    Новости Новостная страница.

    Для этого мне не нужно использовать метод.send или.sendFile , а мне потребуется метод render() .

    Метод render() берет нужный файл (шаблон) в папке views и может отобразить его в браузере. Плюс в этот шаблон он может передать некие параметры.

    Расширение в методе render() можно не указывать. Далее можно передать некие параметры в сам шаблон. Поэтому мы передаем вторым параметром - объект. В нем может быть большое количество свойств и значений.

    Допустим, что мы решили передать некий параметр newsId со значением req.params.id - то есть значение будет как раз сам вызываемый id .

    App.get("/news/:id", function(req, res){ render("news", {newsId: req.params.id}); });

    Таким образом в шаблон news будет передано значение, которое будет называться newsId со значением id .

    В файл news.ejs мы можем все это принять и отобразить.

    Немного изменим наш файл news.ejs . В заголовок страницы будем выводить ID.

    Все можно посмотреть в документации к шаблонизатору EJS (ссылка выше).

    Новостная страница c ID =

    Файл /views/news.ejs

    Новости body {background-color:#98bfd5;} .block {text-align: center; width: 70%; margin-left: 15%} h1 {color:#494949; font-size: 3.5em} p {color:#494949; font-size: 1.2em;} Новостная страница c ID =

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque numquam libero, veniam ipsum similique odit molestiae esse quia blanditiis magni debitis aliquam, pariatur nam quaerat quas nemo, facilis temporibus laboriosam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores enim vitae dolore nemo quas aliquam quia corrupti rerum ipsam ad nesciunt, architecto, pariatur officiis. Maxime iste ullam quibusdam, nobis voluptas!

    Файл index.js

    Let express = require("express"); let app = express(); app.set("view engine", "ejs"); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); app.get("/about", function(req, res){ res.sendFile(__dirname + "/about.html"); }); app.get("/news/:id", function(req, res){ res.render("news", {newsId: req.params.id}); }); app.listen(8080);

    Мы можем передавать несколько параметров. Например:

    App.get("/news/:id", function(req, res){ res.render("news", {newsId: req.params.id, newParam: 535 }); });

    А в файле news.ejs выведем его на страницу, например так:

    Помимо этого мы можем передавать и собственные объекты. Например, создадим объект:

    App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4}; res.render("news", {newsId: req.params.id, newParam: 535}); });

    И этот объект мы тоже можем передавать. Вначале определяем название того, что будем передавать, а потом указываем что передаем.

    Например:

    App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4}; res.render("news", {newsId: req.params.id, newParam: 535, obj: obj }); });

    Title =

    ID =

    Передача в шаблон массива. Создадим массив данных и выведем его с помощью цикла.

    App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4, paragraphs:["Параграф", "Обычный текст", "Числа: 3, 7, 24", 476] }; res.render("news", {newsId: req.params.id, newParam: 535, obj: obj}); });

    Теперь в самом шаблоне мы просто выведем этот массив циклом:

    Статические файлы и промежуточное ПО. Файлы, которые можно включить в другие файлы. Сейчас у нас есть один шаблон - news.ejs , а представьте. что их много. Десятки. И вам потребуется внести изменения в какую-то часть кода, который встречается во всех этих файлах. Придется вносить множество изменений.

    Чтобы этого избежать, можно использовать файлы, которые можно включать в другие файлы. Например. Есть файл с шапкой сайта. И если нужно что-то изменить, то достаточно внести изменения только в один файл, так как к другим он просто подключается.

    В папке шаблонов views создадим папку blocks , а в ней файл hrader.ejs .

    Файл hrader.ejs

    • На главную
    • Про нас
    • Новости

    Теперь нам нужно этот файл подключить во всех шаблонах. Идем в файл news и сразу после открывающего тега body записываем:

    Путь указывается от папки views , поскольку шаблонизатор всегда начинает искать там.

    Статические файлы. Создадим новую папку на уровне index.js с названием public . В ней будут находиться все статические файлы. Это css-файлы, картинки, документы и пр. Все те файлы. которые будут вызываться с различных страниц нашего сайта.

    В этой папке создадим еще одну папку - css и уже в ней создадим файл style.css .

    В него перенесем весь код стилей из файла index.ejs

    В файлах.ejs подключаем стили:

    Если теперь проверить, то ничего не произойдет. Стили не подключатся.

    Для подключения статических файлов нам нужно использовать промежуточное программное обеспечение:

    В файле index.js вверху, сразу за app.set , мы должны написать:

    App.use("/public",);

    И теперь, если мы где то будем использовать ссылку начинающуюся с /public сам NodeJS и Express будет понимать, что мы используем статические файлы и будет подключать все верно.

    Вторым - где мы их ищем express.static("public") т. есть в папке /public .

    Если обобщить, то в коде app.use("/public", express.static("public")); мы отслеживаем ту ссылку, которую прописываем в

    Если бы у на было бы вот так:

    То и в этом коде было бы:

    App.use("/assets", express.static("public"));

    В данном случае public указывает на папку!

    Если так и оставить, то никаких изменений не произойдет. Файл подключится, потому что мы будем отслеживать ссылку assets .

    App.use("/assets ", express.static("public "));

    Для того, чтобы не путаться, обычно, делают ссылку и папку одного имени. Чаще всего это именно public .

    Промежуточное ПО - это то, что мы делаем до того пока отправим какие-то данные на страницу (сервер).

    В данном случае это и есть наше промежуточное ПО.

    Создание HTML-формы и получение данных Первое, что мы сделаем это добавим саму форму на наш сайт.

    Открываем файл about.ejs и сюда мы будем добавлять форму используя технологию bootstrap.

    В окно поиска вводим Forms и на найденной странице копируем первую форму сверху.

    Сохраним и запустим.

    POST -запрос. Так так мы будем выполнять POST -запрос, то нам необходимо добавить в форму несколько атрибутов.

    Method="post" - т.к POST -запрос

    И action="" - это то куда нужно перенаправить пользователя после того,как он нажмет "Отправить". В нашем случае это:

    Все остальное нам нужно сделать в файле index.js

    Первым делом нам необходимо скачать пакет, который называется body-parser .

    Он нам позволяет брать POST -запрос, который идет от формы и обрабатывать его. Проще говоря - получать все данные из формы.

    Для установки, в папке проекта в КС пишем.

    npm install body-parser

    Нажимаем - Enter .

    Пакет устанавливается.

    После установки стоит следовать простой инструкции.

    Перейдем на сайте в раздел Examples и найдем там раздел Express route-specific

  • Подключаем нужные для нас модули.

    • Var bodyParser = require("body-parser")

    Var urlencodedParser = bodyParser.urlencoded({ extended: false })

    То есть тот парсер, который позволит нам брать данные из POST -запроса и работать с ними как нам будет нужно.

  • Далее, на основе документации, мы видим, что нам нужно отслеживать именно POST -запрос и передавать в него некое промежуточное ПО (urlencodedParser). Ранее мы уже отслеживали GET- запросы.

    • Данные полученные из формы мы выведем в консоль.

    Console.log(req.body);

    Можно сразу добавить проверку. Если не передано никаких данных из формы, мы выдадим просто ошибку.

    If (!req.body) return res.sendStatus(400)

    В самой форму нужно указать для полей атрибут name . Это будут названия свойств, а значение - это то, что введет пользователь.

    О нас. Заголовок второго уровня. На главную третьего уровня заглавие.

    Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке систем массового участия. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.

    Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.

    Email address We"ll never share your email with anyone else. Password Check me out Отправить

    Let express = require("express"); var bodyParser = require("body-parser"); let app = express(); var urlencodedParser = bodyParser.urlencoded({ extended: false }); app.set("view engine", "ejs"); app.use("/public", express.static("public")); app.get("/", function(req, res){ res.render("index"); }); app.get("/about", function(req, res){ res.render("about"); }); app.post("/about", urlencodedParser, function(req, res){ if (!req.body) return res.sendStatus(400); console.log(req.body); res.render("about"); }); app.get("/news", function(req, res) { res.render("news-common",{newParam1:"Param-1"}); }); app.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4, paragraphs:["Параграф", "Обычный текст", "Числа: 3, 7, 24", 476]}; res.render("news", {newsId: req.params.id, newParam: 535, obj: obj}); }); app.listen(8080);

    Введем данные и нажмем отправить. В консоли мы увидим вывод этих данных (свойство - значение).

    Страница перезагрузится после отправки формы и в консоли мы увидим данные, которые отправили.

    Теперь мы можем сделать так, чтобы после отправки мы показывали другие данные.

    Изменим немного код в файле index.js

    App.post("/about", urlencodedParser, function(req, res){ if (!req.body) return res.sendStatus(400); console.log(req.body); res.render("about-success", {data: req.body} ); });

    Таким образом мы будем выводить страницу about-success.ejs и мы ее сейчас создадим в папке views . Вторым параметром мы передадим данные формы в виде объекта. - {data: req.body}

    О нас. Hello, It is my first page on Node.js Заголовок второго уровня. На главную

    Равным образом укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий.

    Спасибо

    Email:
    Pass:
    isCheck:

    Таким образом вы можете отслеживать данные, которые поступают из форм, проверять их на соответствие и если пользователь что-то не заполнил, то выдавать ошибку и т.д.

    Кроме этого было бы удобно отправлять эти данные на почту или сохранять в БД (базу данных).

    Если вы хотите отправить их на почту. то в npm есть еще один пакет - Nodemailer . Этот пакет позволяет отправлять данные непосредственно на почту. Использовать его просто. И с помощью него вы можете получать по почте все данные формы, заполненной пользователем.

    NodeJS предоставляет нам множество дополнительных пакетов. Например Express мы использовали для того, чтобы проще отслеживать ссылки и использовать шаблонизаторы. Body-parseer для того, чтобы принимать данные полученные из формы. Nodemailer - для отправки данных на почту.

    Как получать данные из URL-строки. Иногда нужно получить такой тип данных из адресной строки:

    http://localhost:8080/news/12?filter-id&city=london

    Разберем, как получить эти данные на примере вот этого кода из файла index.js:

    App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4, paragraphs:["Параграф", "Обычный текст", "Числа: 3, 7, 24", 476]}; res.render("news", {newsId: req.params.id, newParam: 535, obj: obj}); });

    Просто выведем эти данные в консоль:

    App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4, paragraphs:["Параграф", "Обычный текст", "Числа: 3, 7, 24", 476]}; console.log(req.query); res.render("news", {newsId: req.params.id, newParam: 535, obj: obj}); });

    В консоли мы увидим

    { filter: "id", city: "london" }

    Это может быть иногда полезно.

    • Перевод

    Начинающему программисту разработка для Node.js может показаться сущим кошмаром. Виной всему – гибкость этой платформы и отсутствие чётких руководств. Но, на самом деле, всё не так уж и страшно.


    Вот, например, типичная задача: разработка REST API, серверной части некоего приложения. Обилие собственных возможностей Node и множество дополнительных модулей, которые способны помочь в решении этой задачи, способны завести новичка в тупик, вызванный богатством выбора. Основные вопросы здесь заключаются в подборе компонентов и в настройке их совместной работы.

    Один из способов создания серверной части приложения заключается в применении связки из Node.js, фреймворка Express и СУБД MongoDB. Собственно говоря, сегодня я расскажу о том, как создать рабочий макет API, который может служить основой для практически любого приложения. Здесь мы реализуем основные маршруты REST, будем взаимодействовать с API по HTTP и использовать простые варианты работы с базой данных.

    Для того, чтобы успешно освоить этот материал, вам надо понимать, что такое REST API, иметь представление об операциях CRUD и обладать базовыми знаниями в области JavaScript. Здесь я использую ES6, ничего особенно сложного, в основном – стрелочные функции.

    Мы разработаем скелет серверной части приложения для создания заметок, похожего на Google Keep . При этом с заметками можно будет выполнять все четыре CRUD-действия, а именно – создание (create), чтение (read), обновление (update), и удаление (delete).

    Предварительная подготовка Если Node у вас пока нет, самое время его установить . После установки создайте папку и выполните в ней команду инициализации нового проекта:

    Npm init
    В ходе инициализации ответьте на вопросы, в частности, дайте приложению имя «notable» (или, если хотите, любое другое).

    Теперь в папке должен появиться файл package.json . Это означает, что можно начать устанавливать дополнительные пакеты, от которых зависит проект.

    В качестве фреймворка мы планируем использовать Express. Системой управления базами данных будет MongoDB. Кроме того, в качестве вспомогательного средства для работы с JSON, используем пакет body-parser. Установим всё это:

    Npm install --save express mongodb body-parser
    Ещё, я очень рекомендую установить Nodemon как dev-зависимость. Это простой маленький пакет, который, при изменении файлов, автоматически перезапускает сервер.

    Для установки этого пакета выполните команду:

    Npm install --save-dev nodemon
    Затем можно добавить следующий скрипт в файл package.json :

    // package.json "scripts": { "dev": "nodemon server.js" },
    Готовый package.json будет выглядеть примерно так:

    // package.json { "name": "notable", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "dev": "nodemon server.js" }, "author": "", "license": "ISC", "dependencies": { "body-parser": "^1.15.2", "express": "^4.14.0", "mongodb": "^2.2.16" }, "devDependencies": { "nodemon": "^1.11.0" } }
    Теперь создадим файл server.js и приступим к работе над API.

    Сервер Начнём с подключения зависимостей в файле server.js .

    // server.js const express = require("express"); const MongoClient = require("mongodb").MongoClient; const bodyParser = require("body-parser"); const app = express();
    MongoClient будем использовать для взаимодействия с базой данных. Кроме того, здесь мы инициализируем константу app , символизирующую наше приложение, экземпляром фреймворка Express. Чтобы сервер заработал, осталось лишь указать приложению на то, чтобы оно начало прослушивать HTTP-запросы.

    Тут укажем порт и запустим прослушивание следующим образом:

    // server.js const port = 8000; app.listen(port, () =>
    Теперь, если выполнить команду npm run dev (или – node server.js , если вы не устанавливали Nodemon), в терминале должно появиться сообщение: «We are live on port 8000».

    Итак, сервер работает. Но сейчас он не делает совершенно ничего полезного. Давайте с этим разберёмся.

    Маршруты, ориентированные на CRUD-операции Мы планируем создать 4 маршрута. А именно:
    • CREATE – создание заметок.
    • READ –чтение заметок.
    • UPDATE –обновление заметок.
    • DELETE –удаление заметок.
    Освоив эту схему, вы сможете понять, как, с помощью Node, организовать практически любой необходимый REST-маршрут.

    Для того, чтобы протестировать API, понадобится нечто, способное имитировать запросы клиентской части приложения. Решить эту задачу нам поможет отличная программа, которая называется Postman . Она позволяет выполнять простые HTTP-запросы с заданным телом и параметрами.

    Установите Postman. Теперь всё готово к настройке маршрутов.

    О структуре проекта В большинстве руководств по Node.js (и во множестве реальных приложений) все маршруты размещают в одном большом файле route.js . Мне такой подход не очень нравится. Если разложить файлы по разным папкам, это улучшит читаемость кода, приложением будет легче управлять.

    Наше приложение большим не назовёшь, но предлагаю сделать всё как надо, учитывая, всё же, его скромные масштабы. Создайте следующие папки: папку app , а внутри неё – routes . В папке routes создайте файлы index.js и note_routes.js . Другими словами, структура проекта будет выглядеть так: root > app > routes > index.js и note_routes.js .

    Mkdir app cd app mkdir routes cd routes touch index.js touch note_routes.js
    Такая структура, для маленького приложения, может показаться избыточной, но она окажется очень кстати в более крупной системе, построенной на базе нашего примера. К тому же, любые проекты лучше всего начинать, используя лучшие из существующих наработок.

    Создание заметок: маршрут CREATE Начнём с маршрута CREATE. Для этого ответим на вопрос: «Как создать заметку?».
    Прежде чем приступить к созданию заметок, нам понадобится расширить инфраструктуру приложения. В Express маршруты оборачивают в функцию, которая принимает экземпляр Express и базу данных как аргументы.

    Выглядеть это может так:

    // routes/note_routes.js module.exports = function(app, db) { };
    Теперь можно экспортировать эту функцию через index.js :

    // routes/index.js const noteRoutes = require("./note_routes"); module.exports = function(app, db) { noteRoutes(app, db); // Тут, позже, будут и другие обработчики маршрутов };
    Импортируем то, что получилось, в server.js :

    // server.js const express = require("express"); const MongoClient = require("mongodb").MongoClient; const bodyParser = require("body-parser"); const app = express(); const port = 8000; require("./app/routes")(app, {}); app.listen(port, () => { console.log("We are live on " + port); });
    Обратите внимание на то, что так как базу данных мы пока не настроили, вторым аргументом передаётся пустой объект.

    Теперь создаём маршрут CREATE. Синтаксис здесь довольно простой:

    Module.exports = function(app, db) { app.post("/notes", (req, res) => { // Здесь будем создавать заметку. res.send("Hello") }); };
    Когда приложение получает POST-запрос по пути ‘/notes’, оно исполнит код внутри функции обратного вызова, передав ей объект запроса (который содержит параметры запроса или JSON-данные) и объект ответа (который, понятно, используется для ответа).

    То, что у нас получилось, уже можно протестировать. Отправим, с помощью Postman, POST-запрос по адресу localhost:8000/notes .


    В ответ на запрос должно прийти «Hello»

    Отлично. Первый маршрут создан. Следующий шаг – добавление к запросу параметров, обработка их в API, и, наконец – сохранение заметки в базе данных.

    Параметры запроса В Postman перейдите на вкладку Body и добавьте несколько пар ключ-значение, выбрав радиокнопку x-www-form-urlencoded . А именно, первым ключом будет title , его значение – My Note Title . Второй ключ – body , его значение – What a great note .

    Это добавит к запросу закодированные данные, которые можно будет обработать в API.


    Заголовок моей заметки, да и она сама – очень просты, а вы тут можете проявить фантазию

    В файле note_route.js , просто выведем тело заметки в консоль.

    // note_routes.js module.exports = function(app, db) { app.post("/notes", (req, res) => { console.log(req.body) res.send("Hello") }); };
    Попробуйте отправить запрос с помощью Postman, и вы увидите… undefined .

    К сожалению, Express не может самостоятельно обрабатывать формы в URL-кодировке. Тут нам на помощь придёт ранее установленный пакет body-parser.

    // server.js const express = require("express"); const MongoClient = require("mongodb").MongoClient; const bodyParser = require("body-parser"); const app = express(); const port = 8000; app.use(bodyParser.urlencoded({ extended: true })); require("./app/routes")(app, {}); app.listen(port, () => { console.log("We are live on " + port); });
    Теперь, после выполнения POST-запроса, его тело можно будет увидеть в терминале в виде объекта.

    { title: "My Note Title", body: "What a great note." }
    Чтобы первый маршрут полностью заработал, осталось лишь настроить базу данных и добавить в неё заметку.

    Для быстрого создания и настройки базы данных воспользуемся сервисом mLab . Работать с ним легко, для маленьких объёмов информации он бесплатен.

    Создайте учётную запись на сайте mLab и разверните новую базу данных MongoDB. Для этого нажмите на кнопку Create New в разделе MongoDB Deployments , в появившемся окне, в разделе Plan , выберите Single-node . В списке Standard Line , выберите Sandbox и дайте базе данных имя. Далее, в окне управления базой, перейдите на вкладку Users и добавьте пользователя базы данных, задав имя и пароль.


    Новый пользователь базы данных

    Скопируйте с той же страницы второй URL – строку подключения к базе данных.


    URL для подключения к базе данных

    В корень проекта добавьте директорию config , создайте в ней файл db.js .

    Mkdir config cd config touch db.js
    В файл db.js добавьте следующее:

    Module.exports = { url: здесь будет ваш URL };
    Не забудьте добавить в URL имя пользователя и пароль (не те, что от учётной записи в mLab, а те, что создавали для базы данных). Если вы размещаете проект на Github, не забудьте включить в него файл .gitignore (вроде этого). Так вы не сделаете всеобщим достоянием имя и пароль для работы с базой.

    Теперь, в server.js , можно использовать MongoClient для подключения к базе данных и обернуть в функцию, которая передаётся ему при создании, настройки приложения:

    // server.js const express = require("express"); const MongoClient = require("mongodb").MongoClient; const bodyParser = require("body-parser"); const db = require("./config/db"); const app = express(); const port = 8000; app.use(bodyParser.urlencoded({ extended: true })); MongoClient.connect(db.url, (err, database) => { if (err) return console.log(err) require("./app/routes")(app, database); app.listen(port, () => { console.log("We are live on " + port); }); })
    На этом подготовка инфраструктуры закончена. С этого момента будем заниматься исключительно путями.

    Добавление записей в базу данных MongoDB хранит данные в коллекциях (collections), которые полностью оправдывают своё название. В нашем случае заметки будут храниться в коллекции, которая, как несложно догадаться, будет называться notes .

    В ходе настройки клиента, ему была передана строка подключения к базе данных, аргумент db . В коде маршрутов доступ к базе можно получить так:

    Db.collection("notes")
    Создание заметки в базе равносильно вызову команды insert для коллекции notes:

    Const note = { text: req.body.body, title: req.body.title} db.collection("notes").insert(note, (err, results) => { }
    После успешного завершения команды (или после того, как она, по какой-нибудь причине, не сможет выполниться), нужно либо отправить в ответ только что созданный объект заметки, либо – сообщение об ошибке. Вот код note_routes.js , дополненный с учётом этих рассуждений:

    // note_routes.js module.exports = function(app, db) { app.post("/notes", (req, res) => { const note = { text: req.body.body, title: req.body.title }; db.collection("notes").insert(note, (err, result) =>
    Испытайте то, что получилось. Отправьте из Postman POST-запрос (с флагом x-www-form-urlencoded ), задав на вкладке Body значения полей title и body .

    Ответ должен выглядеть примерно так:


    Успешное добавление записи в базу

    Чтение заметок: маршрут READ Инфраструктура, которую мы подготовили выше, подходит для всех маршрутов, поэтому теперь дело пойдёт быстрее.

    Итак, мы собираемся запросить только что созданную заметку, пройдя по пути localhost:8000/notes/{id заметки} . В нашем случае путь будет выглядеть так: localhost:8000/notes/585182bd42ac5b07a9755ea3 .

    Если ID одной из уже созданных заметок у вас нет, можете заглянуть в базу на mLab и найти его там, или создать новую заметку и скопировать её идентификатор.

    Вот как это выглядит в note_route.js :

    // note_routes.js module.exports = function(app, db) { app.get("/notes/:id", (req, res) => { }); app.post("/notes", (req, res) => { const note = { text: req.body.body, title: req.body.title }; db.collection("notes").insert(note, (err, result) => { if (err) { res.send({ "error": "An error has occurred" }); } else { res.send(result.ops); } }); }); };
    Так же, как и раньше, мы собираемся вызвать некую команду для коллекции базы данных заметок. Применим для этого метод findOne .

    // note_routes.js module.exports = function(app, db) { app.get("/notes/:id", (req, res) => { const details = { "_id": }; db.collection("notes").findOne(details, (err, item) => { if (err) { res.send({"error":"An error has occurred"}); } else { res.send(item); } }); }); app.post("/notes", (req, res) => { const note = { text: req.body.body, title: req.body.title }; db.collection("notes").insert(note, (err, result) => { if (err) { res.send({ "error": "An error has occurred" }); } else { res.send(result.ops); } }); }); };
    Идентификатор из параметров URL можно вытащить с помощью конструкции req.params.id . Однако если просто вставить строку вместо из кода выше, работать это не будет.

    MongoDB требуется ID не в виде строки, а в виде специального объекта. Он называется ObjectID .

    Вот что, после небольших изменений, у нас получилось:

    // note_routes.js var ObjectID = require("mongodb").ObjectID; module.exports = function(app, db) { app.get("/notes/:id", (req, res) => { const id = req.params.id; const details = { "_id": new ObjectID(id) }; db.collection("notes").findOne(details, (err, item) => { if (err) { res.send({"error":"An error has occurred"}); } else { res.send(item); } }); }); app.post("/notes", (req, res) => { const note = { text: req.body.body, title: req.body.title }; db.collection("notes").insert(note, (err, result) => { if (err) { res.send({ "error": "An error has occurred" }); } else { res.send(result.ops); } }); }); };
    Испытайте это с одним из идентификаторов заметок, имеющихся в базе данных. Ответ в Postman должен выглядеть так:


    Успешный запрос заметки из базы

    Удаление заметок: маршрут DELETE Удаление объектов – это практически то же самое, что их поиск в базе. Только вместо функции findOne используется функция remove . Вот полный код соответствующего пути. Здесь выделено то, что отличается от кода уже существующего метода, обрабатывающего запрос GET.

    // note_routes.js // ... app.delete("/notes/:id", (req, res) => { const id = req.params.id; const details = { "_id": new ObjectID(id) }; db.collection("notes").remove(details, (err, item) => { if (err) { res.send({"error":"An error has occurred"}); } else { res.send("Note " + id + " deleted!"); } }); }); // ...

    Обновление заметок: маршрут UPDATE А вот и последний маршрут. Обработка запроса PUT – это, по сути, гибрид операций READ и CREATE. Сначала надо найти объект, потом – обновить его в соответствии с поступившими в запросе данными. Сейчас, если вы, испытывая предыдущий фрагмент кода, удалили свою единственную заметку, создайте ещё одну.

    Вот код маршрута обновления заметок:

    // note_routes.js // ... app.put ("/notes/:id", (req, res) => { const id = req.params.id; const details = { "_id": new ObjectID(id) }; const note = { text: req.body.body, title: req.body.title }; db.collection("notes").update(details, note, (err, result) => { if (err) { res.send({"error":"An error has occurred"}); } else { res.send(note); } }); }); // ...
    Теперь любую заметку можно редактировать. Вот, как это выглядит:


    Успешное обновление заметки

    Обратите внимание на недостаток нашего примера. Если в PUT-запросе не будет тела или заголовка заметки, соответствующие поля в базе будут просто очищены.

    Я не нагружал пример дополнительными проверками. Если хотите, можете сами доработать операцию обновления заметок, внося в базу новые данные только в том случае, если запрос сформирован верно.

    Итоги Теперь у вас есть рабочее Node API, которое поддерживает четыре основные операции CRUD. Серверная часть приложения умеет, реагируя на HTTP-запросы клиента, создавать в базе данных заметки, находить их, удалять и редактировать.

    Основная цель моего рассказа – познакомить всех желающих со связкой Node + Express + MongoDB и с методикой разработки серверных приложений. Конечно, если сегодня состоялось ваше первое знакомство с этими инструментами, для того, чтобы во всё лучше вникнуть, вам понадобится почитать документацию. Однако, понимание происходящего позволит вам быстро восполнить пробелы в знаниях и приступить к работе над собственными проектами, использовав, в качестве отправной точки, приложение, которым мы с вами тут занимались.

    Если у вас есть опыт работы с Node.js, Express и MongoDB в реальных проектах, может быть, вы посоветуете что-нибудь полезное новичкам? А если вы только что всё это впервые попробовали – ждём ваших впечатлений.

    Как видно из заголовка, речь в нашей статье пойдет о выборе одного из трех фреймворков для Node.js: Express , Koa и Sails .

    В конце статьи мы поделимся с вами выбором компании и объясним, почему выбранному нами фреймворку стоит уделить особое внимание.

    Сразу подчеркнем, что задача достаточно сложная, и провозгласить один из вариантов как оптимальный и подходящий на все случаи жизни будет сложно.

    В своей статье мы сначала опишем основные характеристики каждого фреймворка. И когда у вас сложится общее впечатление о них, сравним три фреймворка на основании нескольких ключевых критериев .

    А сейчас давайте перенесемся в 2009г. , когда двухлетние эксперименты Райана Даля по созданию серверных веб-компонентов увенчались успехом и появилась принципиально новая технология.

    Node.js – событийно-ориентированная платформа, применяемая для создания веб-приложений, которая обеспечивает возможность использовать JavaScript на стороне сервера.

    Так как до появления Node.js язык JavaScript использовался только на стороне клиента, появление такой платформы было встречено разработчиками с энтузиазмом. По сути, это открывало новые возможности для создания приложений с высокой производительностью и масштабируемостью.

    Нужно признать, что ожидания разработчиков оправдались, и на данный момент Node.js сохраняет популярность и продолжает двигаться вперед.

    Чтобы убедиться в этом, достаточно отследить периодичность выхода обновлений и объем вносимых изменений .

    Сообщество Node.js растет и развивается. Регулярно генерируются новые идеи, а в результате появляются новые инструменты и библиотеки.

    Благодаря таким темпам развития разработчики получили в свое распоряжение широкий ассортимент фреймворков, а подобное многообразие, как правило, предполагает сложный выбор.

    В своей с татье мы будем выбирать один из трех MVC фреймворков, которые используются для серверной части (бэкенда) приложений на Node.js.

    MVC (англ. Model-View-Controller) – шаблон проектирования, включающий в себя три компонента: Модель, Представление и Контроллер. Изменение всех трех компонентов может производиться независимо друг от друга. При этом модель предоставляет данные и правила управляющей логики, представление отвечает за отображение данных на пользовательском интерфейсе, а контроллер обеспечивает взаимодействие между моделью и представлением.

    Для сравнения в рамках этой статьи м ы выбрали:

    • Express, как самый гибкий, простой и быстрый фреймворк
    • Koa , как версию Express нового поколения, созданную той же командой разработчиков
    • Sails , как созданный для быстрой разработки приложений на принципах Ruby on Rails и Express .

    У каждого из этих фреймворков есть свои последователи и оппоненты, которые могут бесконечно спорить друг с другом, приводя собственные доводы за и против.

    Но при этом все три варианта обладают определенными характеристиками и особенностями, обеспечивающими преимущество в той или иной конкретной ситу ации.

    EXPRESS.JS

    Начнем описание с самого простого фреймворка, используемого на платформе Node.js.

    Express используется для разработки приложений достаточно давно и благодаря своей стабильности прочно занимает позицию одного из самых

    Для этого фреймворка существует большое количество подробных инструкции и описаний, которые составлены разработчиками, проверившими его эффективность на практике. Поэтому именно с Express рекомендуется начинать работу, если вы намерены научиться создавать приложения на платформе Node.js.

    Согласитесь, гораздо разумнее воспользоваться накопленным и проверенным опытом, чем заново изобретать велосипед.

    Основная особенность этого фреймворка заключается в том, что для Express характерен небольшой объем базового функционала . Все остальные нужные вам функции нужно будет добирать за счет внешних модулей. По сути, Express в чистом виде – это сервер и у него может не быть ни одного модуля.

    Благодаря такому минимализму разработчик изначально получает в свое распоряжение легкий и быстрый инструмент , который он может расширять и развивать.

    При этом немаловажно, что выбор модулей для Express не связан ни с какими ограничениями: ни с количественными, ни с функциональными.

    В результате, этот фреймворк обеспечивает разработчику возможность решать любые задачи, не ограничивая его при этом в выборе средств.

    С одной стороны, не может не радовать тот факт, что отсутствие готовых универсальных решений фактически означает, что каждое создаваемое приложение будет уникальным.

    С другой стороны, разработчику нужно самостоятельно отбирать и организовывать модули, а это предполагает большой объем работы и соответственно, требует от разработчика больше времени и усилий.

    ПЛЮСЫ:

    ✓ простота

    ✓ гибкость

    ✓ хорошая масштабируемость

    ✓ развитое сообщество

    ✓ подробная документация

    ✓ широкий выбор подключаемых модулей

    МИНУСЫ:

    ✗ большой объем ручной работы

    ✗ используется устаревший подход callbacks функций

    KOA.JS

    Koa был создан командой разработчиков, как вариант фреймворка Express в новом поколении . Такая улучшенная версия разрабатывалась для создания веб-приложений и API с повышенной производительностью. Соответственно, создатели стремились учесть все недостатки предшественника и сделать его более современным и удобным в использовании.

    Посмотрим, насколько это удалось.

    Koa обладает практически таким же функционалом и превосходит Express по легкости.

    Характерной особенностью Koa является использование генераторов ES6.

    Генераторы – тип функций, которые могут быть запущены, остановлены и возобновлены независимо от того, на каком этапе выполнения они находятся, и при этом сохраняют свой контент.

    Применение генераторов ES6 в Koa позволяет исключить обратные вызовы (англ. callbacks ), уменьшает для разработчиков объем работы с кодом и снижает вероятность ошибок .

    Благодаря тому, что создателями Koa уже были учтены минусы, выявленные в процессе работы с Express , этот фреймворк может похвастаться тем, что его применение существенно упрощает адаптацию под конкретные запросы клиентов (кастомизацию ). А такая характеристика может в итоге сыграть решающую роль в процессе выбора: сегодня в условиях высокой конкуренции любое приложение стремится к использованию своего собственного стиля.

    Если говорить о недостатках, они, в основном, связаны с относительной молодостью Koa (появился в 2013 г. ). Фреймворк не пользуется поддержкой такого обширного сообщества, как Express , и еще не успел продемонстрировать все свои возможности.

    ПЛЮСЫ:

    ✓ легкий

    ✓ гибкий

    ✓ быстрый

    ✓ генераторы ES6

    ✓ лучшая кастомизация

    МИНУСЫ:

    ✗ недостаточная поддержка сообщества

    SAILS.JS

    Этот фреймворк разработан как полный готовый продукт , который уже включает в себя достаточный функционал для того, чтобы можно было начать работу, и при этом использует минимальное количество внешних модулей.

    Соответственно, такой фреймворк изначально будет тяжелее, чем два предыдущих.

    С одной стороны, от разработчика требуется минимальное количество усилий, так как для создания приложения используется собственный функционал фреймворка. Нет необходимости вникать в тонкости процесса – можно просто взять готовое проверенное решение.

    С другой стороны, разработка приложения будет ограничена рамками имеющихся в наличии средств фреймворка, так как внешних модулей для Sails гораздо меньше, чем для Express или Koa .

    Отличительной особенностью фреймворка является встроенная технология программирования Waterline ORM (англ. Object-Relational Mapping) , которая используется для обеспечения связи с различными базами данных.

    Наличие такого компонента можно было бы отнести к преимуществам, но в процессе работы вы можете столкнуться с определенными ограничениями. Например, Waterline не поддерживает транзакции, новые фичи и исправления ошибок вносятся несвоевременно.

    В целом, более медленное развитие до недавнего времени было характерно для всего сообщества Sails , особенно по сравнению с другими, поддерживающими описанные выше Express и Koa . Но следует отметить, что на данный момент сообщество Sails все же начало набирать обороты и развиваться более активно.

    ПЛЮСЫ:

    ✓ богатый функционал

    ✓ поддержка Socket.io

    ✓ документация в одном месте

    ✓ легче найти специалиста с опытом работы на Sails

    МИНУСЫ:

    ✗ тяжелый

    ✗ медленный

    ✗ ограничения Waterline

    ✗ недостаточно подробная документация

    Мы описали основные свойства, характерные для трех фреймворков, которых вполне достаточно для составления о них объективного впечатления.

    Если у вас остались вопросы, свяжитесь с нами прямо сейчас!

    Чтобы помочь вам более наглядно сопоставить три фреймворка, исходя из указанных выше особенностей, компания предлагает небольшую сравнительную таблицу.

    Попробуем сделать общий вывод из того, что мы уже знаем о трех рассматриваемых фреймворках. Определим для каких проектов, в целом, лучше подходит каждый из них:

    Express.js подходит для:

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

    Sails.js подходит для:

    • быстрого старта проекта;
    • быстрых стартапов, которые не предполагают расширения в будущем;
    • приложений реального времени, где требуется моментальная реакция;
    • начинающих Node.js программистов;
    • приложений, не требующих долгосрочной поддержки.

    Справедливости ради отметим, что приложения реального времени можно создавать и при помощи Express. Однако при разработке такого приложения с использованием Sails на создание и настройку уйдет гораздо меньше времени и сил.

    Koa.js подходит для:

    • как небольших, так и крупных проектов, которые предполагают развитие в перспективе;
    • для проектов с высокой степенью кастомизации;
    • для облегчения долгосрочной поддержки приложений.

    Теперь, когда мы подробно рассмотрели плюсы и минусы каждого из трех фреймворков, расскажем о том, какой фреймворк мы выбираем и почему.

    Мы выбираем Koа, потому что:
    • Как и Express, Koa не ограничивает разработчика в использовании встроенных модулей, а дает возможность выбрать из множества именно тот, который подходит лучше всего для конкретного проекта;
    • Koa вобрал в себя достоинства проверенного и широко-используемого фреймворка Express;
    • у создателей Koa была возможность проанализировать сложности, с которыми столкнулись разработчики, использовавшие Express;
    • при создании Koa были учтены недостатки его предшественника;
    • Koa основан на новых стандартах и соответствует современным тенденциям;
    • Koa подходит для разработки самых разнообразных приложений любого объема, с любой степенью кастомизации и с любыми требованиями к поддержке;

    … и самый главный аргумент – это собственный положительный опыт специалистов , приобретенный во время работы с этим фреймворком.

    В любом случае, подойдите к решению с рациональной точки зрения и отдайте предпочтение тому фреймворку, который оснащен в соответствии с вашими конкретными требованиями.

    Мы всегда готовы поддержать ваш выбор и помочь вам реализовать любой проект. Не откладывайте на завтра и прямо сейчас!