【接口工具ApiPost】响应结果可视化定义使用(展示给客户和老板很有用)(7)

265 阅读1分钟

使用过程如下:

  1. 模板语法
  2. 响应数据变量
  3. 可视化方法

模板语法(javascript语言编写)

let template=` 
<h1>{{title}}</h1>
<table>
<tr>
   <td>Msg</td>
   <td>token</td>
</tr>
<tr>
    <td>{{json.msg}}</td>
    <td>{{json.data.token}}</td>
</tr>

</table>` // 定义展示模板

apt.Visualizing(template, {title:"可视化演示", json:response.json}) // 传入展示数据并可视化展示。其中 response.json的意思是返回的json,具体可以下文。

响应数据

{
	"code": 10000,
	"msg": "success",
	"data": {
		"token": "41183bf5e4bbcaf57f02bc6f2c3aa812"
	}
}

可视化方法

apt.Visualizing(template, {title:"可视化演示", json:response.json}) 

定义效果如下图:

结果如下图:

笔者觉得就是给领导和客户的,把数据搞好看一些。对开发而言json其实也足够了。如果是对接领导和客户多写几行代码把数据做漂亮也体现出专业是不错选择哈!

好用的Api工具推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线 smartApi是一款对标国外的postman的api调试开发工具,由于开发人力就作者一个所以人力有限,因此v1.0.0版本功能进行精简,大功能项有:

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨 本地运行,性能优越,高效,快捷

下面是一段smartApi使用介绍: 在这里插入图片描述

下载地址

pan.baidu.com/s/1WGaIDYQv…