Цель этой истории - кратко объяснить, как работает маршрутизация в 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 есть много полезного!
Надеюсь, эта статья была для вас полезной. Если это так, пожалуйста, оставьте комментарий и аплодируйте!
Удачного кодирования… Или удачной маршрутизации, наверное!