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

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

上一篇文章中我们使用json-server完成了更新数据的操作并且完成了删除按钮的方法绑定，接下来将完成删除按钮的方法编写以及搜索按钮的功能实现

• 我们给删除按钮绑定了handleDelete方法之后，在setup里创建这个方法然后传递index以及row这两个参数用来确定用户点击了哪一行的数据以便于删除，传递参数了之后需要使用axios发送delete请求并且添加row.id这个参数，作用是删除指定行的数据，最后delete请求发送完了之后需要再次调用getJsonUser方法将数据重新展示到页面上，具体的删除按钮的实现代码如下所示：

const handleDelete = (index, row) => {
  axios.delete("http://localhost:3000/user/" + row.id,{})
  getJsonUser();
}

实现效果如下图所示：

点击删除按钮即可删除姓名为张三的这一条数据

json-server实现搜索功能

• 搜索功能的实现这里是通过搜索id的值来实现的，发送get请求的时候需要传递id用来确定搜素的数据的id的具体值，然后返回的数据需要添加到之前用来接收所有数据的空数组里面，注意这里直接通过/id搜素出来的数据是以对象的形式出现的，而el-table绑定的data数据需要是数组形式，所以我们需要给res.data包裹一个中括号，让他成为数组形式，具体的实现代码如下所示：

const search =()=>{
  axios.get("http://localhost:3000/user/" + id.value).then((res)=>{
   jsonData.value = [res.data]
  })

}

如搜索id为2的数据如下图所示：