json-server使用与postman

json-server:Get a full fake REST API_官方教程

json-server安装与基础配置

1.先全局安装json-server:npm install -g json-server

2.新建一个文件夹,命名JSONSERVER,cd到这个目录下,初始化package.json文件:
在命令行输入:npm init,回答里面的问题,
可以一路回车(相当于直接在命令行输入npm init --yes),此时文件夹下会有一个package.json文件

{
  "name": "JSONSERVER",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3.局部安装json-server:
在JSONSERVER文件夹下:npm install json-server --save
package.json文件被更新,在文档添加了以下内容:

"dependencies": {
    "json-server": "^0.16.3"
  }

4.添加命令行快捷的开启方式:
在package.json文件中的scripts添加开启json-server的命令:

"json:server": "json-server --watch db.json"

在这里插入图片描述
保存之后可以在命令行启动json-server:
在这里插入图片描述
在浏览器打开所给链接,就可以看到欢迎界面,里面会展示你配置的数据(下面会写数据的创建)
在这里插入图片描述

修改json-server默认端口号

可以在启动命令后加–port 3004,修改端口号为3004

"scripts": {
    "json:server": "json-server --watch db.json --port 3004"
  }

数据添加

在JSONSERVER文件夹下创建一个db.json文件,并添加数据,列举部分数据如:

{
  "users": [
    {
      "name": "ccy",
      "phone": "333-444-555",
      "email": "ccy@mail.com",
      "id": 1,
      "age": 31,
      "companyId": 1
    },
    {
      "name": "ccy1",
      "phone": "333-444-555",
      "email": "ccy@mail.com",
      "id": 2,
      "age": 32,
      "companyId": 2
    },
    {
      "name": "ccy2",
      "phone": "333-444-555",
      "email": "ccy@mail.com",
      "id": 3,
      "age": 43,
      "companyId": 3
    }
  ],
  "companies":[
  		{...},
  		{...},
  		{...}
  ],...
}

与postman结合使用

使用postman操作数据
1.post发送
在这里插入图片描述
db.json里面可以看到,已经添加了该数据:
在这里插入图片描述
在浏览器里输入:http://localhost:3000/users,也可以看到:
在这里插入图片描述

2.delete删除:按id删除,删除成功时,在结果栏会显示{}
在这里插入图片描述

3.patch更新:
原本数据:

{
      "name": "ccy5",
      "phone": "333-444-555",
      "email": "ccy@mail.com",
      "id": 5,
      "age": 43,
      "companyId": 3
    }

修改name为anzhi:
在这里插入图片描述
结果:
在这里插入图片描述

对数据的修改都可以在命令行里看到:
上面列举的三个操作分别是:
在这里插入图片描述

评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值