使用Fetch API 实现学生信息的CRUD操作(1)---json-server
程序员文章站
2022-07-10 10:19:34
...
目录
背景
现在web 流行前后端分离,后端负责提供数据,前端通过请求api 接口获取数据。那我们可以自己mock(模拟)数据,先进行测试,最后改改接口就好。
什么是json-server
json-server是一个 npm 包,可以给前端提供mock数据(前端开发设计测试数据,进行测试)。
启动json-server,开启服务,让前端使用fetch获取模拟的数据。
优点
- 可以自己在本地设计mock数据
- 可以对数据进行CRUD操作,通过 请求方式 + 请求 url 地址
具体使用
-
全局安装(node一定要安装)
npm install -g json-server
-
创建一个db2.json文件
数据必须要有id属性,json要用双引号{ "contacts": [ { "name": "A", "email": "aaa@qq.com", "contactno": "11130", "id": 7 } ], "contacts2": [ { "name": "DD", "email": "aaa@qq.com", "contactno": "111130", "id": 8 } ], "contacts3": [ { "name": "FFF", "email": "aaa@qq.com", "contactno": "111111130", "id": 9 }, { "name": "CCC", "email": "aaa@qq.com", "contactno": "114130", "id": 10 } ] }
-
使用命令行,执行
json-server --watch db.json json-server --watch db.json --port 3004 //使用其他端口
- contacts/contacts1/contacts2 是db.json文件创建的数据
- get /post/put/patch/delect/options 是可以请求的方法
-
查看 http://localhost:3000/contacts
-
常见查看数据方式(获取,查询,分页,模糊搜索)
http://localhost:3000/db //访问db.json内容 http://localhost:3000/contacts3 //访问contacts3内容 http://localhost:3000/contacts3/10 //访问contact3底下id为10的用户 http://localhost:3000/contacts3?id=9 //访问contact3底下id为9的用户 http://localhost:3000/contacts3?name=CCC //访问contact3底下用户名为CCC的用户 http://localhost:3000/contacts3?name=CCC&name=FFF //访问contact3底下用户名为CCC以及FFF的用户 http://localhost:3000/contacts3?_page=1&_limit=1 //访问contact3,一页只显示一条数据 //分页查询 参数为 _start, _end, _limit,从0开始计数 http://localhost:3000/contacts3?_sort=id&_order=desc //访问contact3,数据根据id降序(desc 降序,asc升序) //操作符 _gte, _lte, _ne, _like, _gte大于,_lte小于, _ne非, _like模糊查询 http://localhost:3000/contacts3?q=9 //访问contact3,带数字9的用户,q全局搜索(模糊查询)
参考链接
https://www.npmjs.com/package/json-server
https://blog.csdn.net/ghost_violets/article/details/102754608
上一篇: CORS跨域
下一篇: easyMock本地化搭建