jsonserver(jsonserver是什么)

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

本文目录一览:

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是什么的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

标签列表