Учебное пособие по Node.js Express FrameWork - обучение за 10 минут

Содержание:

Anonim

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

В этом руководстве вы узнаете:

  • Что такое Express.js?
  • Установка и использование Express
  • Что такое маршруты?
  • Пример веб-сервера с использованием express.js

Что такое Express.js?

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

Он стал стандартной серверной средой для node.js. Express - это серверная часть того, что известно как стек MEAN.

MEAN - это бесплатный программный стек JavaScript с открытым исходным кодом для создания динамических веб-сайтов и веб-приложений, который имеет следующие компоненты;

1) MongoDB - стандартная база данных NoSQL

2) Express.js - фреймворк для веб-приложений по умолчанию.

3) Angular.js - фреймворк JavaScript MVC, используемый для веб-приложений.

4) Node.js - фреймворк, используемый для масштабируемых серверных и сетевых приложений.

Платформа Express.js упрощает разработку приложения, которое можно использовать для обработки нескольких типов запросов, таких как запросы GET, PUT, POST и DELETE.

Установка и использование Express

Express устанавливается через диспетчер пакетов узлов. Это можно сделать, выполнив следующую строку в командной строке

npm установить экспресс

Приведенная выше команда запрашивает у диспетчера пакетов Node загрузку необходимых экспресс-модулей и их установку соответственно.

Давайте воспользуемся недавно установленной платформой Express и создадим простое приложение «Hello World».

Наше приложение собирается создать простой серверный модуль, который будет прослушивать порт номер 3000. В нашем примере, если запрос сделан через браузер на этом номере порта, то серверное приложение отправит клиенту ответ «Hello, World». .

var express=require('express');var app=express();app.get('/',function(req,res){res.send('Hello World!');});var server=app.listen(3000,function() {});

Пояснение к коду:

  1. В нашей первой строке кода мы используем функцию require для включения «экспресс-модуля».
  2. Прежде чем мы сможем начать использовать экспресс-модуль, нам нужно создать из него объект.
  3. Здесь мы создаем функцию обратного вызова. Эта функция будет вызываться всякий раз, когда кто-нибудь перейдет к корню нашего веб-приложения, который находится по адресу http: // localhost: 3000 . Функция обратного вызова будет использоваться для отправки строки «Hello World» на веб-страницу.
  4. В функции обратного вызова мы отправляем клиенту строку «Hello World». Параметр res используется для отправки контента обратно на веб-страницу. Этот параметр res - это то, что предоставляется модулем request, чтобы разрешить отправку контента обратно на веб-страницу.
  5. Затем мы используем функцию listen to, чтобы наше серверное приложение слушало клиентские запросы на порт 3000. Здесь вы можете указать любой доступный порт.

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

Выход:

На выходе

  • Вы можете ясно видеть, что если мы перейдем к URL-адресу localhost на порту 3000, вы увидите строку «Hello World», отображаемую на странице.
  • Поскольку в нашем коде мы специально упомянули, что сервер должен прослушивать порт 3000, мы можем просматривать вывод при переходе по этому URL-адресу.

Что такое маршруты?

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

Например, клиент может сделать HTTP-запрос GET, POST, PUT или DELETE для различных URL-адресов, таких как показанные ниже;

http://localhost:3000/Bookshttp://localhost:3000/Students

В приведенном выше примере

  • Если запрос GET выполняется для первого URL-адреса, то в идеале ответ должен быть списком книг.
  • Если запрос GET выполняется для второго URL-адреса, то в идеале ответ должен быть списком студентов.
  • Таким образом, в зависимости от URL-адреса, к которому осуществляется доступ, на веб-сервере будут вызываться другие функции, и, соответственно, ответ будет отправлен клиенту. Это концепция маршрутизации.

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

Общий синтаксис маршрута показан ниже.

app.METHOD(PATH, HANDLER)

В которой,

1) приложение является экземпляром экспресс-модуля

2) МЕТОД - это метод HTTP-запроса (GET, POST, PUT или DELETE)

3) ПУТЬ - это путь на сервере.

4) HANDLER - это функция, выполняемая при совпадении маршрута.

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

  1. A / Node route, в котором будет отображаться строка "Tutorial on Node", если к этому маршруту будет осуществлен доступ.
  2. Маршрут A / Angular, который будет отображать строку «Учебник по Angular», если к этому маршруту будет осуществлен доступ.
  3. Маршрут по умолчанию /, который будет отображать строку «Добро пожаловать в учебники Guru99».

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

var express = require('express');var app = express();app.route('/Node').get(function(req,res){res.send("Tutorial on Node");});app.route('/Angular').get(function(req,res){res.send("Tutorial on Angular");});app.get('/',function(req,res){res.send('Welcome to Guru99 Tutorials');}));

Пояснение к коду:

  1. Здесь мы определяем маршрут, если в браузере выбран URL http: // localhost: 3000 / Node . К маршруту мы присоединяем функцию обратного вызова, которая будет вызываться при переходе по URL-адресу узла.

    Функция имеет 2 параметра.

  • Основным параметром, который мы будем использовать, является параметр res, который можно использовать для отправки информации обратно клиенту.
  • Параметр req содержит информацию о сделанном запросе. Иногда дополнительные параметры могут быть отправлены как часть выполняемого запроса, и, следовательно, параметр req может использоваться для поиска отправляемых дополнительных параметров.
  1. Мы используем функцию отправки, чтобы отправить строку «Учебник по узлу» обратно клиенту, если выбран маршрут узла.
  2. Здесь мы определяем маршрут, если в браузере выбран URL http: // localhost: 3000 / Angular . К маршруту мы присоединяем функцию обратного вызова, которая будет вызываться при переходе по URL-адресу Angular.
  3. Мы используем функцию send, чтобы отправить строку «Tutorial on Angular» обратно клиенту, если выбран маршрут Angular.
  4. Это маршрут по умолчанию, который выбирается при переходе к маршруту приложения - http: // localhost: 3000 . Если выбран маршрут по умолчанию, клиенту будет отправлено сообщение «Добро пожаловать в учебники Guru99».

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

Выход:

На выходе

  • Вы можете ясно видеть, что если мы перейдем к URL-адресу localhost на порту 3000, вы увидите строку «Добро пожаловать в учебные пособия Guru99», отображаемую на странице.
  • Потому что в нашем коде мы упомянули, что в нашем URL-адресе по умолчанию будет отображаться это сообщение.

На выходе

  • Вы можете видеть, что если URL-адрес был изменен на / Node, будет выбран соответствующий маршрут узла и отобразится строка «Учебник по узлу».

На выходе

  • Вы можете видеть, что если URL-адрес был изменен на / Angular, будет выбран соответствующий маршрут Node и отобразится строка «Tutorial On Angular».

Пример веб-сервера с использованием express.js

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

При создании приложений Node «на лету» простым и быстрым способом является использование шаблонов для приложения. На рынке доступно множество фреймворков для создания шаблонов. В нашем случае мы возьмем в качестве примера фреймворк jade для создания шаблонов.

Jade устанавливается через диспетчер пакетов узлов. Это можно сделать, выполнив следующую строку в командной строке

npm установить нефрит

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

ПРИМЕЧАНИЕ. В последней версии Node jade устарел. Вместо этого используйте мопса.

Давайте воспользуемся недавно установленным фреймворком jade и создадим несколько базовых шаблонов.

Шаг 1) Первый шаг - создание нефритового шаблона. Создайте файл с именем index.jade и вставьте приведенный ниже код. Убедитесь, что файл создается в папке "views"

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

var express=require('express');var app=express();app.set('view engine','jade');app.get('/',function(req,res){res.render('index',{title:'Guru99',message:'Welcome'})});var server=app.listen(3000,function() {});

Пояснение к коду:

  1. Первое, что нужно указать в приложении, - это «механизм просмотра», который будет использоваться для визуализации шаблонов. Поскольку мы собираемся использовать jade для рендеринга наших шаблонов, мы указываем это соответствующим образом.
  2. Функция рендеринга используется для рендеринга веб-страницы. В нашем примере мы визуализируем шаблон (index.jade), который был создан ранее.
  3. Мы передаем значения «Guru99» и «Welcome» параметрам «title» и «message» соответственно. Эти значения будут заменены параметрами title и message, объявленными в шаблоне index.jade.

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

Выход:

На выходе

  • Мы видим, что заголовок страницы устанавливается на «Guru99», а заголовок страницы устанавливается на «Добро пожаловать».
  • Это из-за шаблона jade, который вызывается в нашем приложении node js.

Резюме

  • Фреймворк Express - это наиболее распространенный фреймворк, используемый для разработки приложений Node js. Фреймворк Express построен на основе фреймворка node.js и помогает в быстрой разработке серверных приложений.
  • Маршруты используются для перенаправления пользователей в различные части веб-приложений в зависимости от сделанного запроса. Ответ для каждого маршрута может варьироваться в зависимости от того, что нужно показать пользователю.
  • Шаблоны можно использовать для эффективного внедрения контента. Jade - один из самых популярных движков шаблонов, используемых в приложениях Node.js.