JSONSERVER接口调试工具安装配置

安装jsonserver

安装环境

npm install -g json-server
D:\study\vue-study\user-mange>cd JSONSERVER
D:\study\vue-study\user-mange\JSONSERVER>npm init   #一路回车
D:\study\vue-study\user-mange\JSONSERVER>npm install json-server --save   #安装

环境配置

编辑package.json
{
  "name": "jsonserver",
  "version": "1.0.0",
  "description": "test restful api",
  "main": "index.js",
  "scripts": { 
    "json:server": "json-server --watch db.json"     #注意修改这边
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.14.0"
  }
}

创建测试数据

- db.json文件内容如下：
{
    "users":[
        {
            "name":"wanghui",
            "phone":"13309889812",
            "email":"[e-mail]",
            "id":1,
            "age":18,
            "companyId":1
        },
        {
            "name":"liangjie",
            "phone":"13009889812",
            "email":"[e-mail]",
            "id":2,
            "age":28,
            "companyId":2
        },
        {
            "name":"lijiaojiao",
            "phone":"18009889812",
            "email":"[e-mail]",
            "id":3,
            "age":38,
            "companyId":3
        },
        {
            "name":"shasha",
            "phone":"13309889812",
            "email":"[e-mail]",
            "id":4,
            "age":18,
            "companyId":3
        }
    ],
    "companies":[
        {
            "id":1,
            "name":"QQ",
            "description":"QQ is Good"
        },
        {
            "id":2,
            "name":"Baidu",
            "description":"Baidu is Good"
        },
        {
            "id":3,
            "name":"ali",
            "description":"ali is Good"
        }
    ]
}

启动JSONSERVER

D:\study\vue-study\user-mange\JSONSERVER>npm run json:server   #启动

> jsonserver@1.0.0 json:server D:\study\vue-study\user-mange\JSONSERVER
> json-server --watch db.json


  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/users
  http://localhost:3000/companies

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

访问

浏览器打开http://localhost:3000/ 即可看到刚刚写的内容

PostMan接口请求

获取所有的用户信息

http://localhost:3000/users

获取id为1的用户信息

http://localhost:3000/users/1

获取companies的信息

http://localhost:3000/companies

获取单个company的信息

http://localhost:3000/companies/1

获取到companies的id为3的user

http://localhost:3000/companies/1/users

根据公司名字获取信息

http://localhost:3000/companies?name=QQ

获取两个名称的公司信息

http://localhost:3000/companies?name=QQ&name=Baidu

获取一页当中的两个数据（分页）

http://localhost:3000/companies?_page=1&_limit=2

根据公司名称升降序排序

http://localhost:3000/companies?_sort=name&_order=asc    #升序
http://localhost:3000/companies?_sort=name&_order=desc   #降序

根据年龄为18和18以上的

http://localhost:3000/users/?age=18    # age等于18的
http://localhost:3000/users/?age_gte=18  # age大于18的
http://localhost:3000/users/?age_gte=18&age_lte=28  #age大于18小于28的

搜索用户信息

http://localhost:3000/users/?q=w          #模糊搜
http://localhost:3000/users/?q=wanghui    #精确搜

POST提交信息（要利用POSTMAN）

注意HEADERS：
[{"key":"Content-Type","value":"application/json","description":""}]

POSTMAN创建用户提交信息

{
    "name":"米斯特王",
    "email":"[e-mail]",
    "companyId":3
}

DELETE

DELETE http://localhost:3000/users/5      #删除id=5的

PATCH更新数据

PATCH http://localhost:3000/users/3
body:
{
    "name":"米斯特王"
}

Remote数据接入JSONSERVER

修改配置文件

{
  "name": "jsonserver",
  "version": "1.0.0",
  "description": "test restful api",
  "main": "index.js",
  "scripts": {
    "json:server": "json-server --watch db.json",
    "json:server:remote":"json-server http://jsonplaceholder.typicode.com/db"   #追加的
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.14.0"
  }
}

启动项目

D:\study\vue-study\user-mange\JSONSERVER>npm run json:server:remote

参考

json-server