添加查询参数?search=呼叫服务器

Question

我有一个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. 为/tickets API调用添加查询参数?search=，并在服务器端实现
2. 将客户端搜索栏连接到该API调用

我理解服务器，在发送数据之前，应该通过一些字符串'x'过滤它，它被输入到搜索栏上。

我不明白的问题(因为我不熟悉web开发)，是服务器应该如何接收这个字符串。

假设我已经能够以一种显示URL上输入的方式连接搜索栏。如何将该参数发送到服务器?我还需要寄出去吗?或者我应该能够从服务器自己提取参数?

谢谢你的帮助

Answer 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事件来启动相同的过程