TypeScript中获取页面id传给后端API实现多个页面数据分别拿取

前言

所有页面展示的数据都放到了Navivat数据库中，后端需要使用Mysql语句。

好处（优点）

当在前端编写多个页面时，例如照片墙，或者多个页面 要新建多个tsx脚本时
使用此方法就可以在一个页面完成。

typescript（前端）

  const [art_image_data, setArt_image_data] = useState([]);

  function getQueryParam(name: string): string| null {
    const search: string = window.location.search;
    const params: URLSearchParams = new URLSearchParams(search);
    return params.get(name);
  }

  async function fetchArtImages(params: { xshd_id: string }) {
    try {
      const response = await get_imgs3(params);
      const artImages = response.data;
      console.log('params', params);
      console.log(artImages);
      setArt_image_data(artImages);
    } catch (error) {
      console.error('Error fetching art images:', error);
    }
  }

  useEffect(() => {
    const paramValue = getQueryParam('id');
    if (paramValue) {
      const params = { xshd_id: paramValue };
      fetchArtImages(params);
    }
  }, []);

python（后端）

@server.route("/api/get_imgs3", methods=['get'])
def get_imgs3():
    """
    校园生活照片墙接口
    """
    params = request.args.to_dict()
    sql = mysql.fetchall(f"select * from xysh_imgs3 where xshd_id = {params['xshd_id']} and is_delete = '0' ")
    res = {'success': True, 'data': sql}
    return json.dumps(res, ensure_ascii=False)

将上述代码的 get_imgs3 改为自己的接口名字
art_image_data 是 你下面调用接口数据的自定义名字

xshd_id是与 数据库中的 xshd_id 这个 字段名 对应的 后端sql语句进行了筛选 先获取前端传过来的参数
前端穿过来的参数会是

在sql语句中拿到这个数字就OK了。

总结

先要在Navicat数据库中添加一个和前端穿过来相同的字段名字
方便后面在sql语句中进行区分 拿到对应 id 的数据
跳转的超链接就可以写成 （..../文件名字?id=...）
前面是你的网址 后面的id为自己的 一般是 从1一直排着向后。