json-server

• json-server使用教程
• • 修改json-server端口号启动
  • 1、全局安装json-server
  • 2、在根目录生成一个db.json
  • 3、启动 访问
• react中进行使用
• • react中修改json-server启动端口号
  • 1、 第一步也是安装，和第一种一样
  • 2、在根路径下定义一个__json_server_mock__文件夹
  • 3、在react中进行编辑
  • 4、启动 运行
• 增删改查
• • 1.接口规则-RESTful
  • 2.以axios作为增删改查请求
  • **实例代码**
• **如有问题请联系小编，及时进行更改**

json-server使用教程

修改json-server端口号启动

json-server --watch db.json --port 3004

1、全局安装json-server

安装：npm i json-server -g

2、在根目录生成一个db.json

在json文件中定义以下类型

{"list": [{"id": 1,"name": "吃饭","flag": false},{"id": 2,"name": "睡觉","flag": true},{"id": 3,"name": "打豆豆","flag": true}],"login":{"username":"admin","password":"123456"}
}

3、启动 访问

启动json-server: json-server --watch db.json

访问抛出的接口就能够在浏览器中获取

react中进行使用

react中修改json-server启动端口号

yarn run json-server --port 3004 

1、 第一步也是安装，和第一种一样

2、在根路径下定义一个__json_server_mock__文件夹

在该文件夹下定义db.json文件

3、在react中进行编辑

在package.json中的script 添加"json-server":
"json-server __json_server_mock__/db.json --watch"

4、启动 运行

npm run json-server \ yarn run json-server

增删改查

1.接口规则-RESTful

目标：了解一种接口定义规范resetful

接口规范：如何定义接口地址，请求方式，传参方式，对应不同的请求操作行为。
具体规则：

查询的时候还有一下规则：

• 1、http://localhost:3000/db 访问的是db.json文件下的所有内容；
• 2、http://localhost:3000/layoutList?categoryName= 模拟接口参数可筛选该目录下内容
• 3、分页查询 参数为 _start, _end, _limit，并可添加其它参数筛选条件
  如：http://localhost:3000/posts?_start=6&_limit=3
  http://localhost:3000/posts?_start=3&_end=6
• 4、排序 参数为_sort, _order
  如：http://localhost:3000/posts?_sort=id&_order=asc
  http://localhost:3000/posts?_sort=user,views&_order=desc,asc
• 5、操作符 _gte, _lte, _ne, _like
  _gte大于，_lte小于， _ne非， _like模糊查询
• 6、q全局搜索（模糊查询）

这个表格可以作为接口调用的参考。

2.以axios作为增删改查请求

axios的使用：

• 查询所有

• 查询单个

• 添加操作

• 删除操作

• 修改操作

实例代码

如有问题请联系小编，及时进行更改