json-server mock 数据

文章目录

• ​​安装​​

• ​​1. 全局安装​​
• ​​2. 创建项目文件夹​​
• ​​3. 初始化​​
• ​​4. 安装依赖​​
• ​​5. 创建 db.json​​
• ​​6. 修改 package.json​​
• ​​7. 运行 json-server​​

• ​​使用​​

• ​​1. POST​​
• ​​2. GET​​
• ​​3. PUT​​
• ​​4. DELETE​​

• ​​采用 REST API​​

​​json-server​​ 主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用

​​关于在线接口Mock工具 fastmock 请点击查看​​

安装

1. 全局安装

​​全局安装 json-server​​​：​​npm install -g json-server​​

2. 创建项目文件夹

创建一个文件夹(不要用 ​​json-server​​​ 为名字，否则会报错哦)，并进入：​​mkdir MyJsonServer​​​ ， ​​cd MyJsonServer/​​

3. 初始化

初始化 ​​package.json​​​ 文件： ​​npm init --yes​​（之后我们的文件夹中就会有一个package.json的文件）

4. 安装依赖

安装 ​​json-server​​​ 模块：​​npm install json-server --save​​

5. 创建 db.json

创建 ​​db.json​​ 文件，并且往里面添加内容，注意一点，json 文件中必须使用双引号， 不能使用单引号，否则会出现很多错误，导致无法使用（注意格式别写错）

{
  "users": []
}

6. 修改 package.json

修改 ​​package.json​​​ 文件，用于启动 ​​json-server​​，端口为3000：

​​"json-server": "json-server db.json --watch --port 3000"​​

{
  "name": "MyJsonServer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "json-server": "json-server db.json --watch --port 3000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.16.3"
  }
}

7. 运行 json-server

运行 ​​json-server​​​：​​npm run json-server​​

使用

这里我们使用 ​​postman​​ 来模拟接口请求

1. POST

向 ​​users​​ 中 插入新数据：

​​db.json​​ 文件中插入了 2 条新数据

2. GET

获取 ​​users​​ 中 所有/指定 的数据：

3. PUT

更新指定数据：

​​db.json​​​ 文件中更新了 ​​id=2​​ 的数据

4. DELETE

删除指定数据：

​​db.json​​​ 文件中删除了 ​​id=2​​ 的数据

采用 REST API

• GET /users：列出所有用户
• POST /users：新建一个用户
• GET /users/ID：获取某个指定用户的信息
• PUT /users/ID：更新某个指定用户的信息（提供该用户的全部信息）
• PATCH /users/ID：更新某个指定用户的信息（提供该用户的部分信息）
• DELETE /users/ID：删除某个用户