В этой статье мы будем создавать фиктивный (поддельный) REST API с json-server. Если вы создаете интерфейсное приложение (например, React или Angular) что-либо на интерфейсе, где вам нужно подключиться к бэкэнду, вам нужен сервер с некоторыми данными. Возможно, вы не захотите в то время или даже не будете знать, как создать бэкэнд (создание маршрутов, получение элементов из базы данных) и все такое, это дает вам действительно простой вариант имитировать всю эту бэкэнд-функциональность и сосредоточиться на интерфейсе.

Здесь есть пример фиктивного API, однако вам придется строго работать с их данными, если вы собираетесь его использовать. Однако в этой статье мы создадим фиктивный API локально с нашими собственными данными.

Давайте начнем:

Предпосылки.

json-server используется для создания прототипа и имитации внутреннего сервера. Он доступен в npm как пакет и может быть установлен с помощью команды:

$ npm install -g json-server

Затем мы можем добавить это как сценарий npm и указать порт в файле package.json следующим образом:

Параметр watch означает, что сервер запущен в режиме наблюдения. Он отслеживает изменения файлов и соответственно обновляет API.

Примечание: указывать порт необязательно, порт по умолчанию - 3000. Вы также можете назвать его как хотите.

Создайте файл JSON

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

Это в основном наша база данных и то, что будет служить нашим сервером.

Теперь у нас должна быть возможность запустить наш сервер с помощью нашего сценария npm:

$ npm run mock:api

Перейдите к http: // localhost: 4000 в своем браузере, чтобы увидеть ресурсы нашего сервера, и мы получим следующий результат:

Любой запрос (GET, POST, PATCH, DELETE и т. Д.), Который вы делаете к серверу, будет автоматически сохранен в файл db.json. Каждый запрос POST, PUT, PATCH должен содержать заголовок Content-Type: application / json, в противном случае он приведет к ответу 200 OK, но не внесет изменений в данные. Мы также можем протестировать конечные точки API с помощью Postman, но мы не будем вдаваться в подробности в этой статье.

Faker.js

Ввод данных вручную доставляет удовольствие, пока вам не понадобится большой их объем. Есть простое решение - библиотека faker.js. Ознакомьтесь с их документацией здесь, чтобы сгенерировать поддельные данные. По сути, мы можем интегрировать его с json-сервером.

Для начала установим faker.js с помощью npm:

$ npm install faker

Затем создайте еще один файл worker.js и используйте следующий код:

Мы создали функцию для генерации json-объекта, содержащего 30 воркеров. Сделав это, мы можем запустить worker.js напрямую с json-сервера:

$ json-server worker.js

Перейдите к http: // localhost: 3000, чтобы проверить это.

И это все о создании фиктивного REST API с json-сервером.

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

Вы также можете подписаться на меня в Twitter @theoluwaafemi