接口测试平台代码实现 41：调试窗口显示接口内容

2023-10-09 05:57:18

在接口调试层中，可以通过调试窗口查看接口的详细内容。本文将介绍如何在代码中实现调试窗口的显示功能。

代码实现

在 P_apis.html 文件中，找到打开调试层的函数：

function openLayer(index) {
  layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    shade: 0.8,
    id: 'layui-layer-Papis-' + index,
    area: ['90%', '90%'],
    offset: 'auto',
    anim: 5,
    isOutAnim: false,
    content: layerApisHtml[index]
  });
}

此函数会打开一个层，其中包含接口的详细信息。在 layerApisHtml 数组中，存储着各个接口的 HTML 代码。

显示接口内容

为了在调试窗口中显示接口内容，需要在 layerApisHtml 数组中添加相应的 HTML 代码。例如，对于某个接口，可以添加以下代码：

<div class="layui-card layui-anim layui-anim-upbit">
  <div class="layui-card-header">
    <span>接口名称：</span><span id="api_name">接口名称</span>
  </div>
  <div class="layui-card-body">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md4">
        <span>接口地址：</span><span id="api_url">接口地址</span>
      </div>
      <div class="layui-col-md4">
        <span>请求方式：</span><span id="api_method">请求方式</span>
      </div>
      <div class="layui-col-md4">
        <span>接口</span><span id="api_desc">接口</span>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <span>请求参数：</span><span id="api_params">请求参数</span>
      </div>
      <div class="layui-col-md6">
        <span>响应结果：</span><span id="api_result">响应结果</span>
      </div>
    </div>
  </div>
</div>