User页面获取数据

xxx

1. User 页面新增

// etc...
import type {
  ColumnsType,
  ColumnType,
  TablePaginationConfig,
} from "antd/es/table";

// 请求api
import { getUserList } from "../../api/user";
// etc...

const Index = () => {
  const [searchText, setSearchText] = useState("");
  const [searchedColumn, setSearchedColumn] = useState("");
  const searchInput = useRef<InputRef>(null);
  // 获取的用户列表
  const [list, setList] = useState<User[]>([]);
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    position: ["bottomCenter"],
    showSizeChanger: true,
  });

  // 页面挂载发起请求
  useEffect(() => {
    getListByPage();
  }, []);

  // 请求
  const getListByPage = async (current: number = 1) => {
    const res = await getUserList(current);
    setList(res.data.list);
    setPagination({
      ...pagination,
      ...res.data,
    });
  };

  // 点击翻页发送请求
  const changePage = (p: TablePaginationConfig) => {
    getListByPage(p.current);
  };

  // etc... 删除原来的dataSource 换成list
  return (
    <div className={styles.userContainer}>
      <Button type="primary">新增</Button>
      <Table
        rowKey={"id"}
        dataSource={list}
        columns={columns}
        scroll={{ x: 1500, y: 500 }}
        pagination={pagination}
        onChange={changePage}
      />
    </div>
  );
};

export default Index;

2. 用户所有 API 请求 src\api\user.tsx

import request from "../request/request";

export function getUserList(current: number = 1, pageSize: number = 10) {
  return request.get<any, IPagination<User>>("/admin/user", {
    params: {
      current,
      pageSize,
    },
  });
}

export function deleteUserById(id: number) {
  return request.delete<any, ResponseSuccess>("/admin/user/" + id);
}

export function updateUser(id: number, user: User) {
  return request.patch<any, ResponseSuccess>("/admin/user/" + id, user);
}

export function doAddUser(user: User) {
  return request.post<any, ResponseSuccess>("/admin/user", user);
}

3. 重复一下声明文件 src\react-app-env.d.ts

/// <reference types="react-scripts" />
declare global {
  interface ResponseSuccess<T = {}> {
    success: boolean;
    errorMessage?: string;
    data: T;
  }
  interface IPagination<T> {
    success: boolean;
    errorMessage?: string;
    data: {
      list: T[];
      current: 1;
      pageSize: number;
      total: number;
      totalPage: number;
    };
  }
  interface Window {
    logout(): void;
  }
}
export {};