json-server增删改查

前端开发中,接口多半是滞后于页面开发的,这时候就需要我们自己来模拟一些数据:

首先安装node.js(简单。不再演示)

1.全局安装json-server:

npm install json-server -g或cnpm install json-server -g

没装淘宝镜像的用npm安装

2.开始配置

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

json-server增删改查_第1张图片
测试数据

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

json-server增删改查_第2张图片
成功

3.操作数据

    1.查询数据

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

json-server增删改查_第3张图片
直接通过地址查看数据

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

json-server增删改查_第4张图片
get获取
json-server增删改查_第5张图片
在console中查看get拿到的数据

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

json-server增删改查_第6张图片
post
新增一条数据

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

json-server增删改查_第7张图片
修改数据
json-server增删改查_第8张图片
数据修改成功

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

json-server增删改查_第9张图片
删除请求
删除成功

好了,增删改查全部成功,接下来对操作进行简化及优化

在test文件下新建package.json文件(这样做是用来简化启动server服务的步骤)

json-server增删改查_第10张图片
package.json中写入以上代码

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

你可能感兴趣的:(json-server增删改查)