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