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

1.请求数据

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

2.定义列表（columns）

<a-table :columns="columns">

</a-table>
调用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添加删除、修改操作按钮

删除操作
<template #bodyCell="{column,record}">
        <a-space v-if="column.dataIndex === 'methods'">
          <a-button>编辑</a-button>
    //删除提示框
          <a-popconfirm
            title="你确认要删除这条数据吗？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="() => deleteItem(record.id)"
          >
            <a-button>删除</a-button>
    </a-popconfirm>
        </a-space>
</template>
{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传入后端数据的函数
 <a-form v-model="passData" layout="inline">
      <a-form-item name="name" label="商品">
        <a-input v-model:value="passData.name" />
      </a-form-item>
      <a-form-item name="price" label="价格">
        <a-input v-model:value="passData.price" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button @click="search">查询</a-button>
          <a-button @click="reset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
//调用点击事件search
const search = () =>{
    pagination.value.current = 1;//页码回到第一页
    getData();//请求列表数据
}
将...passData.value添加到getData中，解构来获取搜索的值
//调用reset点击事件重置
const reset = () => {
    pagination.va