json-server实现增删改查(day6)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

上一篇文章中我们完成了四个按钮中的新增按钮的功能，接下来我们将完成四个按钮中的更新按钮的功能以及删除按钮的功能

json-server实现更新功能

• 首先我们需要将更新按钮绑定一个updata方法，具体的代码如下所示：

 <el-button type="success" @click="updata">
      <el-icon><Plus /></el-icon>
      更新</el-button
    >

• 然后我们需要在methods里面创建一个updata方法来发送axios请求修改json-server的数据，这里我们发送的是patch请求并且需要传递id来指定需要修改哪一个用户的数据，然后需要传递参数来指定需要修改的值，最后axios发送请求完了之后需要再一次调用getJsonUser（）方法来更新我们的初始数据并且展示到页面上，更新按钮的更新功能的实现代码如下所示：

const updata = () => {
  axios.patch("http://localhost:3000/user/" + id.value, {
    name: name.value,
    address: address.value,
    phone: phone.value,
  });
  getJsonUser();
};

实现效果如下图，将李四改为李思

json-server实现删除功能

• 删除功能的实现需要在每一列的删除按钮那绑定一个handleDelete并且传递index以及row参数，来指定需要删除哪一行的数据，删除按钮的代码如下所示：

  <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>

这个删除按钮是嵌套在el-table里的，所以需要使用template来包裹，scope.$index以及scope.row是用来绑定删除数据的所在行的，接下来只需要完成handleDelete这个方法发送delete请求就可以删除数据了。