前端开发中,接口多半是滞后于页面开发的,这时候就需要我们自己来模拟一些数据:
首先安装node.js(简单。不再演示)
1.全局安装json-server:
npm install json-server -g或cnpm install json-server -g

2.开始配置
1.新建一个test文件,在test里新建一个db.json文件(此文件用来放虚拟数据),在db.json中写入以下数据↓↓↓↓↓↓

2.打开命令行,进入test文件下,输入命令:json-server db.json -p 3000

3.操作数据
1.查询数据
上一步成功后直接在浏览器打开localhost:3000/testData就可以查看数据了:

get:新建一个html文件,为了测试方便,引入一个在线jq地址,然后写个get请求


POST:在页面中写个添加按钮,类名为add,点击add触发post添加id为3的新数据


PUT:在页面中写个修改按钮,类名为change,点击change触发put修改id为2的数据


DELETE:在页面中写个删除按钮,类名为delete,点击delete删除id为3的数据


好了,增删改查全部成功,接下来对操作进行简化及优化
在test文件下新建package.json文件(这样做是用来简化启动server服务的步骤)

这样,直接在命令行输入npm run server就OK了 不用每次启动都输入一长串的json-server********
网友评论