前端开发过程中调用后台接口是常事,在前后台定义好接口规范和参数后,后台接口的进度有时会成为我们的掣肘,这里推荐使用一款简单的小工具json-server,小而轻便。
确保本地已有node环境。
一:安装json-server
npm install -g json-server
二:创建json-server文件
在项目文件夹创建一个文件夹,随意命名,这里命名为API-server,在API-server文件夹下创建json格式文件,这里命名为db.json。如下图:
三:创建数据并启动json服务
在第二部创建的db.json文件中填充json数据:如下图:
插入完数据后,cd 到 api-server文件夹下启动json服务,运行 json-server --watch db.json 如下图:运行完后本地就已经生成了两个API,在浏览器输入localhost:3000/posts就会出现相应数据,如下图:
四:进行应用
现在本地已经生成了相应的api接口,可以使用ajax进行相应接口调用,接口会返回相应的数据。如下图:或者是这样的 $.get('localhost:3000/posts',function(){});
五:修改监听端口
修改监听端口,可以开启多个终端进行多个json文件的监听 json-server --watch -port 8888 db.json(监听8888端口)
六:RESTful风格接口实现CURD:
RESTful API设计指南:推荐阮一峰的(http://www.ruanyifeng.com/blog/2014/05/restful_api.html)根据请求方法的不同来实现不同的目的
GET : 获取数据(获取表单列表数据)
POST : 新增数据(新增一个表单项) DELETE :删除数据(删除一条表单数据) PATCH :更新数据 (修改一条表单数据)//根据某个属性修改,上传修改的某个属性 PUT :更新数据(修改一条表单数据)//更新整条数据,上传修改的整条数据
七:数据过滤
数据过滤是json-server中非常强劲的功能,通过url加上简单的query字段,即可以过滤得到各种各样的数据
八:表单分页的简单实现
json-server的高级定义,高级过滤等(未完待续!!!)
github地址: