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

Мы также будем использовать EJS, механизм шаблонов, который, согласно их веб-сайту, позволяет создавать разметку HTML с помощью простого JavaScript. По сути, это позволит нам создавать HTML-страницы, которые могут различаться в зависимости от запроса, который делает клиент. Мы не будем использовать эту последнюю функцию, но она отличная. В конце этой статьи вы найдете несколько ресурсов, по которым можно узнать больше.

Что такое маршрутизация? (В 2-х строчках)

Прежде всего, давайте быстро (очень быстро) рассмотрим, что такое маршрутизация:

somewebsite.com/someroute

По сути, это перенос пользователя (или некоторых данных) из одного места в другое. Это место и есть маршрут. Я сказал тебе, что сделаю это быстро.

Создание проекта

Мы собираемся создать модный веб-сайт, чтобы узнать, как работает маршрутизация в Express. Проверить это:

Круто, правда? Но на данный момент это все, что нам нужно.

Сначала давайте создадим проект и установим пакеты. Просто запустите в командной строке следующее:

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

npm установить ejs

Вы можете дополнительно добавить сохранение тире (я пишу - как «тире», потому что Medium автоматически форматирует его, и для этой цели он не подходит), чтобы сохранить его. в вашем файле package.json. Но как это работает - это история для другого дня.

Затем нам потребуется Express и установим механизм просмотра на EJS в нашем файле app.js следующим образом:

var express = require('express');
var app = express();
app.set('view engine', 'ejs');

Мы также добавим следующую строку, чтобы наше приложение прислушивалось к запросам:

app.listen(3000);

Обработка запросов GET

Поздравляем, все готово для обработки запросов! В HTTP есть несколько типов запросов, но мы будем обрабатывать только запросы GET, которые используются для получения данных с сервера. Для обработки такого рода запросов в Express мы используем следующий метод:

app.get('/about', function(req, res) {
  res.render('about');
});

Давайте посмотрим, что здесь происходит. Мы сообщаем нашему серверу, что всякий раз, когда кто-то вводит somewebsite.com/about, мы хотим запустить функцию. Эта функция принимает два параметра: req (запрос) и res (ответ). Используя объект ответа, мы отображаем страницу о.

Чтобы это работало, нам нужно создать страницу с именем about.ejs в HTML. Мы также поместим его в папку с именем views внутри папки нашего проекта. Это папка, в которой Express будет выполнять рендеринг представления. Вот вам мега-комплекс о странице, которую мы будем использовать в этом примере:

Отлично! Но что, если пользователь не вводит никакой маршрут? Как и в большинстве случаев, somewebsite.com? Что ж, действительно просто. Измените / about на /, и отобразите любую страницу, которая вам нравится:

app.get('/', function(req, res) {
  res.render('home');
});

Обработка несуществующих маршрутов

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

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

app.get('*', function(req, res) {
  res.render('error');
});

Пробуем!

Наконец, давайте запустим наш сервер из командной строки (при условии, что сервер называется app.js).

приложение узла

и посмотрите, работает ли это! Введите имя нашего сервера (localhost, поскольку это локальный сервер, работающий на нашем компьютере) и порт (3000 в данном случае) в нашем браузере:

локальный: 3000

Удивительный!

дальнейшее чтение

Все, что нужно знать о маршрутизации, вы можете узнать в Экспресс-руководстве, а еще на сайте EJS есть много полезного!

Надеюсь, эта статья была для вас полезной. Если это так, пожалуйста, оставьте комментарий и аплодируйте!

Удачного кодирования… Или удачной маршрутизации, наверное!