1,win+r打开cmd全局安装
npm install -g json-server
2,电脑任意文件里创建一个文件夹 并在该文件夹新建一个json文件 (注json文件名自己起,我这起的名为data.json 在该文件夹路径下打开终端执行如下命令
json-server data.json
3,看到如下界面,表明启动成功
4在浏览器输入http://localhost:3000/data能看到刚刚新建的data.json中的数据
5,在vue组件写上代码逻辑(注:该组件不能是挂载的APP页面的子组件 ,应该尽量用它的孙子辈的组件做测试)
增:post
<template>
<div>1221332</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios({
method: "post",
url: "http://localhost:3000/data",
data: {
hobby: "爱运动",
sex: "女",
},
}).then((res) => {
console.log(res, "为嘛还不行");
});
},
};
</script>
查:(get)
a,查全部
<template>
<div>1221332</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios({
method: "get",
url: "http://localhost:3000/data",
// data: {
// hobby: "爱运动",
// sex: "女",
// },
}).then((res) => {
console.log(res, "为嘛还不行");
});
},
};
</script>
b.根据id查
<template>
<div>1221332</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios({
method: "get",
url: "http://localhost:3000/data/2",
// data: {
// hobby: "爱运动",
// sex: "女",
// },
}).then((res) => {
console.log(res, "为嘛还不行");
});
},
};
</script>
c,根据字段查
<template>
<div>1221332</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios({
method: "get",
url: "http://localhost:3000/data?sex=女",
// data: {
// hobby: "爱运动",
// sex: "女",
// },
}).then((res) => {
console.log(res, "为嘛还不行");
});
},
};
</script>
d,模糊查询
<template>
<div>1221332</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios({
method: "get",
url: "http://localhost:3000/data?q=女",
// data: {
// hobby: "爱运动",
// sex: "女",
// },
}).then((res) => {
console.log(res, "为嘛还不行");
});
},
};
</script>
改:patch(根据id改)
<template>
<div>1221332</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios({
method: "patch",
url: "http://localhost:3000/data/2",
data: {
hobby: "爱运动123",
},
}).then((res) => {
console.log(res, "为嘛还不行");
});
},
};
</script>
删:delete (根据id删除的
<template>
<div>1221332</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios({
method: "delete",
url: "http://localhost:3000/data/3",
}).then((res) => {
console.log(res, "为嘛还不行");
});
},
};
</script>