码迷,mamicode.com
首页 > Web开发 > 详细

json-server使用总结

时间:2018-07-04 16:03:23      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:nbsp   20px   read   直接   根据   跨域   技术分享   package   margin   

 

 

json-server 使用总结

What:伪造在线REST API,给前端页面提供虚拟的数据 ,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法

How to use
使用方法一:使用线上地址在线调用

进入线上地址 http://jsonplaceholder.typicode.com/ 后,页面下方提供了多种模拟数据接口,可供我们直接调用

 技术分享图片

如图,接口中字段以及数据结构都是固定的,我们无法更改以适应我们的应用场景,因此,我们可以使用json-server在本地模拟数据,并根据自己的需求编写json文件

使用方法二:使用json-server本地调用

一、全局安装:在安装nodejs前提下,打开终端,全局安装json-server

npm install -g json-server

二、初始化:新建文件夹project并cd进入project,初始化package.json文件

npm init

三、确认package信息:回车确认package name,version等等,生成package.json文件

四、安装json-server模块,成功后,package.json中将显示版本号

npm install json-server --save

        技术分享图片

五、在文件夹project中创建data.json,并根据需要编写json数据

   技术分享图片

六、监听data.json文件,"my-server"为自定义的名字

   技术分享图片

七、启动json:my-server,Resource下方的地址即为生成的本地接口地址

npm run json:my-server

  技术分享图片

八、除了自己本地模拟json数据,也可远程引入JSONPlaceholder的数据

  技术分享图片

 技术分享图片

九、若接口地址过多,可新建一个readme.txt,将其拷贝以便查阅

 技术分享图片

十、当接口数据返回过多,不便查阅时,可借助POSTman查阅

 技术分享图片

json-server使用总结

标签:nbsp   20px   read   直接   根据   跨域   技术分享   package   margin   

原文地址:https://www.cnblogs.com/spencer66/p/9263357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!