jsonserver（jsonserver是什么）

本篇文章给大家谈谈jsonserver，以及jsonserver是什么对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、json-server增删改查排序小结
• 2、json-server 的简单使用
• 3、json-server使用 get方法篇

json-server增删改查排序小结

json-server 可以用于模拟请求 ----Restful风乱雀格

查询 get    params:{}

增加 post  data:{}

删除 delete

修改 put /patch  data:{}

使用步骤

1-全局安装 npm i json-server -g  / yarn global add json-server  相当于安装了一个命令行工具

2-准备json文件

{"list":[{"name":"斑老师","flag":true,"id":6},{"name":"猫咪老师","flag":true,"id":8}]}

3-在当前json文件下运行 json-server data.json  开启本地服务

开启服务

4-看到上图表示服务开启成功

增删改查----axios

查询以axios为例  请求方式为get

1-查询全部数据  并且按照id进行排序  排序方式为降序排序

axios({method:"get",url:";_order=desc"}).then(res={this.list=res.data;}).catch(err={console.log(err);})

2-查询指定id的数据

axios({method:"get",url:""}).then(res={this.list=res.data;}).catch(err={console.log(err);})

3-增加数据post

axios({method:"post",url:"",data:{name:todoName,flag:false}}).then(res=姿腊{this.getData()}).catch(err={console.log(err);})

4-删除指定id的数据迹陪滑

axios({method:"delete",url:`{id}`,}).then(res={this.getData();}).catch(err={console.log(err);})

url:`{id}`,这个位置用到了es6的模板字符串

5-修改数据

屏幕快照 2019-07-01 17.42.19.png

axios({method:"patch",url:`{id}`,data:{flag}}).then(res={this.getData();}).catch(err={console.log(err);})

补充点：put和patch的区别

put和patch都可以进行修改操作

区别

put 方式如果没有将所有属性都写完整  没写的属性会丢失

patch方式没修改的属性不写默认为之前的值

举例：{id:1,name:"zs",age:18}

修改age=20

put:{id:1,age:20}

patch:{id:1,name:"zs",age:20}

链接：

json-server 的简单使用

json-server用于悄判液模拟服务端接口数据，可以根据json数据建立一个完整的web服务。

github上的json-server地址

安装json-server

查看版本号，安装成功

在文件夹下创建一个db.json文件，存放一些数据。

在文件夹下，直接在地址栏cmd，进入终端。执行启动json-server命令。

json-server 已经启动成功启物。

在浏览器中输入地址： 端口号/接口名称，即可查看数据。

例如：输入

在和db.json同级的目录下，创建public目录，里面冲启可以存放一些静态资源。

json-server使用 get方法篇

1：在磁盘中找个专门的位置 新建文件夹 如：mock_excise

2：创建json文件（我是用notepad++创建的 文本文件也是可以的，但是涉及到中文会乱码）

3：在当前位薯毕虚置进入命令行

4：命令行中输入数燃 json-server --watch  文件名称

如图可看到：获取资源的地址 以及   资源服务器也就是本机的ip：数碰port

5：在浏览器 输入获取资源的地址 

[img]

关于jsonserver和jsonserver是什么的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。