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事件

 

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

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在前端是非常好用的一个东西。