Создание фейкового REST API с помощью json-server-а

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

Что такое REST?

REST — это сокращение от англ. Representational State Transfer (передача состояния представления). Это архитектурный стиль взаимодействия компонентов распределённых приложений. Он предназначен для взаимодействия множества устройств путём выполнения простых HTTP запросов. В результате этого пользовательские данные актуализируются не за счёт простого обращения к URL, а за счёт отправки разных видов HTTP запросов, таких как: GET, POST, DELETE и т.д. для достижения определённых целей.

К примеру, вместо GET обращения к URL вида /deleteuser?id=10, запрос будет выглядеть так: DELETE /user/10.

Зачем нам нужен фейковый REST API?

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

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

Начало работы

Чтобы начать работу с json-server вам потребуется его установить через Менеджер пакетов Node (npm).

npm install -g json-server

Создайте JSON файл в котором приведите пример требуемого формата возвращаемых данных. К примеру, мне потребуется JSON данные о пользователе: идентификатор, имя, расположение и т.д.. Я создам файл info.json со следующим JSON кодом:

{
    "users": [{
        "id": 1,
        "name": "roy",
        "location": "india"
    }, {
        "id": 2,
        "name": "sam",
        "location": "wales"
    }]
}

Запускаем сервер через командную строку, указывая файл info.json в качестве источника данных REST API, доступных по адресу http://localhost:3000.

json-server info.json

Тестирование точек входа REST API

Теперь когда фейковый REST API сервер запущен давайте посмотрим как осуществить запрос, используя HTTP клиент. Для создания запросов к API я воспользуюсь инструментом Postman.

Запросы типа GET

Давайте начнём с создания GET запроса к REST URL. В созданном нами JSON файле мы определили точку входа под названием users, в которой соответственно хранится информация о пользователях. В результате выполнения GET запроса к URL http://localhost:3000/users мы должны получить список существующих данных.

[
  {
    "id": 1,
    "name": "roy",
    "location": "india"
  },
  {
    "id": 2,
    "name": "sam",
    "location": "wales"
  }
]

Запросы типа POST

Для того чтобы добавить новые данные к уже существующим необходимо совершить POST запрос к URL http://localhost:3000/users. POST запрос должен выглядеть следующим образом:

После повторного выполнения GET запроса вы должны увидеть новые данные, которые были добавлены в файл info.json.

[
  {
    "id": 1,
    "name": "roy",
    "location": "india"
  },
  {
    "id": 2,
    "name": "sam",
    "location": "wales"
  },
  {
    "name": "ii",
    "location": "la",
    "id": 7
  },
  {
    "name": "Shona",
    "location": "LA",
    "id": 8
  },
  {
    "name": "Shona",
    "location": "LA",
    "id": 9
  }
]

Запросы типа DELETE

Для удаления данных из json-server, вам необходимо отправить DELETE запрос к соответствующей точке входа и передать идентификатор пользователя. К примеру, чтобы удалить пользователя с Id 1, вам необходимо отправить DELETE запрос по адресу http://localhost:3000/users/1. Чтобы убедиться что пользователь был удалён выполните GET запрос.

Запрос типа PATCH

Для того чтобы обновить уже существующую запись необходимо отправить PATCH запрос с указанием новых значений для уже существующей записи. К примеру, чтобы обновить пользователя с Id 2, отправьте PATCH запрос по адресу http://localhost:3000/users/2:

Организация поиска в json-server REST API

json-server REST API позволяет вам осуществить поиск данных, по определённым критериям. К примеру, чтобы найти всех пользователей по имени необходимо отправить GET запрос к REST API URL как это показано ниже:

Согласно изображению представленном выше, отправка GET запроса к URL http://localhost:3000/users?name=Shona вернёт всех пользователей с именем Shona. Чтобы искать и по другим критериям необходимо добавить новые поля в строку запроса.

Для того чтобы осуществить полнотекстовый поиск по точке входа REST API, можете воспользоваться параметром q. К примеру, чтобы найти всех пользователей в информации о которых присутствует строка s, необходимо выполнить следующий запрос:

Работа с постраничным разбиением результатов

В случае работы с большим объёмом данных вам придётся столкнуться с информацией, распределённой по множеству страниц. json-server справится и с этой задачей, разбив JSON данные на множество частей. По умолчанию на одной странице выводится порядка десяти записей. Данное значение можно подправить, используя параметр _limit.

http://localhost:3000/users?_limit=5

В результате выполнения GET запроса будет возвращено пять записей. Для того чтобы передвигать по страницам воспользуемся параметром _page. В _page необходимо указать номер страницы данные которой необходимо извлечь.

http://localhost:3000/users?_limit=5&_page=2

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

Сортировка результата

Также json-server позволяет осуществить сортировку результата. Для этого необходимо указать нужное поле и направление. По умолчанию данные сортируются в возрастающем порядке. Название сортируемой колонки необходимо указать в параметре _sort, а направление задать через ключевое слово _order. Пример подобного URL:

http://localhost:3000/users?_sort=id&_order=DESC

В этом примере сортировка будет осуществлена по колонке Id, в обратном порядке.

Работа с операторами

Вдобавок ко всему выше сказанному, json-server поддерживает работу с операторами, с помощью которых можно осуществить поиск по Id в определённом диапазоне или по регулярному выражению.

Для поиска записей в определённом диапазоне значений необходимо воспользоваться параметрами _gte и _lte. К примеру, чтобы найти пользователей чьи идентификаторы равны от 1 до 2, необходимо совершить GET запрос по URL http://localhost:3000/users?id_gte=1&id_lte=2:

Для поиска имён, начинающихся с определённой буквы необходимо воспользоваться регулярным выражением. К примеру, чтобы найти пользователей чьи имена содержат последовательность букв sa, воспользуемся оператором _like, который припишем к URL и отправим через GET запрос http://localhost:3000/users?name_like=^sa.

Заключение

В этом уроке мы рассмотрели основы работы с json-server REST API для создания тестовой базы данных. Вы научились устанавливать json-server и взаимодействовать с URL для добавления, обновления, изменения и удаления данных. Также вы увидели как осуществить поиск по записям, используя операторы и регулярные выражения.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://code.tutsplus.com/tutorials/fake-rest-api-up-and-running-using-json-server--cms-27871
Перевел: Станислав Протасевич
Урок создан: 15 Апреля 2017
Просмотров: 1545
Правила перепечатки


5 последних уроков рубрики "jQuery"

  • AJAX и PHP: загрузка файла

    Пример того как осуществить загрузку файла через PHP и jQuery ajax.

  • CardInfo.js — отображение банковской карты

    CardInfo.js позволяет по номеру карты получить логотип банка, фирменные цвета и прочие детали. В базе сейчас 49 самых популярных российских банков. Вскоре будут добавлены банки США, Канады, Англии, Австралии и Новой Зеландии.

  • Работа с Chart.js: Первое знакомство

    Chart.js — это популярный инструмент, который предназначен для создания графиков и диаграмм. В данной серии уроков будут раскрыты все аспекты работы с этой библиотекой.

  • Pointer Events API: обработка тач-событий

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

  • Меняем jQuery Ready() на чистый JavaScript

    Время идёт и меняется подход к различным вещам. С развитием JavaScript и выходом новых библиотек привычные вещи, такие как вызов $(document).ready(function(){}); становятся неактуальны.

^ Наверх ^