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