Действительно, очень базовая маршрутизация в Node.js с Express

dejstvitelno ochen bazovaya marshrutizacziya v nodejs s

от Pau Pavón

SfriJbmT0E8D911i5I1TghyT-jG05ZmkkbdX
Фотография Clément H на Unsplash

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

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

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

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

somewebsite.com/someroute

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

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

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

zKy5qHElo1OJCfcnBBlTS0rU2RqIvIaPPHRc

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

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

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, мы хотим запустить функцию. Эта функция принимает два параметра, требование (запрос) и рез (ответ). Используя объект ответа, мы визуализируем о странице.

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

xHlH6J5GdxC1m8GhzCNtf5WRI71Lv-QEUYgt

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

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

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

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

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

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

Попытайтесь!

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

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

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

локальный хост: 3000

1KFP8uvz25ry2d2pNQ2QsSdQnacvlqM3E2ex
localhost:3000 или localhost:3000/
eDCDZV5wyUWUoLFsLQQnZU5hHa9P8rgxDirO
localhost:3000/об
hkwkh0YVUHuY-0LWm6zUmlMXUXYrr2P6hSZj
localhost:3000/anythingthatwehaventsetaroutefor

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

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

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

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

Счастливого кодирования… Или счастливый маршрут, я думаю!

Добавить комментарий

Ваш адрес email не будет опубликован.