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

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

上一篇文章中我们已经将json-server中创建的数据渲染到element-plus的table组件表格里了，接下来将为上面四个按钮提供增删改查的功能

使用json-server完成新增功能

• 首先为新增按钮绑定一个newadd新增的方法，代码如下所示：

  <el-button type="success" @click="newadd">
      <el-icon><Plus /></el-icon>
      新增</el-button
    >

• 然后给新增按钮添加方法，在methods中创建一个newadd方法，然后发送axios请求，这里是新增按钮，所以需要发送post请求，请求的地址即为我们json-server跑的本地的3000端口，这里需要携带参数，参数就是input输入框用户输入的值，在data中return了一些数据，就是使用v-model双向绑定的数据，如下所示：

const id = ref("");
const name = ref("");
const address = ref("");
const phone = ref("");

• json-server的传参，这里需要传递每个用户的必填字段，id，name,address,phone，然后将这几个值等于上面绑定的数据的value值，具体的新增按钮实现的代码如下所示

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

• 这样我们的新增按钮就可以完成了，可以在页面中试一试看看效果，如下图所示新增一个id为5的用户数据：

点击新增按钮之后就会向本地的3000端口发送post请求，添加我们用户输入的数据，但是我们会发现每次新增完之后不会立即出现我们新增的数据，这时候我们需要在post结束之后再调用一次getJsonUser();方法，这样我们新增的数据点击按钮之后就会立即出现在页面上了