vue中使用json-server

流程

1.安装json-server的两个依赖
npm -g i json-server

npm install -g json-server

2.安装axios依赖
npm i axios

3.全局导入axios使用src目录下main.js文件内
import axios from ‘axios’;

4.配置全局默认地址：src目录下main.js文件内
axios.defaults.baseURL = ‘http://localhost:8081’

5.创建一个json文件夹，json文件夹内新创一个data.json
在这里json数据如下：

{

  "list": [

    {

      "id": 1,

      "name": "吃饭",

      "flag": false

    },

    {

      "id": 2,

      "name": "睡觉",

      "flag": true

    },

    {

      "id": 3,

      "name": "打豆豆",

      "flag": true

    }

  ]

}

6.新建终端选择json文件夹运行：
json-server --watch --port 8081 data.json

7.复制运行得到的链接进浏览器运行出结果如下：

8.接下来就是App.vue里的代码：
8.1:data中设置一个新的数组：用来接收json的数据

 data() {

    return {

      data: [],

    };

  },

8.2：在methods方法内新建一个方法用来获取json的数据

async getList() {

      const result = await axios.get("list");

      this.data = result.data;

    },
  

8.3methods方法外面新建一个生命周期函数：created(){}

created() {

    this.getList();

  },

8.4将获取到的值放入页面上显示：

<div>

   <table border>

     <tr>

       <td>id</td>

       <td>name</td>

       <td>flag</td>

     </tr>

     <tr v-for="item in data" :key="item.id">

       <td>{{ item.id }}</td>

       <td>{{ item.name }}</td>

       <td><input type="checkbox" v-model="item.flag" @change="complete(item)" /></td>

     </tr>

   </table>

 </div>

8.5：如图：

9.修改点击复选框修改json中flag的值
9.1：复选框里面设置一个chang事件

9.2：methods方法内部使用change方法

methods: {

    // 获取json的值

    async getList() {

      const result = await axios.get("list");

      this.data = result.data;

    },

    // 修改状态

    async complete(item) {

      const result = await axios.patch(`list/${item.id}`, {

        flag: item.flag,

      });

      if (result.status !== 200) return console.log("修改状态失败");

      alert("修改成功");

    },

  },

这个时候你再去改变input框状态时，刷新一下你的json文件，你就会发现你的json文件的数据也被修改了。

不止是可以修改input框的状态，还有如下方法：

使用：查询：get axios.get(“list”)

模糊查询：get axios.get(list?name_like=${this.findInput}) //需要在请求地址中携带一个_like=‘xx’

增加：post axios.post(“list”, this.xxx);

删除：delete axios.delete(list/${id})

修改：1.put ： 全量的修改，会把原来所有的数据覆盖掉，需要改的和不需要改的都需要传参 2.patch ： axios.patch(list/${item.id}, {flag:item.flag});

还有更多操作需要自己去了解一下，这个json-server在前端是非常好用的一个东西。