网站内链案例常德论坛尚一网
JSON-Server基础使用
JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。 json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。
安装配置
- 查看是否安装node
node -v
- 查看是否安装npm
npm -v
- 安装json-server
npm install -g json-server
- 查看json-server的版本
json-server --version
![[0679a6f4-127a-4590-b2b7-ea8f008ed7a6.png]]
- 配置db.json文件
{"student": [{"id": 1000,"uname": "小明","class": "web前端","msg": "我叫小明，明天的明","age": 19},{"id": 1001,"uname": "小红","class": "java开发","msg": "我叫小红，红色的红","age": 20}],"tableList":['首页','公司概况','云和教育','云和技术','云和服务','云和国际','云和网课','云和招聘']
}
- 启动json-server
json-server
- json-server --watch db.json[文件名称] 注意： db.json为json文件的名称，你自己的文件名叫什么，就启动对应的文件就可以了 启动json-server的时候，必须在你db.json所在的文件夹下进行启动
这样服务器就可以启动成功了，可以通过配置db.json文件，访问服务器里面的数据 访问地址：127.0.0.1:3300/student
使用json-server实现增删改查
- 添加数据 post请求
在apifox中创建一个 快捷调试
![[b5903a9d-981a-4921-9b8b-a01696804f99.png]]
直接点击发送，当body中返回下面内容，表示添加成功
![[7b299a64-7e96-472a-b67e-52880ed9daf1.png]]
注意：不需要添加id，他会自动添加id值
- 获取指定id的数据
请求格式： get /资源名 获取所有的资源 get /资源名/:id 获取id为对应id的资源
![[f407cdb0-b9f1-49a3-87f0-7f865086f9ba.png]]
- 修改数据 - put
修改的时候需要传递id，并且重制要修改的字段
![[24e2c837-8c6d-4aa3-a948-112cea0fec3a.png]]
除了使用put可以修改时数据以外，还可以使用patch修改数据 - 删除数据 - delete
删除数据，只需要在上面传递要删除的id号 总结：json-server中使用的六个接口
![[0a0e61a9-da5a-45dd-a338-4570d4cab261.png]]
-
get /资源名 获取所有的资源
-
get /资源名/:id 获取id为对应id的资源
-
post /资源名 创建一个新的资源
-
put /资源名/:id 修改id为对应id的资源，覆盖更新
-
patch /资源名/:id 修改id为对应id的资源 局部更新
-
delete /资源名/:id 删除对应id的资源
常用功能及参数
- 实现分页效果
_ page 表示请求第几页_ _ limit 表示一页显示多少条数据
官方文档提到，0.17版本就不要使用_limit了，需要使用_per_page
所以语法格式为 http://localhost:3000/student?_page=3&_per_page=2
![[31d81e36-ae40-4f43-a793-bb2d6404690a.png]]
- 查询到指定姓名的用户信息
根据相关字段，查询到对应的结果 写字段的名字，跟着要查询的只。例如：?name=李四 示例：
![[e3157add-ae9e-4fa7-b5f7-1410907fb924.png]]
排序
默认为升序
sort 根据某个字段排序
asc 升序；desc 降序
localhost:3000?sort 根据某个字段排序
示例：倒序请求方式http://localhost:3000/uname/?_sort=id&_order=asc
![[66e0d7b2-a0db-4c13-8206-e0f15fa9ec42.png]]
10. 模糊查询
通过使用对应 “字段名_like”的形式，我们可以对对应的字段进行模糊查询
localhost:3000?name_like=李
查找所有姓名中包含李的人员信息
示例：查询所有名字李包含张的：
http://localhost:3000/uname/?name_like=张
![[3a4e25a8-7072-490f-a30e-39dc8501c7e1.png]]
mock数据的使用
什么事mock数据
前端可以使用mock（假数据），模拟开发中用到的数据
使用场景
-
后台支持未完成
-
前后端并行开发，此时没有后端数据
mock数据的优势
团队并行开发，测试驱动，演示，隔离数据等 没有跨域问题，直接测试就行
mock语法
使用的是json格式，随机内容的生成
![[870d453e-00b9-4116-b48a-bd8063ffe1f4.png]]
可以mock数据的网站有很多
比如：https://www.fastmock.site/ 基本上都大同小异