json-server增删改查
2017-10-12 本文已影响425人
RtyXmd
前端开发中,接口多半是滞后于页面开发的,这时候就需要我们自己来模拟一些数据:
首先安装node.js(简单。不再演示)
1.全局安装json-server:
npm install json-server -g或cnpm install json-server -g
没装淘宝镜像的用npm安装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请求
get获取 在console中查看get拿到的数据POST:在页面中写个添加按钮,类名为add,点击add触发post添加id为3的新数据
post 新增一条数据PUT:在页面中写个修改按钮,类名为change,点击change触发put修改id为2的数据
修改数据 数据修改成功DELETE:在页面中写个删除按钮,类名为delete,点击delete删除id为3的数据
删除请求 删除成功好了,增删改查全部成功,接下来对操作进行简化及优化
在test文件下新建package.json文件(这样做是用来简化启动server服务的步骤)
package.json中写入以上代码这样,直接在命令行输入npm run server就OK了 不用每次启动都输入一长串的json-server********