利用json-sever搭建一个本地的数据接口进行增删改查
https://github.com/typicode/json-server
1.安装json-server
全局安装json-server
npm install -g json-server
弹出版本号表示安装成功
1.安装完成之后创建一个文件夹
2.创建完文件夹之后在当前文件夹初始化
npm init --yes
初始化完之后会在文件夹下多一个package.json文件
3.之后在当前文件夹下安装需要的依赖,也就是刚刚在全局安装过的json-server
npm install json-server --save
安装成功之后打开package.json
如果刚才打开过package.json的话会发现多出一条dependencies 依赖信息
2.调整json-server的启动方式
打开github找到Start JSON Server
json-server --watch db.json
db.json可以是自己创建的名字自己改，我改的是school.json
可以在终端直接输入这个监听db.json
也可以在package.json里配置
直接复制这条放到package.json的"test"里边
"test"也可以修改一个自己的名字
这是我修改完成的
3.创建json文件
在当前文件夹下创建一个json文件
把需要的数据写在json文件中
{
"users": [
{
"name": "张敢",
"age": 14,
"sex": "male",
"hobbit": "篮球",
"achievement": "bad",
"id": 1,
"schoolId": 1
},
{
"name": "大傻",
"age": 15,
"sex": "male",
"hobbit": "铅球",
"achievement": "bad",
"id": 2,
"schoolId": 2
},
{
"name": "周芷若",
"age": 18,
"sex": "Female",
"hobbit": "古筝",
"achievement": "good",
"id": 3,
"schoolId": 3
},
{
"name": "凯子",
"age": 20,
"sex": "male",
"hobbit": "足球",
"achievement": "bad",
"id": 4,
"schoolId": 3
}
],
"schools": [
{
"id": 1,
"name": "龙城小学",
"description": "小学生读的"
},
{
"id": 2,
"name": "龙城初中",
"description": "初中生读的"
},
{
"id": 3,
"name": "龙城高中",
"description": "高中生读的"
}
]
}
这是我随便创建的一个json文件
接着就可以启动json-server了
启动json-server
npm run json:server
json:server就是修改了"test"的名字
启动之后会打开一个localhost:3000的端口
接着就可以访问这个端口了,也可以在这个端口添加/user就可以访问到对应的json数据
成功搭建json-server
测试get请求
get请求直接在浏览器url中输入就可以
创建一个README.md文件记录操作方式
常用的一些方法
//获取所有用户信息
http://localhost:3000/users
//获取id为1的用户信息
http://localhost:3000/users/1
//获取学校的所有信息
http://localhost:3000/schools
//获取单个学校的信息
http://localhost:3000/schools/1
//获取所有公司id为1的用户信息
http://localhost:3000/schools/1/users
//根据学校名字获取信息
http://localhost:3000/schools?name=龙城高中
//根据多个名字获取学校信息
http://localhost:3000/schools?name=龙城小学&name=龙城初中
//获取一页中的两条数据
http://localhost:3000/schools?_page=1&_limit=2
//asc升序 desc降序排序
http://localhost:3000/schools?_sort=name&_order=asc
//获取年龄15及以上的用户信息
http://localhost:3000/users?age_gte=15
//获取年龄15-18之间的用户信息
http://localhost:3000/users?age_gte=15&age_lte=18
//搜索用户信息
http://localhost:3000/users?q=张敢
测试post和其他请求方式
安装一个软件postMan
下载地址https://www.getpostman.com/downloads/
测试post需要配置下请求头
随便写点数据
点击send,就可以发现package.json文件多出了这条数据这就说明post请求已经成功了
测试DELETE请求
当点击Send之后会发现package.json刚post请求的数据已经没有了.
PATCH更新请求
第一条数据名字为张敢和学习成绩比较差的同学给开除啦,
学习成绩较好的俊俊同学替代了这位小张同学
最后拿到JSONPlaceholde里面的数据
Remote schema
You can load remote schemas.
json-server http://example.com/file.json
json-server http://jsonplaceholder.typicode.com/db
复制第二条
添加至第八行
重启一下终端就可以拿到JSONPlaceholder里的数据了
网友评论