Нам всегда нужно взаимодействие между бэкендом и фронтендом для создания успешного приложения, но для интеграции бэкенда с фронтендом требуется время, пока они оба работают параллельно. Так что для тех, кому нужна быстрая разработка, не дожидаясь, пока бэкэнд создаст Rest backend с фиктивными данными, это решение для этой ситуации.

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

Для первоначальной настройки требуется всего несколько шагов:

1: Установка json-сервера. Сначала нам нужно установить json-сервер, который мы можем установить с помощью менеджера пакетов узлов (npm) с параметром -g для глобальной установки и добавления sudo с последующей командой ниже, если они запрашивают разрешение.

npm install -g json-server

2:Создайте файл json с фиктивными данными. После успешной установки сервера json следующим шагом будет создание файла json, содержащего фиктивные данные.

3: Запустите json-сервер сейчас.Теперь все, что вам нужно сделать, это запустить ваш json-сервер в терминале и запустить файл json.

json-сервер mockbackend.json

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

Невозможно выполнить привязку к порту 3000. Укажите другой номер порта либо с помощью аргумента —port, либо с помощью файла конфигурации json-server.json.

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

json-сервер mockbackend.json — порт = 3005

Вы можете открыть эту ссылку по указанному URL-адресу, который вы видите в своем терминале, и протестировать другой путь. например, в моем случае я могу использовать localhost:3005/data, он вернет мои фиктивные данные, указанные в пункте 2 выше.

Пришло время использовать фиктивные данные бэкенда в ваших приложениях angular. Все, что вам нужно сделать, это установить сгенерированную переменную URL-адреса на URL-адрес localhost, а затем вы можете получать данные в своем приложении.

На следующем шаге все, что вам нужно сделать, это вызвать getMockData() в вашем файле компонента, и вы сможете отображать полученные данные в пользовательском интерфейсе, как я сделал в моем случае.

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

Спасибо за прочтение!!!