使用JSON Server在项目中配置Mock数据以及json server的基本数据操作

1、项目根目录下键入:

yarn add json-server -D

等待安装成功。

2、在项目根目录下新建文件夹“__json_server_mock__”.

这个文件夹名字前后代两个杠,代表这个文件夹实际与本项目代码关系不大。

3、在此新建文件夹中创建文件“db.json”,写入:

{
    "user":[]
}

4、再在package.json中找到以下代码,并添加代码:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
   添加这一行: "json-server":"json-server __json_server_mock__/db.json --watch"
  },

5、运行JSON Server:

npm run json-server

6、打开调试接口的软件,随便啥都行,我用的postman:

使用JSON Server在项目中配置Mock数据以及json server的基本数据操作_第1张图片

7、使用规范添加数据:

使用JSON Server在项目中配置Mock数据以及json server的基本数据操作_第2张图片

这里使用post添加数据,最后可以看到结果:

使用JSON Server在项目中配置Mock数据以及json server的基本数据操作_第3张图片

在这里需要注意的是,如果你使用post添加数据的结果只能添加id

那么注意在请求头中这样写:使用JSON Server在项目中配置Mock数据以及json server的基本数据操作_第4张图片

 8、修改数据

首先在接口后面添加/1来定位id为1的资源

http://localhost:3000/users/1

再使用patch操作进行修改:

使用JSON Server在项目中配置Mock数据以及json server的基本数据操作_第5张图片

 结果是:

使用JSON Server在项目中配置Mock数据以及json server的基本数据操作_第6张图片

 9、删除数据,首先通过接口对要删除那一个资源进行定位

例如:

http://localhost:3000/users/5

就是对id=5的资源进行了定位。

然后,直接使用delete就可以删除相应资源。

你可能感兴趣的:(React学习,JavaScript学习,项目开发,json,前端,测试工具,windows,server,postman)