Мощный поддельный REST-сервер для начинающих

Современное веб-приложение в большинстве случаев имеет независимые интерфейсные и серверные приложения. В результате разработчики интерфейса ничего не знают о стеке бэкенда, а разработчики бэкэнда ничего не знают о стеке внешнего интерфейса. Связующим звеном между ними являются контракты API, наиболее распространенным контрактом API является REST API.

Бэкэнд-разработчики могут использовать почтальона для тестирования серверного приложения без внешнего приложения. Но что могут сделать фронтенд-разработчики без бэкенд-приложений? Ответ прост: разработчикам внешнего интерфейса нужен поддельный REST-сервер.

Второй вариант использования поддельного REST-сервера — отличное решение — это когда вы разрабатываете свой любимый проект внешнего интерфейса и не знаете, как или не хотите разрабатывать свой собственный бэкэнд.

В этой статье я покажу вам, как настроить REST-сервер для обоих описанных вариантов использования.

Мне нравится пакет json-server для создания поддельного REST API. Он очень прост в использовании и может быть расширен различными способами для решения сложных задач. Вот ссылка на страницу npm https://www.npmjs.com/package/json-server

Давайте установим json-server в существующий проект или даже в пустой каталог.

npm install json-server --save-dev

Теперь серверу нужен источник базы данных, создайте файл db.json в корне проекта.

{
  "products": [
    {
      "name": "honey - 1L",
      "price": 15
    },
    {
      "name": "sugar - 1KG",
      "price": 3
    }
  ],
  "profile": {
    "name": "Maksym",
    "surname": "Hrom"
  }
}

Чтобы запустить REST-сервер, просто выполните эту команду:

json-server db.json
  Resources
  http://localhost:3000/products
  http://localhost:3000/profile

  Home
  http://localhost:3000

Давайте обсудим, что произошло. Поскольку db.json содержит узлы продуктов и профилей, сервер json генерирует два ресурса, по одному для каждого.

Вы могли заметить, что products — это массив, а profile — это объект. В реальном приложении у нас может быть API с коллекциями или с одним объектом. Мой профиль — это объект, содержащий только данные моего профиля, но в то же время на сайте может быть много товаров, поэтому он должен быть массивом или списком.

Давайте изменим расположение файла db.json. Если ваш поддельный сервер REST не простой, вы можете добавить больше файлов для его расширения, поэтому было бы хорошо поместить все, что связано с json-server, в определенный каталог. Давайте создадим каталог server и переместим туда db.json.

Теперь команда запуска изменена:

json-server server/db.json

Я полагаю, что вы не хотите запоминать эту команду, поэтому давайте создадим псевдоним. Откройте package.json и добавьте новый скрипт

{
  ...
  "scripts": {
    ...
    "mock:server": "json-server server/db.json"
  },
  "devDependencies": {
    ...
    "json-server": "^0.17.3"
  }
}

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

npm run mock:server

Давайте обсудим, как мы можем взаимодействовать с сервером REST.

Конечные точки REST для профиля:

• GET /profile/ модель обратного профиля
• POST /profile/ создать или переопределить модель профиля
• PUT /profile/ переопределить модель профиля или 404 код
• PATCH /profile/ частично обновить модель профиля или 404 код

Конечные точки REST для продуктов:

• GET /products/возвращает список моделей
• GET /products/5 возвращает модель с кодом "id”: 5 или 404
• POST /products/добавьте новую модель в список, идентификатор будет сгенерирован автоматически
• PUT /products/5замените всю модель кодом "id”: 5 или 404
• PATCH /products/5 частично обновить модель с кодом "id”: 5 или 404
• DELETE /products/5 удалить модель с кодом "id”: 5 или 404

Альтернативный серверный порт

По умолчанию сервер запускается с порта 3000, реакция также запускается с порта 3000. Возможно, вам потребуется изменить порт на другое значение. Обновим команду в package.json:

"mock:server": "json-server server/db.json --port 3004"

Авторизация с использованием json-сервера

Трудно представить приложение без авторизации, если поддельный сервер не поддерживает эту функцию, вы не можете гарантировать, что протестируете все перед развертыванием на UAT или производственном сервере. К счастью, json-server позволяет описать логику авторизации на чистом JavaScript.

Обновим стартовую команду

"mock:server": "json-server server/db.json --port 3004 --middlewares server/auth.js"

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

function isAuthorized(req) {
    return Math.random() > 0.5; // just for example
}
module.exports = (req, res, next) => {
    if (isAuthorized(req)) { // add your authorization logic here
        next() // continue to JSON Server router
    } else {
        res.sendStatus(401)
    }
}

ПОЛУЧИТЬ список маршрутов

json-server поддерживает сортировку, разбиение на страницы, фильтрацию и многое другое для запроса списка моделей. Давайте рассмотрим некоторые из них.

Сортировка

Добавьте параметры получения _sort и _order для описания сортировки во время запроса GET. Сортируем товары по названию от а до я

http://localhost:3004/products?_sort=name&_order=asc

Или отсортируем товары по цене от большей к меньшей

http://localhost:3004/products?_sort=price&_order=desc

Более того, мы можем комбинировать сортировку, если нам нужно сортировать по двум полям.

http://localhost:3004/products?_sort=price,name&_order=desc,asc

Пагинация

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

Чтобы описать размер страницы, количество моделей на странице, просто добавьте параметр _limitquery, а чтобы описать текущую страницу, просто добавьте параметр запроса _page:

http://localhost:3004/products?_page=1&_limit=1

Поскольку в моем примере всего 2 элемента, я хочу видеть 1 элемент на странице и проверять страницу 1.

Ответ имеет заголовок Link, где вы можете найти ссылки next, prev, last, first. Но в моем случае я на первой странице, поэтому ссылки prev нет:

Link: <http://localhost:3004/products?_page=1&_limit=1>; rel="first", <http://localhost:3004/products?_page=2&_limit=1>; rel="next", <http://localhost:3004/products?_page=2&_limit=1>; rel="last"

Краткое содержание

Мне нравится использовать json-server для моих образовательных проектов. Для коммерческого проекта важно иметь поддельный сервер, чтобы быть независимым на этапе разработки, просто определите контракт и работайте независимо.json-server это хорошее решение даже для коммерческой разработки.

Определенно моя статья не охватывает все функции, для получения дополнительной информации и полной документации перейдите по ссылке

Это моя первая статья на медиуме, посмотрим, как далеко я зайду. Увидимся позже.