Json-Server模拟数据接口开发

前端开发过程中调用后台接口是常事,在前后台定义好接口规范和参数后,后台接口的进度有时会成为我们的掣肘,这里推荐使用一款简单的小工具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地址:https://github.com/typicode/json-server

posted @ 2017-08-26 14:18  学习会让你青春永驻  阅读(...)  评论(...编辑  收藏