Вступление
Express — это популярный веб-фреймворк Node.js. Помимо своей функциональности он предоставляет оболочку для маршрутизации. Экспресс-маршрутизатор помогает в создании обработчиков маршрутов. Из этого руководства вы узнаете, как работать с Express Router.
Давайте начнем.
Создайте новый каталог для вашего приложения. Запустите команду для инициализации npm в каталоге, который вы только что создали.
|
1
|
npm init -y
|
Единственная зависимость, в которой вы нуждаетесь, — это экспресс, поэтому продолжайте и установите ее.
|
1
|
npm install —save express
|
В конце ваш файл package.json должен выглядеть следующим образом.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
#package.json
{
«name»: «express-router»,
«version»: «1.0.0»,
«description»: «»,
«main»: «index.js»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«keywords»: [],
«author»: «»,
«license»: «ISC»,
«dependencies»: {
«express»: «^4.16.2»
}
}
|
Теперь создайте новый файл с именем index.js, который будет вашим входным файлом, как указано в вашем package.json .
На данный момент вам просто нужна базовая настройка, подобная этой:
|
1
2
3
4
5
6
7
8
9
|
#index.js
const express = require(‘express’)
const app = express()
app.listen(3000, () => {
console.log(`Server running at port 3000`)
})
|
Базовая маршрутизация
Начните с создания некоторых основных маршрутов, как у меня ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
#index.js
…
const router = express.Router() // 1
router.get(‘/’, (req, res) => { // 2
res.send(‘This is the homepage!’)
})
router.post(‘/contact’, (req, res) => { // 3
res.send(‘This is the contact page with a POST request’)
})
app.use(‘/’, router) // 4
…
|
- Экземпляр Express Router создан. Экземпляр установлен в переменную с именем router. Эта переменная будет использоваться всякий раз, когда вы хотите создать маршрут.
- Для маршрута GET определен новый маршрут к корню приложения. Он прикреплен к экземпляру класса Express Router.
- Для метода POST определен новый маршрут к странице контактов приложения. Он прикреплен к экземпляру класса Express Router.
- Это устанавливает некоторое промежуточное программное обеспечение, которое будет использоваться для обработки ваших маршрутов. Здесь вы сообщаете своему приложению, что хотите использовать маршрутизатор (который является экземпляром Express Router) для каждого запроса к приложению, который соответствует пути
'/'. Если вам не удалось смонтировать путь на этом промежуточном программном обеспечении, он будет выполняться для каждого запроса, сделанного приложению.
Допустим, вместо этого у вас был код ниже.
|
1
|
app.use(‘/user’, router)
|
Это будет соответствовать всем следующим параметрам: / user / profile , user / profile / edit , user / dashboard / article / view и так далее.
Методы маршрута
В приведенном выше коде вы прикрепили метод маршрута к экземпляру Express Router. Метод маршрута получен из одного из методов HTTP и прикреплен к экземпляру Express Router, как вы это сделали.
Express поддерживает следующие методы маршрутизации, которые соответствуют методам HTTP: получить , отправить , положить , направить , удалить , параметры , трассировать , скопировать , заблокировать , mkcol , переместить , очистить , разблокировать , сообщить , mkactivity , оформить заказ , объединить , m-search , уведомлять , подписываться , отписываться , исправлять и искать .
Существует метод маршрутизации app.all() который не является производным от какого-либо метода HTTP. Этот метод маршрутизации загружается для функций по указанному пути для всех методов запроса.
Скажем, у вас есть код ниже в вашем приложении.
|
1
2
3
|
app.all(‘/books’, (req, res) => {
res.send(‘This accesses the book section’)
})
|
Это будет выполнено для запросов к «/ books», когда вы используете GET, POST, PUT или любой метод HTTP-запроса.
Маршруты
Путь маршрута используется для определения конечной точки, где могут быть сделаны запросы. Это происходит с помощью комбинации метода запроса. В Express пути маршрута могут быть строковыми шаблонами или регулярными выражениями.
Вот примеры, которые вы можете добавить в свой файл index.js .
|
1
2
3
4
5
6
7
8
9
|
#index.js
router.get(‘/about’, (req, res) => {
res.send(‘This route path will match to /about’)
})
router.get(‘/profile.txt’, (req, res) => {
res.send(‘This route will match to /profile.txt’)
})
|
Давайте посмотрим путь маршрута, используя строковые шаблоны.
|
1
2
3
4
5
6
7
|
router.get(‘/ab+xy’, (req, res) => { // 1
res.send(‘ab+xy’)
})
router.get(‘/ab(xy)?z’, (req, res) => { // 2
res.send(‘/ab(xy)?z’)
})
|
- Маршрут будет соответствовать abxy , abbxy , abbbxy и так далее.
- Маршрут будет соответствовать / abz и / abxyz .
Параметры маршрута
Они используются для захвата значений, указанных в определенной позиции в URL. Они называются сегментами URL. Полученные значения становятся доступными в объекте req.params , используя имя параметра маршрута, указанного в пути, в качестве ключей значений.
Вот пример.
Если у вас есть путь к маршруту, аналогичный указанному в вашем приложении: /users/:userId/articles/: articleId /users/:userId/articles/: articleId
Запрошенный URL будет выглядеть следующим образом: http: // localhost: 3000 / users / 19 / article / 104
В req.params будет доступно следующее: { "userId": "19", "bookId": "104" }
Идите вперед и создайте новый маршрут в вашем приложении, используя путь маршрута выше.
|
1
2
3
|
router.get(‘/users/:userId/articles/:articleId’, (req, res) => {
res.send(req.params)
})
|
Запустите свой сервер и укажите в браузере адрес http: // localhost: 3000 / users / 19 / article / 104 . Вы увидите объект req.params отображаемый в вашем браузере.
Имя параметров маршрута должно состоять из буквенных символов ([A-Za-z0-9_]) .
Давайте продолжим!
Скажем, вы хотите иметь путь маршрута с именем /users/:name , где имя пользователя передается в URL, а приложение отображает имя вместе со строкой. Как вы думаете, чего можно достичь?
Идите вперед и попробуйте сначала самостоятельно.
Вот как должен выглядеть маршрут.
|
1
2
3
|
router.get(‘/users/:name’, (req, res) => {
res.send(`Welcome, ${req.params.name}!`)
})
|
Когда вы посещаете http: // localhost: 3000 / users / vivian , вы должны увидеть Welcome, vivian ! отображается в браузере.
Маршруты входа
Давайте посмотрим, как создать маршрут входа в Express. Ваши маршруты входа в систему требуют двух действий на одном пути маршрута. Действия будут дифференцированы по используемому методу маршрута. Вот как это будет выглядеть.
|
1
2
3
4
5
6
7
|
router.get(‘/login’, (req, res) => {
res.send(‘This is should lead to the login form’)
})
router.post(‘/login’, (req, res) => {
res.send(‘This is used in processing the form’)
})
|
После этого в форме вашего хранилища должно появиться действие, значением которого является маршрут, определенный методом HTTP POST. Вот как это должно выглядеть.
|
1
2
3
|
<form action=»/login» method=»POST»>
</form>
|
При нажатии кнопки отправки в форме вызывается указанный маршрутизатор. Разница между обоими путями маршрута, как указано выше, заключается в HTTP POST. Так приложение определяет, кто отвечает за обработку данных, передаваемых через форму.
Еще один аспект, в котором это может возникнуть, — это редактирование и обновление ресурсов.
app.route ()
app.route() можно использовать для создания цепочки обработчиков маршрутов для определенного пути маршрута.
На примере маршрута входа в систему вы увидите, как вы будете использовать app.route() .
|
1
2
3
4
5
6
7
8
|
app.route(‘/login’)
.get((res, req) => {
res.send(‘This is should lead to the login form’)
})
.post((res, req) => {
res.send(‘This is used in processing the form’)
})
|
Вы можете добавить больше обработчиков маршрутов, чем мы указали выше.
Вывод
На этом этапе вы должны знать, как работает маршрутизация в Express. Вы узнали, как настроить базовую маршрутизацию, а также как работать с методами маршрутов и путями. Вы видели, как использовать параметры маршрута и получать значения, отправленные через URL.
Если вы ищете дополнительные ресурсы JavaScript для изучения или использования в своей работе, посмотрите, что у нас есть на Envato Market .
Обладая этими знаниями, вы можете пойти дальше, чтобы создать приложение Express со сложной маршрутизацией.