博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Json-Server模拟数据接口开发
阅读量:4971 次
发布时间:2019-06-12

本文共 1049 字,大约阅读时间需要 3 分钟。

前端开发过程中调用后台接口是常事,在前后台定义好接口规范和参数后,后台接口的进度有时会成为我们的掣肘,这里推荐使用一款简单的小工具json-server,小而轻便。

确保本地已有node环境。

一:安装json-server

npm install -g json-server

二:创建json-server文件

在项目文件夹创建一个文件夹,随意命名,这里命名为API-server,在API-server文件夹下创建json格式文件,这里命名为db.json。如下图:

1.PNG?version=1&modificationDate=1502332975000&api=v2

三:创建数据并启动json服务

在第二部创建的db.json文件中填充json数据:如下图:

2.PNG?version=1&modificationDate=1502333178000&api=v2

插入完数据后,cd 到 api-server文件夹下启动json服务,运行 json-server --watch db.json   如下图:

3.PNG?version=1&modificationDate=1502333338000&api=v2

运行完后本地就已经生成了两个API,在浏览器输入localhost:3000/posts就会出现相应数据,如下图:
4.PNG?version=1&modificationDate=1502333540000&api=v2

四:进行应用

现在本地已经生成了相应的api接口,可以使用ajax进行相应接口调用,接口会返回相应的数据。如下图:

5.PNG?version=1&modificationDate=1502333921000&api=v2

或者是这样的 $.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://www.cnblogs.com/blackgan/p/7435228.html

你可能感兴趣的文章
清北学堂2017NOIP冬令营入学测试P4749 F’s problem(f)
查看>>
POJ 1840 Eqs HASH
查看>>
python调用shell小技巧
查看>>
TL431的几种常用用法
查看>>
BZOJ 1833: [ZJOI2010]count 数字计数( dp )
查看>>
关于toString()和String()要说几句话
查看>>
bzoj 3751[NOIP2014]解方程
查看>>
CSS(二) 文字样式属性,背景和列表
查看>>
js 经典闭包题目详解
查看>>
在项目中移除CocoaPods
查看>>
面试题三 替换空格
查看>>
LeetCode104.二叉树最大深度
查看>>
linux usb驱动——Gadget代码介绍
查看>>
【洛谷】CYJian的水题大赛【第二弹】解题报告
查看>>
POJ 1703 Find them, Catch them【种类/带权并查集+判断两元素是否在同一集合/不同集合/无法确定+类似食物链】...
查看>>
L1-5. A除以B【一种输出格式错了,务必看清楚输入输出】
查看>>
Git一分钟系列--快速安装git客户端
查看>>
bzoj 3160 万径人踪灭 —— FFT
查看>>
poj3254二进制放牛——状态压缩DP
查看>>
使用 ref 和 out 传递数组注意事项
查看>>