В части 3(a) мы создали запрос GET для запроса нашего API. Здесь, в части 3(b), мы будем запрашивать данные, хранящиеся локально на нашем компьютере, и использовать эти данные для заполнения раскрывающегося списка. В этой части мы отредактируем наш сервер с помощью Express, чтобы настроить маршруты и промежуточное ПО для выполнения задач на этих маршрутах.
Прежде чем мы сможем начать, нам нужно сохранить некоторые данные на вашем локальном компьютере. В папке с ресурсами создайте папку с именем data. В этой папке данных создайте файл с именем category.json. В этом файле объявите переменную с именем category и назначьте ее объекту. Этот объект будет заполнен массивом строк. Каждая строка будет отдельной категорией. Вы можете скопировать список категорий из моего репозитория или использовать свой собственный.
Теперь давайте отредактируем наш компонент во внешнем интерфейсе. В состоянии SearchBar.jsx объявите ключ с именем «topCatArray» и назначьте его пустому массиву. Здесь мы будем хранить массив всех опций категории, из которых пользователь может выбирать.
Затем объявите функцию под названием «getDropDown». Эта функция выполнит запрос GET к пути, который мы создадим, и сохранит ответ от этого запроса в состояние.
В getDropDown используйте axios для объявления запроса GET. Передайте путь в качестве параметра запроса. Мы назовем путь ‘/categories’. Позже мы настроим маршруты для этого пути в нашем файле сервера.
Используя обещания, объявите переменную для хранения ответа, который мы получаем от нашего запроса. Мы назовем переменную «topCatData». Затем обновите состояние значением этой новой переменной.
Поскольку мы хотим, чтобы эта функция запускалась сразу после загрузки страницы (чтобы раскрывающийся список заполнялся мгновенно), мы будем вызывать эту функцию, используя функцию React «ComponentWillMount».
Теперь давайте создадим маршрут для пути к «/categories», который мы сделали в нашем GET-запросе «getDropDown».
В нашем файле server.js объявите маршрут, который на данный момент отвечает со статусом 200. Вам всегда нужно отвечать на запрос. Даже если у вас нет данных для ответа, вы можете ответить со статусом. Посмотрите здесь для всех кодов состояния.
Далее нам нужно создать функцию контроллера, которая поможет нам получить данные из нашего файла category.json. Контроллеры — это промежуточное ПО (функции), которые выполняют задачи на маршруте. В этом случае задачей будет получение запрошенных данных (список категорий) и возврат этих данных в виде объекта ответа.
Создайте папку в папке Сервера под названием «Контроллеры». В папке Controllers создайте файл с именем «categoriesController.js». В файле categoryController.js объявите переменную с именем «categoriesController», которая назначается пустому объекту. Каждый контроллер, который мы создадим в этом файле, будет добавлен в качестве ключа к этому объекту categoryController. Мы экспортируем весь этот объект.
Создайте ключ с именем «getCategories», назначьте этот ключ функции стрелки с параметрами req, res и next (представляющими объект запроса, объект ответа и следующую функцию соответственно).
В этой функции деструктурируйте объект категорий из файла category.json. Используйте метод «fs.ReadFileSync», чтобы получить данные из этого файла. Обязательно проанализируйте данные из этого файла с помощью метода JSON.parse.
Сохраните объект ответа о категориях, полученный из файла Categories.json, в res.locals. Затем вернитесь следующим. Вы также можете добавить условие для выдачи ошибки, если объект категории пуст.
**Примечание. Res.locals — это объект, который содержит локальные переменные ответа, относящиеся к запросу. Его значения доступны только во время этого цикла запроса/ответа.**
**Примечание. Возврат next перемещает данные ответа от одного контроллера к следующему контроллеру (если есть), а затем обратно к маршруту. Не вернувшись в следующий раз, вы никогда не покинете функцию контроллера.**
Добавьте контроллер в маршрут ‘/categories’ в файле server.js.
Как только данные из файла category.json будут сохранены в res.locals, вы можете изменить маршрут, чтобы он отвечал этими данными в дополнение к статусу.
Теперь наш запрос GET к ‘/categories’ в SearchBar.jsx может быть выполнен. Теперь мы запрашиваем данные, хранящиеся локально на наших компьютерах!
Затем мы можем, наконец, отобразить результаты нашего запроса на странице. Ознакомьтесь с Частью 3 (c), чтобы завершить поиск. Но сначала подарите себе аплодисменты. Вы почти закончили!
