调用后端接口实现vue.js增删改查

1.请求数据

调用getData通过异步方法在控制台获取数据（数据：data.data.record）
const getData = async () =>{
    const res = await getProducts();
    console.log(res)
}

2.定义列表（columns）

调用columns创建列表
const columns = [
    {
        title:'商品',
        dataIndex:'name'
    },
    {
        title:'价格',
        dataIndex:'price'
    },
    {
        title:'操作',
        dataIndex:'methods'
    }
]

2.1获取接口数据，通过dataSource来实现

const dataSource = ref([]);//双向绑定，初始值为空
再再getData调用函数中把res.data.data.record的值赋值给dataSource.value获取信息到列表当中

2.2定义页码pagination

//页码展示
const pagination = ref({
    current: 1,//当前页
    pageSize: 10,//每页展示多少条
    total: 0,//总共多少条
    showSizeChanger: true,//展示change
    pageSizeOptions: ["2", "3", "5", "10"],
  });
再在getData调用函数中获取总共的数据pagination.value.total = res.data.data.totalItems;

2.3定义每页数据条数@change="handleTableChange"

调用handleTableChange
const handleTableChange = (pageObj) => {
    pagination.value = pageObj;//pageObj赋值给pagination
};

2.4再在getData调用函数中将分页数据传给getData

 const res = await getProducts({
        //传入对应的数据
        pageNumber:pagination.value.current,
        pageSize:pagination.value.pageSize,
    });

2.5添加删除、修改操作按钮

删除操作

{column,record}解构，根据record.id传入的id来删除用户信息
调用deleteItem
const deleteItem = async (id) => {//通过异步方法，接收id删除数据
    await deleteProducts(id);
    //提示信息
    message.success("删除成功！");
    getData();//请求列表
  };

2.6添加a-form表单属性

查询操作
//定义v-model="passData"，passData传入后端数据的函数
 
     
       
     
     
       
     
     
       
          查询
          重置
       
     
   
//调用点击事件search
const search = () =>{
    pagination.value.current = 1;//页码回到第一页
    getData();//请求列表数据
}
将...passData.value添加到getData中，解构来获取搜索的值
//调用reset点击事件重置
const reset = () => {
    pagination.va