JSONSERVER接口调试工具安装配置

go4it 发布于2019-08-26 12:11 / 1949人阅读

摘要：安装安装环境一路回车安装环境配置编辑注意修改这边创建测试数据文件内容如下启动启动访问浏览器打开即可看到刚刚写的内容接口请求获取所有的用户信息获取为的用户信息获取的信息获取单个的信息获取到的为的根

安装jsonserver 安装环境

npm install -g json-server
D:studyvue-studyuser-mange>cd JSONSERVER
D:studyvue-studyuser-mangeJSONSERVER>npm init   #一路回车
D:studyvue-studyuser-mangeJSONSERVER>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":"wanghui@qq.com",
            "id":1,
            "age":18,
            "companyId":1
        },
        {
            "name":"liangjie",
            "phone":"13009889812",
            "email":"liangjie@qq.com",
            "id":2,
            "age":28,
            "companyId":2
        },
        {
            "name":"lijiaojiao",
            "phone":"18009889812",
            "email":"lijiaojiao@qq.com",
            "id":3,
            "age":38,
            "companyId":3
        },
        {
            "name":"shasha",
            "phone":"13309889812",
            "email":"shasha@qq.com",
            "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:studyvue-studyuser-mangeJSONSERVER>npm run json:server   #启动

> jsonserver@1.0.0 json:server D:studyvue-studyuser-mangeJSONSERVER
> 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":"122725501@qq.com",
    "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:studyvue-studyuser-mangeJSONSERVER>npm run json:server:remote

参考

json-server

云服务器 GPU云服务器调试工具 UNIX调试工具 webrtc 调试工具接口参数调试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108174.html

从零开始创建 angularjs-gulp-es5 项目

摘要：为了动态插入新加的和文件且添加的文件有一定顺序，安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线，继续创建一些。有时间会加入校验添加，添加等等。。。源码地址：https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意，此项目为angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 评论0 收藏0
从零开始创建 angularjs-gulp-es5 项目

摘要：为了动态插入新加的和文件且添加的文件有一定顺序，安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线，继续创建一些。有时间会加入校验添加，添加等等。。。源码地址：https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意，此项目为angular-gulp-seed mkdir angu...

hedzr 2019-08-01 15:56 评论0 收藏0
顶级测试框架Jest指南：跑通一个完美的程序，就是教出一群像样的学生

摘要：课堂互动回调函数中运行测试，调动孩子们的课堂积极性。函数，随时记录函数运行状态测试同步返回值异步返回值，就像是上课，这只是老师的本份。她平时混迹在普通学生之中，或者说，她就是一名再普通不过的学生。而最新的技术栈正在全面采用测试框架。 facebook三大项目：yarn jest metro，有横扫宇宙之势。而jest项目的宗旨为：减少测试一个项目所花费的时间成本和认知成本。 ——其实...

ysl_unh 2019-08-23 11:58 评论0 收藏0
急速JavaScript全栈教程

摘要：使用访问后端服务使用的美化组件的方法整合全栈服务其中的指的是。所幸是在这个教程内，你不需要学习太多就可以把案例跑起来。另外一个组件负责显示全部项目，并接受删除事件，删除指定的项目。它们分别是组件和组件这两个组件的代码实现，分别在文件和内。自从一年前发布了Vuejs小书的电子书，也有些日子没有碰过它们了，现在因为项目的缘故，需要使用JavaScript全栈开发。所以，我得把这个全栈环境...

xingqiba 2019-06-26 17:46 评论0 收藏0
急速JavaScript全栈教程

摘要：使用访问后端服务使用的美化组件的方法整合全栈服务其中的指的是。所幸是在这个教程内，你不需要学习太多就可以把案例跑起来。另外一个组件负责显示全部项目，并接受删除事件，删除指定的项目。它们分别是组件和组件这两个组件的代码实现，分别在文件和内。自从一年前发布了Vuejs小书的电子书，也有些日子没有碰过它们了，现在因为项目的缘故，需要使用JavaScript全栈开发。所以，我得把这个全栈环境...

骞讳护 2019-08-26 12:18 评论0 收藏0