postman 请求结果可视化

可视化区域如下图:

• postman可视化区域可以根据用户定义的模板可视化展示数据
• 可视化区域还可以更形象的展示请求数据是否正确。
• postman 模板采用数据绑定的方式，语法和小程序，vue，angular极其显示。
• 编写可视化模板和脚本需要有一定的css，html和js基础。（入门即可）

第一步：请求数据

{
    "total": 2,
    "code": 200,
    "data": [
        {
            "id": "100001",
            "name": "鞠婧祎",
            "status": "3",
            "type": "3",
            "userId": "DRR"
        },
        {
            "id": "100002",
            "name": "迪丽热巴",
            "status": "3",
            "type": "3",
            "userId": "DRR"
        }
    ]
}

• 请求数据如上所示，接下来定义可视化模板

第二步：添加模板

var template = `
    <style type="text/css">
        .tftable {font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #87ceeb;border-collapse: collapse;}
        .tftable th {font-size:18px;background-color:#87ceeb;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;text-align:left;}
        .tftable tr {background-color:#ffffff;}
        .tftable td {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;}
        .tftable tr:hover {background-color:#e0ffff;}
    </style>

    <table class="tftable" border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>状态</th>
            <th>类型</th>
            <th>用户ID</th>
        </tr>

        {{#each response.data}}
            <tr id=row_{{@key}} onClick="handleClick(this.id)">
                <td>{{@key}}</td>
                <td>{{name}}</td>
                <td>{{status}}</td>
                <td>{{type}}</td>
                <td>{{userId}}</td>
            </tr>
        {{/each}}
    </table>
`;

• 注意 模板声明使用的是 ` 而不是 ’ ,这一点和vue 颇为相似，这个符号在 1键 左边 。

语法 （与小程序，vue，angular语法是否显示）

1 {{#each 数组}} 表示遍历数组，{{/each}} 为遍历的结束标签。
2 {{对象名}} 可以取出 数组对象的相应元素，例如 {{name}} 取出的就是 name属性的数据
3 {{@key}} 可以取出数组下标。

第三步，应用模板

pm.visualizer.set(template, {
    response: pm.response.json()
});

语法

pm.visualizer.set(模板名，数据);

第四步，请求并查看结果

可视化结果如下：

总结

• 以上只是简单的应用了postman 结果可视化，如果需要展示图表信息，或者更漂亮的信息，可以引用第三方的插件，例如 D3.js，echarts.js
• 如果引用第三方资源给大家推荐一个网站 https://www.bootcdn.cn/ ，特别全，而且可以自己通过互联网引用。