Для дальнейшего развития нашего приложения,
мы хотим настроить простой сервер
, который будет обслуживать наши данные, которые требуются нашему приложению.
До сих пор мы не узнали достаточно о том, как
мы можем настроить сервер, который будет обслуживать REST API.
Вместо этого мы будем использовать простой модуль узла под названием json-server,
, который помогает нам быстро настроить простой сервер, который будет обслуживать данные, которые даны
ему в виде файла JSON, а также
обслуживать изображения, которые могут потребоваться нашему приложению.
Итак, для начала,
давайте перейдем к установке модуля узла json-server,
и после этого настроим наш json-server в этом упражнении.
Для начала перейдите в удобное место
на компьютере и создайте папку с именем json-server.
Причина, по которой я создаю эту папку, заключается в том, что я могу хранить все файлы
, которые требуются моему json-server, в этой конкретной папке.
После этого мы установим модуль json-server npm как глобальный модуль MPM.
Итак, чтобы сделать это,
в подсказке в вашем терминале,
тип npm install минус g json-server,
, а затем пусть это завершит установку
модуля json-server npm как глобального модуля.
Теперь, если вы делаете это на Linux или Mac,
обязательно используйте sudo перед ним.
После завершения установки
перейдите к инструкции по настройке json-server,
и там мы предоставляем файл с именем db.json.
Загрузите этот файл и назовите его как db.json и переместите этот файл
в папку json-server, созданную на предыдущем шаге.
Теперь вы видите, что я уже загрузил файл db.json
, а затем перемещаю этот файл db.json в папку json-server.
Кроме того, я также создал другую папку
внутри папки json-server с именем public.
Теперь все, что мы помещаем в эту общую папку, будет доступно
нашего json-сервера в качестве ресурса, который может быть загружен с нашего сервера.
Таким образом, наш json-сервер действует как простой статический веб-сервер, который может помочь нам
обслуживать любые ресурсы, такие как изображения или даже целый веб-сайт.
Если вы хотите, вы можете скопировать это в общую папку и сделать его доступным
для отображения json-server и просмотра в браузере.
Далее, снова, перейдите к инструкции
, а затем скачать этот zip имя файла images.zip,
, а затем распаковать этот файл,
, а затем вы получите папку с именем images,
который содержит набор изображений PNG, которые мы будем использовать в нашем приложении.
Итак, как только папка изображений будет готова,
переместить эту папку изображений в общую папку, которую мы только что создали
в папке json-server.
Перейдя в нашу папку,
вы увидите, что внутри общей папки,
я уже перемещаю подпапку изображений в общую папку здесь,
и это содержит все изображения, которые будут полезны для моего приложения.
Чтобы запустить свой json-server,
перейдите в папку json-server в вашем терминале и в подсказке,
введите json-server и минус watch db.json.
Причина использования этого флага часов
заключается в том, что этот json-сервер будет держать часы в файле bb.json,
и в любое время, когда файл db.json изменяется,
он перезагрузит файл db.json и начнет обслуживать измененные данные с сервера.
Кроме того, мы также можем дать флаг минус d со значением,
скажем, например, 2,000,
, что означает, что когда сервер получает запрос,
он будет возвращать данные запрашивавшей после 2-секундной задержки.
Теперь это будет использоваться для имитации задержки при доступе к серверу через Интернет.
Итак, вот почему я также предлагаю использовать флаг минус d
2000 для json-server.
Итак, давайте запустим наш json-server,
и тогда вы заметите, что json-server запускает
и объявляет все ресурсы, доступные с json-сервера.
Таким образом, вы можете видеть, что он имеет набор ресурсов, которые доступны по всем этим URL-адресам.
Кроме того, общедоступный статический сервер, который обслуживает
статические данные, доступен по этому URL-адресу, localhost:3000.
Теперь вы можете перейти в любой браузер, а затем, если вы напечатаете
localhost:3000 и слэш блюда,
вы увидите, что это начнет обслуживать наши данные в виде массива JSON здесь.
Итак, это будет полезно для нашего приложения.
Аналогично, вы можете набирать лидеров,
и вы увидите, снова,
данные обслуживаются и так далее.
Если вы введете локальный хост:3000,
вы увидите, что сервер будет обслуживать
данные как статический сервер, а затем в настоящее время он пуст.
Теперь, если вы хотите получить доступ к изображениям, которые доступны с сервера,
Я могу просто ввести изображения и ввести имя файла PNG
, а затем вы увидите, что он будет обслуживать соответствующее изображение.
Теперь, это очень полезно для нас,
, поскольку мы разрабатываем наше приложение в этом курсе.
С этим мы завершим это упражнение
, где мы создали простой сервер под названием json-server для обслуживания
данных и поддержки REST API, к которому мы можем получить доступ из нашего приложения.