Блог

Главная - Вопросы по программированию - Добавить параметр запроса ? поиск = вызов сервера

Добавить параметр запроса ? поиск = вызов сервера

#reactjs #typescript #web-deployment #web-development-server

#reactjs #машинописный текст #веб-развертывание #веб-разработка-сервер

Вопрос:

У меня есть приложение react / typescript, состоящее из клиента и сервера. Клиент запрашивает у сервера некоторые данные и продолжает показывать их с помощью React.

На стороне клиента при запросе данных я делаю:

 export const createApiClient = (): ApiClient => {
    return {
        getTickets: () => 
            return axios.get(APIRootPath).then((res) => res.data);
        }
    }
}

На стороне сервера, отправляя данные, я делаю:

 app.get(APIPath, (req, res) => {  // @ts-ignore
  const page: number = req.query.page || 1;

  const paginatedData = tempData.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  res.send(paginatedData);
});

Теперь меня попросили сделать следующее:

  1. Добавьте параметр запроса ?search= в вызов API /tickets и реализуйте его на стороне сервера.
  2. Подключите панель поиска на стороне клиента к этому вызову API

Я понимаю, что сервер, прежде чем отправлять данные обратно, должен отфильтровать их по некоторой строке 'x' , которая вводится в строке поиска.

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

Предполагая, что я уже смог подключить панель поиска таким образом, чтобы отображался ввод по URL-адресу. Как мне отправить этот параметр на сервер? Должен ли я вообще его отправлять? Или я должен иметь возможность с сервера самостоятельно извлекать параметр?

Спасибо за помощь

Комментарии:

1. Параметр должен быть добавлен к URL-адресу перед отправкой запроса (с помощью axios). Итак, в обработчике кнопки, которая запускает поиск, вы должны выполнить триггерный запрос с добавлением параметра поиска к URL. Затем этот параметр будет доступен req.query.search на сервере. Вероятно, ваш getTickets метод должен принимать параметр search , который он добавляет в качестве параметра запроса к URL-адресу, если он присутствует.

Ответ №1:

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

В любом случае, единственное, что меняется, — это событие запуска: в первом случае, предполагая, что вы используете входной тег, вам нужно использовать свойства onChange для вызова вашей функции из вашего jsx таким образом:

 <input type="text" [...] onChange={yourFunction} />

Вам также может потребоваться изменить вызов API, чтобы передать параметры вашего запроса во что-то вроде:

 return axios.get(APIRootPath, { params: { param1: 42, param2: "some string").then((res) => res.data);

Во второй гипотезе у вас может быть кнопка, которая использует событие onClick для запуска той же процедуры