Время выпить чашечку чая, начать разработку фреймворка Express

Node.js
Время выпить чашечку чая, начать разработку фреймворка Express

Node.js стал силой, которую нельзя игнорировать в кругу фоновой веб-разработки.Благодаря хорошей асинхронной производительности, богатой библиотеке npm и преимуществам языка JavaScript он стал одной из важных технологий для многих крупных компаний при разработке фоновой архитектуры. Фреймворк Express — один из самых известных и популярных фреймворков для серверной разработки. В этом руководстве вы узнаете, как Express инкапсулирует встроенный в Node модуль http, освоите две ключевые концепции маршрутизации и промежуточного программного обеспечения, изучите и используете механизмы шаблонов, статическое обслуживание файлов, обработку ошибок и JSON API и, наконец, разработаете простой персональный возобновить веб-сайт.

Этот учебник принадлежитNode.js Backend Engineer Manager ManagerЧасть, добро пожаловать в звездную волну, поощряйте нас продолжать создавать лучшие учебные пособия и продолжать обновлять~.

Старые времена: Реализация сервера со встроенным модулем http

С тех пор, как Райан Даль официально запустил платформу Node.js на JSConf в 2009 году, использование этой технологии резко возросло, и она стала одной из самых популярных платформ для серверной разработки, а Express — одной из самых популярных. Ослепительный веб-фреймворк. Прежде чем мы начнем это руководство, мы перечислим предварительные условия, методы и цели обучения, необходимые для этого руководства.

Предварительные знания

В этом руководстве предполагается, что вы уже знаете:

  • Основы языка JavaScript (включая часто используемый синтаксис ES6+)
  • Базовые знания о Node.js, особенно об асинхронном программировании (в этом руководстве в основном используются функции обратного вызова) и механизме модулей Node, а также об основах использования npm, вы можете найти здесь.этот учебникучиться
  • Базовые знания протокола HTTP, взаимодействия браузера и сервера

Используемая технология

  • Node.js: 8.х и выше
  • npm: 6.х и выше
  • Express.js: 4.х

цель обучения

Прочитав этот урок, вы узнаете

  • Две основные концепции среды Express: маршрутизация и промежуточное ПО.
  • Ускорьте итерации разработки с помощью Nodemon
  • Визуализируйте страницу с помощью шаблонизатора и подключите ее к фреймворку Express.
  • Обслуживание статических файлов с Express
  • Напишите собственные функции обработки ошибок
  • Реализовать простой порт JSON API
  • Разделите логику на подмаршруты для достижения модульности

Уведомление

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

Создайте сервер со встроенным модулем http

Прежде чем объяснять Express, давайте сначала поймем, как использовать встроенный http-модуль Node.js для реализации сервера, чтобы мы могли лучше понять, что абстракция и инкапсуляция Express делает с базовым кодом Node. Если у вас не установлен Node.js, вы можете перейти кОфициальный сайтЗагрузить и установить.

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

mkdir express_resume && cd express_resume

Создайте файл server.js со следующим кодом:

const http = require('http');

const hostname = 'localhost';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end('Hello World\n');
});

server.listen(port, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Если вы знакомы с Node.js, смысл кода выше ясен:

  1. импортировать http-модуль
  2. Указывает имя хоста сервераhostnameи номер портаport
  3. использоватьhttp.createServerСоздайте HTTP-сервер, параметр является функцией обратного вызова, примите объект запросаreqи объект ответаres, и запишите содержимое ответа в функцию обратного вызова (код состояния 200, тип — HTML-документ, содержимое —Hello World)
  4. Включите сервер на указанном порту

Наконец, запустите server.js:

node server.js

открыть в браузереlocalhost:3000, вы можете увидеть подсказку Hello World:

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

  • Нужно написать много низкоуровневого кода- Например, вручную указать код состояния HTTP и поля заголовка и, наконец, вернуть содержимое. Если нам нужно разработать более сложные функции, включающие различные коды состояния и информацию заголовка (например, аутентификацию пользователя), этот режим ручного управления очень неудобен.
  • Нет специального механизма маршрутизации——Маршрутизация — одна из важнейших функций сервера.Только с помощью маршрутизации соответствующий контент может быть возвращен в соответствии с различными URL-адресами запроса и методами HTTP клиента. Но приведенный выше код можно использовать только вhttp.createServerВ функции обратного вызова запроса оценкиreqТолько контент может реализовать функцию маршрутизации, а создавать крупномасштабные приложения сложно.

Это приводит к двум основным инкапсуляциям и улучшениям Express для встроенного http:

  • Добавлены более мощные объекты Request и Response с множеством служебных методов.
  • Гибкое и удобное определение маршрутизации и анализ, который может легко разделить код

Далее приступим к разработке веб-сервера с помощью Express!

Новая эра: создание серверов с помощью Express

На первом этапе мы помещаем сервер в JS-файл, который является модулем Node. С этого момента мы превратим этот проект в проект npm. Введите следующую команду, чтобы создать проект npm:

npm init

Затем вы можете пройти весь путь ввода (конечно, вы также можете заполнить внимательно), и вы обнаружите, что файл package.json был создан. Затем добавьте зависимости проекта Express:

npm install express

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

Более мощные объекты запроса и ответа

Первый — это объект запроса Request, обычно мы привыкли кreqпеременная для представления. Ниже перечислены некоторыеreqНаиболее важные участники в списке (если вы не знаете, что это такое, это не имеет значения):

  • req.body: данные тела запроса клиента, которые могут быть формой или данными JSON.
  • req.params: параметры пути в URI запроса.
  • req.query: параметры запроса в URI запроса
  • req.cookies: файлы cookie на стороне клиента

Затем есть объект ответа Response, обычно сresпеременная для представления ряда ответных действий, таких как:

// 发送一串 HTML 代码
res.send('HTML String');

// 发送一个文件
res.sendFile('file.zip');

// 渲染一个模板引擎并发送
res.render('index');

Операции с объектом Response очень разнообразны и могут быть объединены в цепочку:

// 设置状态码为 404，并返回 Page Not Found 字符串
res.status(404).send('Page Not Found');

намекать

Здесь мы не просто перечисляем Запрос и ОтветВсе API,так какСообщество ТукеИдея в том, чтобы учиться и углублять понимание из реального боя, отказаться от скучной памяти API!

механизм маршрутизации

Когда клиент (в том числе веб-интерфейс, мобильный и т. д.) делает запрос к серверу, он включает два элемента:дорожка(URI) иМетод HTTP-запроса(включая GET, POST и т. д.). Путь и метод запроса вместе обычно называются конечной точкой API (конечная точка). Механизм, при котором сервер выбирает соответствующую логику обработки в соответствии с конечной точкой, к которой обращается клиент, называется маршрутизацией.

В Express определение маршрута выглядит просто так:

app.METHOD(PATH, HANDLER)

в:

  • appтолько одинexpressсерверный объект
  • METHODможет быть любымнижний регистрМетоды HTTP-запроса, в том числеget,post,put,deleteи т.д
  • PATHэто URI, к которому обращается клиент, например./или/about
  • HANDLERЭто функция обратного вызова при запуске маршрута, в которой может выполняться соответствующая бизнес-логика.

nodemon ускоряет разработку

Nodemon— популярный сервер разработки, который обнаруживает изменения в коде рабочей области и автоматически перезапускается. Установите nodemon с помощью следующей команды:

npm install nodemon --save-dev

Здесь мы устанавливаем nodemon как зависимость разработкиdevDependencies, потому что это необходимо только во время разработки. Заодно добавляем в package.jsonstartкоманда, код выглядит следующим образом:

{
  "name": "express_resume",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.2"
  }
}

Формальная реализация

Когда пришло время начать, мы используем Express, чтобы переписать вышеуказанный сервер, код выглядит следующим образом:

const express = require('express');

const hostname = 'localhost';
const port = 3000;

const app = express();
app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(port, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

В приведенном выше коде мы сначала используемexpress()Функция создает объект сервера Express, а затем определяет метод с указанными выше маршрутами.app.getдомашняя страница определена/Маршрут, и, наконец, тот самый звонокlistenметод запуска сервера.

С этого шага мы запускаемnpm startКомандой можно запустить сервер, а также посмотреть содержимое Hello World, но код гораздо проще и понятнее.

намекать

Бегnpm startПосле этого вы можете оставить сервер открытым, отредактировать код и сохранить его, Nodemon автоматически перезапустит сервер и запустит последний код.

Напишите свое первое промежуточное ПО

Далее мы начинаем объяснять вторую важную концепцию Express:промежуточное ПО(промежуточное ПО).

понять промежуточное ПО

Промежуточное ПО — это не уникальная концепция Express. Скорее, это широко используемая концепция разработки программного обеспечения (которая даже распространилась на другие отрасли), которая относится кКомпоненты, которые отделяют конкретную бизнес-логику от базовой логики(видеть этообсуждать). Другими словами, промежуточное ПО — это код, который можно применять к нескольким сценариям приложений и который хорошо подходит для повторного использования.

Упрощенный промежуточный процесс Express показан на следующем рисунке:

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

намекать

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

Есть два момента, на которые стоит обратить особое внимание:

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

Определение промежуточного ПО Express

В Express промежуточное ПО — это функция:

function someMiddleware(req, res, next) {
  // 自定义逻辑
  next();
}

Среди трех параметровreqиresЭто ранее упомянутые объект запроса запроса и объект ответа ответа; иnextФункция используется для запуска выполнения следующего промежуточного программного обеспечения.

Уведомление

Если вы забыли вызвать промежуточное ПОnextфункция и не возвращает ответ напрямую, сервер напрямую застрянет в этом промежуточном программном обеспечении и больше не будет выполняться!

Существует два способа использования промежуточного программного обеспечения в Express:глобальное промежуточное ПОипромежуточное ПО маршрутизации.

глобальное промежуточное ПО

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

app.use(someMiddleware);

промежуточное ПО маршрутизации

При регистрации промежуточного программного обеспечения при определении маршрута это промежуточное программное обеспечение будет выполняться только тогда, когда пользователь получает доступ к URI, соответствующему маршруту, например:

app.get('/middleware', someMiddleware, (req, res) => {
  res.send('Hello World');
});

тогда пользователь имеет доступ только к/middlewareкогда, определеноsomeMiddlewareПромежуточное ПО будет запущено и не будет запускаться при доступе к другим путям.

написать промежуточное ПО

Далее мы приступаем к реализации первого промежуточного программного обеспечения Express. Функция очень проста, то есть для печати времени доступа клиента, метода HTTP-запроса и URI на терминале с именемloggingMiddleware. код показывает, как показано ниже:

// ...

const app = express();

function loggingMiddleware(req, res, next) {
  const time = new Date();
  console.log(`[${time.toLocaleString()}] ${req.method} ${req.url}`);
  next();
}

app.use(loggingMiddleware);

app.get('/', (req, res) => {
  res.send('Hello World');
});

// ...

Уведомление

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

Запустите сервер и попробуйте получить доступ к различным путям с помощью браузера. Здесь я захожу на главную страницу (localhost:3000)и/hello(localhost:3000/hello, браузер должен увидеть ошибку 404), вы можете увидеть соответствующий вывод консоли:

[11/28/2019, 3:54:05 PM] GET /
[11/28/2019, 3:54:11 PM] GET /hello

Здесь, чтобы дать вам предварительное представление о концепции промежуточного программного обеспечения, мы реализуем только промежуточное программное обеспечение с очень простой функцией. На самом деле промежуточное ПО может не только читатьreqКаждый атрибут объекта также может добавлять новые атрибуты или изменять существующие атрибуты (функции промежуточного программного обеспечения и маршрутизации можно получить позже), что может легко реализовать некоторую сложную бизнес-логику (например, аутентификацию пользователя).

Рендеринг страницы с помощью шаблонизатора

Наконец-то наш сайт вот-вот начнет показывать актуальный контент. Express обеспечивает хорошую поддержку современных основных механизмов шаблонов (таких как Pug, Handlebars, EJS и т. д.) и доступен в двух строках кода.

намекать

Если вы не знакомы с механизмом шаблонов, не волнуйтесь, в этом руководстве вряд ли нужно использовать его расширенные функции, вам просто нужно понимать его как «обновленный HTML-документ».

Этот учебник будет использоватьHandlebarsв качестве шаблонизатора. Сначала добавьте пакет npm:

npm install hbs

Создайте папку представлений, куда будут помещены все шаблоны. Затем создайте в нем шаблон домашней страницы index.hbs, код такой:

<h1>个人简历</h1>
<p>我是一只小小的图雀，渴望学习技术，磨炼实战本领。</p>
<a href="/contact">联系方式</a>

Создайте шаблон страницы контактов contact.hbs со следующим кодом:

<h1>联系方式</h1>
<p>QQ：1234567</p>
<p>微信：一只图雀</p>
<p>邮箱：mrc@tuture.co</p>

Последний шаг — настроить и использовать шаблон в server.js. Код для настройки шаблона очень прост:

// 指定模板存放目录
app.set('views', '/path/to/templates');

// 指定模板引擎为 Handlebars
app.set('view engine', 'hbs');

При использовании шаблонов просто вызовите функцию маршрутаres.renderМетод может быть:

// 渲染名称为 hello.hbs 的模板
res.render('hello');

Модифицированный код server.js выглядит следующим образом:

// ...

const app = express();

app.set('views', 'views');
app.set('view engine', 'hbs');

// 定义和使用 loggingMiddleware 中间件 ...

app.get('/', (req, res) => {
  res.render('index');
});

app.get('/contact', (req, res) => {
  res.render('contact');
})

// ...

Обратите внимание, что в приведенном выше коде мы добавилиGET /contactопределение маршрута.

Наконец, мы снова запускаем сервер, заходим на нашу домашнюю страницу и видим:

Нажмите «Контакты», чтобы перейти на соответствующую страницу:

Добавить статический файлообменник

Обычно веб-сайты должны предоставлять статические файловые службы, такие как изображения, файлы CSS, файлы JS и т. д., а Express уже поставляется с промежуточным программным обеспечением для статических файловых служб.express.static, это очень удобно в использовании.

Например, мы добавляем ПО промежуточного слоя статического файла следующим образом и указываем корневой каталог статического ресурса какpublic:

// ...

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.render('index');
});

// ...

Предположим, что в общедоступном каталоге проекта есть следующие статические файлы:

public
├── css
│   └── style.css
└── img
    └── tuture-logo.png

Доступ к нему можно получить по следующим путям:

http://localhost:3000/css/style.css
http://localhost:3000/img/tuture-logo.png

Код файла стиля public/css/style.css выглядит следующим образом (просто скопируйте и вставьте):

body {
  text-align: center;
}

h1 {
  color: blue;
}

img {
  border: 1px dashed grey;
}

a {
  color: blueviolet;
}

Файлы изображений доступны через этот GitHubСсылка на сайтЗагрузите, затем загрузите в каталог public/img. Конечно, вы также можете использовать свое собственное изображение, только не забудьте заменить соответствующую ссылку в шаблоне.

Добавьте таблицы стилей CSS и изображения в шаблон главной страницы views/index.hbs:

<link rel="stylesheet" href="/css/style.css" />

<h1>个人简历</h1>
<img src="/img/tuture-logo.png" alt="Logo" />
<p>我是一只小小的图雀，渴望学习技术，磨炼实战本领。</p>
<a href="/contact">联系方式</a>

Добавьте таблицу стилей в шаблон контакта views/contact.hbs:

<link rel="stylesheet" href="/css/style.css" />

<h1>联系方式</h1>
<p>QQ：1234567</p>
<p>微信：一只图雀</p>
<p>邮箱：mrc@tuture.co</p>

Запустите сервер снова и посетите наш сайт. Домашняя страница выглядит следующим образом:

Страница контактов выглядит следующим образом:

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

Обработка 404 и ошибок сервера

У людей бывают взлеты и падения, луна пасмурная и солнечная, а на сервере бывают ошибки. Ошибки HTTP обычно делятся на две категории:

  • Ошибки на стороне клиента (код состояния 4xx), такие как доступ к несуществующей странице (404), недостаточные разрешения (403) и т. д.
  • Ошибки на стороне сервера (код состояния 5xx), такие как внутренняя ошибка сервера (500) или неверный шлюз (503) и т. д.

Если вы открываете сервер и получаете доступ к несуществующему пути, например.localhost:3000/what, появится такая страница:

Очевидно, что такой пользовательский опыт очень плох.

В этом разделе мы объясним, как обрабатывать ошибки 404 (страница не существует) и 500 (внутренняя ошибка сервера) в среде Express. Перед этим нам необходимо улучшить процесс работы промежуточного ПО Express, как показано на следующем рисунке:

Между этой диаграммой и предыдущей диаграммой есть два важных отличия:

  • Каждое определение маршрута по существу являетсяпромежуточное ПО(точнее апромежуточный контейнер, который может содержать несколько промежуточных программ), напрямую возвращать ответ при успешном совпадении URI и продолжать выполнение следующего маршрута при неудачном совпадении.
  • Каждое промежуточное ПО (включая маршруты) может не только вызыватьnextФункция передается вниз, возвращает ответ напрямую, а также можетВыбросить исключение

На этой картинке хорошо видно, как обрабатывать 404 и ошибки сервера:

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

Обработка 404

В Express доступ к несуществующим путям можно обрабатывать через промежуточное ПО:

app.use('*', (req, res) => {
  // ...
});

*означает соответствие любому пути. Поместите это промежуточное ПО позади всех маршрутов, чтобы перехватывать все неудачные запросы с соответствующими путями доступа.

Обработка внутренних ошибок

У Express уже есть собственный механизм обработки ошибок, давайте сначала попробуем его. Добавьте следующий «сломанный» маршрут к server.js (имитирующий реальную ошибку):

app.get('/broken', (req, res) => {
  throw new Error('Broken!');
});

Затем запустите сервер и получите доступlocalhost:3000/broken:

Опасность!

Сервер напрямую вернул неправильный стек вызовов! Очевидно, что возврат такого стека вызовов пользователю — это не только плохой опыт, но и сильно увеличивает риск атаки.

На самом деле механизм обработки ошибок Express по умолчанию можно установить, установивNODE_ENVпереключить. Настраиваем его как производственную средуproduction, а затем перезапустите сервер. Если вы находитесь в среде Git Bash под Linux, macOS или Windows, вы можете запустить следующую команду:

NODE_ENV=production node server.js

Если вы находитесь в командной строке Windows, выполните следующие команды:

set NODE_ENV=production
node server.js

посетить в это времяlocalhost:3000/brokenОн вернет внутреннюю ошибку сервера напрямую, и сообщение об ошибке отображаться не будет:

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

function (err, req, res, next) {
  // 处理错误逻辑
}

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

Реализовать пользовательскую логику обработки

Благодаря приведенному выше объяснению очень просто реализовать собственную логику 404 и обработки ошибок. Добавьте следующий код после всех маршрутов в server.js:

// 中间件和其他路由 ...

app.use('*', (req, res) => {
  res.status(404).render('404', { url: req.originalUrl });
});

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).render('500');
});

app.listen(port, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

намекать

При написании логики для обработки 404 мы использовали функцию интерполяции переменных в механизме шаблонов. В частности, вres.renderВ качестве второго параметра метод принимает данные, которые необходимо передать в шаблон (например, здесь{ url: req.originalUrl }Путь, к которому обращается пользователь, передается), который можно передать в шаблоне.{{ url }}Получить данные.

Коды шаблонов для 404 и 500 следующие:

<link rel="stylesheet" href="/css/style.css" />

<h1>找不到你要的页面了！</h1>
<p>你所访问的路径 {{ url }} 不存在</p>

<link rel="stylesheet" href="/css/style.css" />

<h1>服务器好像开小差了</h1>
<p>过一会儿再试试看吧！See your later~</p>

Снова запустите сервер, используя несуществующий путь:

доступlocalhost:3000/broken:

Опыт очень хороший!

Три строки кода для реализации JSON API

В конце этого руководства мы реализуем очень простой JSON API. Если у вас есть опыт разработки других серверных API (особенно Java), вам будет невероятно легко реализовать порт JSON API с помощью Express. В упомянутом ранее объекте Response Express инкапсулируетjsonметод, вы можете напрямую вернуть объект JavaScript как данные JSON, например:

res.json({ name: '百万年薪', price: 996 });

вернет данные JSON{ "name": "百万年薪", "price": 996 }, код состояния по умолчанию — 200. Мы также можем указать коды состояния, например:

res.status(502).json({ error: '公司关门了' });

вернет данные JSON{ "error": "公司关门了"}, код состояния 502.

Для практической части давайте добавим простой порт JSON API в server.js./api, который возвращает некоторые данные о сообществе Tuque:

// ...

app.get('/api', (req, res) => {
  res.json({ name: '图雀社区', website: 'https://tuture.co' });
});

app.get('/broken', (req, res) => {
  throw new Error('Broken!');
});

// ...

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

или вы можете использоватьPostmanилиCurlДоступ, вы также можете увидеть данные, которые вы хотите.

Разделить логику с помощью подмаршрутов

Помещать весь код в server.js — не лучшая идея, когда наш сайт становится все больше и больше. «Раздельная логика» (или «модульность») является наиболее распространенной практикой, и в Express мы можем передавать подмаршруты.Routerреализовать.

const express = require('express');
const router = express.Router();

express.RouterМожно понимать как мини-версиюappобъект, но он полностью функционален, а также поддерживает регистрацию промежуточного программного обеспечения и маршрутов:

// 注册一个中间件
router.use(someMiddleware);

// 添加路由
router.get('/hello', helloHandler);
router.post('/world', worldHandler);

Наконец, благодаря идее «все является промежуточным ПО» в Express,RouterТакже добавлено в качестве промежуточного ПО вappсередина:

app.use('/say', router);

такrouterВсе указанные ниже маршруты будут добавлены в/sayниже, что эквивалентно:

app.get('/say/hello', helloHandler);
app.post('/say/world', worldHandler);

Формальная реализация

Когда дело доходит до практической части, сначала создайте каталог маршрутов для хранения всех подмаршрутов. Создайте файл route/index.js со следующим кодом:

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.render('index');
});

router.get('/contact', (req, res) => {
  res.render('contact');
});

module.exports = router;

Создайте route/api.js со следующим кодом:

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.json({ name: '图雀社区', website: 'https://tuture.co' });
});

router.post('/new', (req, res) => {
  res.status(201).json({ msg: '新的篇章，即将开始' });
});

module.exports = router;

Наконец, мы удаляем все старые определения маршрутизации в server.js и заменяем их двумя только что реализованнымиRouter, код показан ниже:

const express = require('express');
const path = require('path');

const indexRouter = require('./routes/index');
const apiRouter = require('./routes/api');

const hostname = 'localhost';
const port = 3000;

const app = express();

// ...
app.use(express.static('public'));

app.use('/', indexRouter);
app.use('/api', apiRouter);

app.use('*', (req, res) => {
  res.status(404).render('404', { url: req.originalUrl });
});

// ...

Разве это не намного освежает в одно мгновение? Если ваш сервер все еще открыт, вы можете проверить, успешно ли работает предыдущая маршрутизация. Здесь я публикую тест с Curl/apiРезультат маршрута:

$ curl localhost:3000/api
{"name":"图雀社区","website":"https://tuture.co"}
$ curl -X POST localhost:3000/api/new
{"msg":"新的篇章，即将开始"}

На этом урок окончен. Готовый веб-сайт действительно прост, но, надеюсь, вы сможете извлечь из него два лучших преимущества Express: маршрутизацию и промежуточное ПО. После освоения этих двух концепцийРасширенный учебникУчиться станет намного легче!

Хотите узнать больше интересных практических технических руководств? ПриходитьСообщество ТукеМагазин вокруг.

Категории