API调试工具 Postman扩展插件安装与使用

偏执的太偏执、 2022-05-21 05:43 440阅读 0赞

*  安装
 *  使用
 *  demo
    
     *  快速搭建一个 JSON服务器来测试接口
     *  GET
     *  POST
     *  PUT
     *  DELETE

Postman是基于 Chrome 浏览器的扩展插件

*  允许用户发送任何类型的 HTTP 请求，例如 GET，POST，HEAD，PUT、DELETE等，并且可以允许任意的参数和 Headers
 *  支持不同的认证机制，包括 Basic Auth，Digest Auth，OAuth 1.0，OAuth 2.0等。
 *  响应数据是自动按照语法格式高亮的，包括 HTML，JSON和XML。

# 安装 #

会翻墙的同志请直接谷歌商店搜索安装，这里只介绍离线安装

离线扩展压缩包 [https://wildye.cn/lib/chrome/postman.zip][https_wildye.cn_lib_chrome_postman.zip]

*  下载压缩包，解压到任意位置
 *  打开开发者模式，点击 加载已解压的扩展程序  
    ![这里写图片描述][20180701082224212]
 *  找到解压的位置，确定  
    ![这里写图片描述][20180701090611582]
 *  完成后会发现开始菜单多了个 Postman，安装完毕  
    ![这里写图片描述][20180701090817887]

# 使用 #

*  打开 Postman，第一次运行会转到登陆页  
    ![这里写图片描述][20180701091503480]  
    
    
     *  登陆，跳过即可，如果不需要团队协作的话  
        ![这里写图片描述][20180701091633664]
     *  常用的功能  
        ![这里写图片描述][20180701092251433]  
        
        
        1.  导入：用于导入保存的API请求文件，json格式
        2.  新建文件夹：用于API请求进行分类管理
        3.  下载：下载测试通过的API请求，可编辑的json格式
        4.  保存请求：保存API请求，返回值也能保存

# demo #

## 快速搭建一个 JSON服务器来测试接口 ##

![这里写图片描述][20180701104619611]

*  `package.json`

{
      "name": "rest-api-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { "server": "json-server db.json", "test": "..." },
      "keywords": [],
      "author": "",
      "license": "ISC" }

*  `db.json`  
    存放模拟接口返回的数据

{
        "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ],
        "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ],
        "profile": { "name": "typicode" } }

*  命令行进入 rest-api-demo 目录，执行

npm install -S json-server
    npm run server

搭建完成  
![这里写图片描述][20180701102450810]

## GET ##

获取数据  
向 `http://localhost:3000/posts` 发出 `GET` 请求  
![这里写图片描述][2018070111471845]  
可传入参数获取具体数据  
向 `http://localhost:3000/posts/1` 发出 `GET` 请求  
![这里写图片描述][20180701114051705]

{
      "id": 1,
      "title": "json-server",
      "author": "typicode" }

## POST ##

添加数据

*  设置数据体 `Body` 选择 `x-www-form-urlencoded` 编码
 *  然后添加数据，字段需与接口数据一致，发送请求  
    ![这里写图片描述][20180701112218871]
 *  GET获取数据，可以发现新增了一段数据  
    ![这里写图片描述][20180701112329772]

## PUT ##

更新数据

*  选择具体的更新对象，通过传递参数选择 [http://localhost:3000/comments][http_localhost_3000_comments]`/2`
 *  设置数据体 `Body` 选择 `x-www-form-urlencoded` 编码
 *  然后设置更新字段数据，发送请求  
    ![这里写图片描述][20180701112832501]
 *  GET获取数据，数据已更新  
    ![这里写图片描述][20180701113251250]

## DELETE ##

删除数据

*  向 `http://localhost:3000/comments/2` 发出 `DELETE` 请求
 *  注意带参数，否则会删除全部  
    ![这里写图片描述][20180701113651335]
 *  GET获取数据，可以看到第二条数据已删除  
    ![这里写图片描述][20180701113759736]

[https_wildye.cn_lib_chrome_postman.zip]: https://wildye.cn/lib/chrome/postman.zip
[20180701082224212]: /images/20220521/4cbf2e27c052484b85b2595a3cb642fa.png
[20180701090611582]: /images/20220521/8e41f9185ead4546acf1c1bde334f00d.png
[20180701090817887]: /images/20220521/26364e4fa87942e29360f2706729bc67.png
[20180701091503480]: /images/20220521/56b4b9f06dfa48e9a8484f9a8141e21e.png
[20180701091633664]: /images/20220521/b186831830c64800bdca5ba82224e745.png
[20180701092251433]: /images/20220521/fd5c488b9b6d42c9b0d30e28a7f999c4.png
[20180701104619611]: /images/20220521/92e8a95fb3db47e7a128a36d3d55ebfa.png
[20180701102450810]: /images/20220521/e81a8fa5f24a479b9f9ecceff9d454bd.png
[2018070111471845]: /images/20220521/46e3bd160b5944cbac34e6fcc267357c.png
[20180701114051705]: /images/20220521/0e9b2165ba6d4e2986a7008486744ad4.png
[20180701112218871]: /images/20220521/673a484c0b06400ca6d859f40dab8f83.png
[20180701112329772]: /images/20220521/703d7448ce6f4adca57ed22e20c787af.png
[http_localhost_3000_comments]: http://localhost:3000/comments
[20180701112832501]: /images/20220521/790dde2e5185466e9994d813b4598325.png
[20180701113251250]: /images/20220521/7cc2d77b9e784e5c91abeb02b3d6d6eb.png
[20180701113651335]: /images/20220521/0aad1a1770444ca7880927470c30d462.png
[20180701113759736]: /images/20220521/5579ce225c6a4d34b57fd86c9311ddd1.png