supabase 旅程目的地 - 新增&删除&查询操作

新增数据

前面第一个目的地我们的插入数据是利用脚本初始化得到的，这次我们实现真正的用 supabase 提供的能力来新增数据

点击列表页下方蓝色加号跳转至我们的创建用户表单页面

来到我们的vue-version/src/services/apiEmployee.js中，有一个insertEmployee函数，我们来实现它

先来到项目的控制面板 API Docs 中，我们看到了 insert row 方法，复制下来

再修改如下，因为 employee 是一个对象，我们直接插入即可，也不需要返回值，只需要抛出异常

export async function insertEmployee(employee) {
  const { error } = await supabase.from("employee").insert([employee]);

  if (error) {
    throw new Error(error.message);
  }
}

来试一下，添加成功~

列表刷新后也看到了新数据

删除数据

新增实现完了我们来实现一下删除功能，来到我们的vue-version/src/services/apiEmployee.js中，有一个deleteEmployee函数，我们来实现它

先来到项目的控制面板 API Docs 中，我们看到了 delete row 方法，复制下来

再修改如下，通过参数 id 去删除，也不需要返回值，只需要抛出异常

export async function deleteEmployee(id) {
  const { error } = await supabase.from("employee").delete().eq("id", id);

  if (error) {
    throw new Error(error.message);
  }
}

删除前我们的所有 user 数据是这样的

再来到项目删除第二项试一下

删除后 user 数据确实去除了第二项，删除成功~

查询数据

操作一栏还有一项编辑，点击编辑按钮后跳转到一个可以修改信息的页面，这个页面需要先获取 user 数据，所以需要先实现查询功能

来到我们的vue-version/src/services/apiEmployee.js中，有一个getEmployee函数，我们来实现一下

先来到项目的控制面板 API Docs 中，我们看到了 Filtering 方法

我们需要根据 id 去查询，复制下来相关代码再修改如下，其中 employee 是数组，我们取第一项，故返回employee[0]

export async function getEmployee(id) {
  let { data: employee, error } = await supabase
    .from("employee")
    .select("*")
    .eq("id", id);

  if (error) {
    throw new Error(error.message);
  }

  return employee[0];
}

写好函数后我们来到列表点击第一项的编辑按钮，可以看到跳转到了编辑页面且成功回显了该用户的数据信息~