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

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

上一篇文章我们将element-plus组件库引入了并且完成了table组件的使用，接下来我们需要将json-server中的数据渲染到页面上去。

• 首先我们需要安装一下axios，在项目终端中输入npm i axios 等待一会就可安装成功，我们可以在package-lock.json文件里面看到axios是否安装成功以及安装的版本，如下图所示：

• 然后我们需要全局引入一下axios，在mian.js文件中import一下axios,代码如下所示：

import axios from 'axios'

• 然后在页面上创建一个getJsonUser方法，用来发送axios请求，使用_sort将数据以id来排序，使用_order将数据进行升序排序，然后将获取到的数据赋值给一个空数组，将el-table绑定的data赋值为这个空数组，然后就可以看到页面上有数据了，如果不确定请求是否发送成功，可以console.log（res)看看是否有数据发送过来，如下图所示：

• 发送请求的代码如下所示：

const getJsonUser = async () => {
  await axios.get("http://localhost:3000/user?_sort=id").then((res) => {
    jsonData.value = res.data;
    console.log(res);
  });
};

• 然后就可以看到我们的页面上有如下所示的样式：

• 这里创建的空数组的代码如下所示：

import { onMounted, ref } from "vue";
const id = ref("");
const name = ref("");
const address = ref("");
const phone = ref("");
const jsonData = ref([]);

数据展示出来后我们需要给这个个操作数据的按钮绑定增删改查的方法，来完成我们的功能