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：删除某个用户