This First Part is beginner friendly (zero coding)

Для фронтенд-разработчика процесс настройки полного API отдыха, управления базами данных и Express требует много времени и сил. Json API работает как поддельный Rest API, где разработчики могут создать сервер, который будет обслуживать json-файлы на ходу, другими словами, Json-сервер сокращает время, затрачиваемое разработчиками на установку целой группы серверных серверов.

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

Предпосылки

  • Базовое понимание формата JSON
  • Базовые знания о том, как API используются во внешних приложениях.
  • Эта первая часть подходит для начинающих (нулевой код)
  • Установка NodeJs на ваш компьютер

Что такое Json-сервер?
Сервер Json — это пакет apm, который позволяет создавать поддельные Rest API с минимальными усилиями.

Когда его использовать?
Json API лучше всего подходит для прототипирования интерфейсных компонентов и тестирования конечных точек.


Установка JSON-сервера

Давайте посмотрим, как установить и запустить сервер JSON на вашем компьютере.

Шаг 1: Создайте package.json в папке вашего проекта.
В терминале запустите команду npm init -y и нажмите Enter.
у вас должен быть файл package.json, созданный в репозитории вашего проекта.

Шаг 2: Установите пакет json-server
снова в вашем терминале выполните команду npm i json-server.
(Вы должны увидеть его как зависимость в файле package.json).
Шаг 3: Добавьте новый скрипт для запуска сервера.
Еще в вашем package.json под скриптами вставьте эту строчку:

"serve-json":"json-server --watch database.json"
Войти в полноэкранный режим

Выйти из полноэкранного режима

Конфигурация

По умолчанию json-serve работает на порту 3000, но вы можете запустить другое приложение на том же порту, в таких случаях мы можем указать параметр порта при запуске json-сервера с помощью
добавление --host 7000 к приведенному ниже сценарию в package.json

"serve-json":"json-server --host 7000 --watch database.json"
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь наш json-сервер будет обслуживаться по адресу localhost:7000.

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

Давайте теперь запустим скрипт и посмотрим, работает ли он.
если ошибок нет, перейдите кlocalhost:7000вы должны увидеть это:

локальный номер: 7000


ОТПРАВКА ЗАЯВОК

Давайте отправим несколько запросов на наш сервер.

ПОЛУЧИТЬ ЗАПРОС
Внутри вашей базы данных.json у вас есть 2 массива companies а также orders.

сервер JSON предоставляет конечные точки, чтобы мы могли сделать запрос от клиента.

Чтобы получить данные для первого массива companies в URL перейдите к localhost:7000/companies
Это будет служить массивом:

массив данных если вам нужен конкретный элемент, с помощью json мы просто добавляем id к URL. Итак, если вам нужен первый элемент, перейдите к localhost:7000/companies/1.

Выход
один предмет и аналогично с заказами.

ФИЛЬТРАЦИЯ
Допустим, вы создаете свое приложение и хотите, чтобы у пользователя была возможность фильтровать список определенных продуктов. Для нашего примера давайте попросим сервер JSON предоставить нам только компании с «технологическим» сектором. К URL-адресу мы собираемся добавить параметр запроса в конце localhost:7000/companies мы передаем свойство, которое мы хотим фильтровать (в нашем случае сектор), которому мы назначаем значение фильтра, которое является технологией.
localhost:7000/companies?sector=technology

выходфильтрация данных Мы возвращаем все компании, сектор которых является технологией

СОРТИРОВКА
Другим общим требованием является возможность пользователей сортировать элементы определенным образом.
Для нашего сценария давайте отфильтруем наш список компаний, чтобы отсортировать их по количеству. В URL добавим ?_sort=quantity localhost:7000/companies?_sort=quantity

По умолчанию порядок сортировки восходящий, чтобы сделать его нисходящим, нам нужно добавить &_order=descна наш URL вот так localhost:7000/companies?_sort=quantity&_order=desc

выход:
Сортировка данных

ПОЛНОТЕКСТОВЫЙ ПОИСК
Для выполнения полнотекстового поиска в нашей базе данных.json указываем "q=" за которой следует наша строка поиска, подобная этой localhost:7000/companies?q=an

Выход
полнотекстовый поиск Возвращает список элементов, содержащих "an".


Вывод

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

Если у вас есть какие-либо вопросы, не стесняйтесь задавать их в разделе комментариев.
Или вы можете отправить мне сообщение на Твиттер.

До следующего раза, берегите себя. 👋