如何使用 Bittly 为基于 HTTP 的 API 快速创建 UI 操作界面

在开发 Web 应用或服务时，通常会提供不同数量的 API 接口给客户端或其他第三方使用， 当 API 数量达到一定数量的时候，在处理接口间的调用链以及参数关系时就会变得异常麻烦。 在这种情况下便可通过 Bittly 的面板功能将这些 API 结构进行组装整理起来组成一个 UI 控制面板， 从而能够更加方便快捷的使用和测试 API 接口。

准备

在开始之前，您需要安装最新版本的 Bittly， 您可以在 Bittly 官网 进行下载适合您系统的 Bittly 版本。

场景

假设我们的系统是一个电商平台，我们希望仅仅通过 API 调用来实现以下操作流程：

• 用户登录
• 用户购买商品
• 变更订单状态为已发货
• 变更订单状态为已收货

创建面板

在创建面板之前，我们需要在 Bittly 的指令管理模块中将所有需要用到的接口管理起来， 这样我们便可以面板中引用这些接口， 例如：

指令录入完成后，我们切换到控制面板模块，在顶部工具栏中点击 + 创建按钮即可新建一个空白的控制面板， 例如：

面板创建完成后便处于编辑模式用于对面板进行编辑操作， 我们可以通过右侧设置栏中的组件列表中，将我们需要的组件拖拽到面板中， 例如，我们拖拽一个按钮到面板中 ：

接着，我们需要在按钮点击时调用用户登录接口，则我们需要先选中按钮， 然后在右侧设置栏中配置按钮点击事件处理器为调用指令， 例如：

现在我们使用指令默认配置，不修改任何参数， 点击确定保存该配置。 然后切换到面板运行模式点击该按钮测试以下运行情况。

如果我们希望在登录的时候能够任意输入账号和密码， 那么我们可以在面板中增加两个输入框来输入账号和密码，并且在点击登录按钮时自动引用这两个输入框中的值后再进行发送， 例如：

配置完成后， 我们需要在点击登录按钮时将账号密码改为引用值， 例如：

再次切换到运行模式， 我们在输入框中输入账号密码，并点击登录按钮，即可发送自定义的参数内容。

使用变量保存登录信息

在登录成功后，我们需要将获取到的 Access Token 保存起来以便后续接口使用， 这个时候我们就需要使用到变量来实现该功能。 变量的功能是在面板运行时提供临时保存数据的方式， 变量可在面板中的任何位置使用， 例如指令参数模板， 脚本或者自定义函数中使用。

首先，我们先新建一个变量 AccessToken 用于保存登录后获取到的 token ：

然后，我们需要将登录接口的 API 响应内容中的 access token 解析到变量中 ：

解析变量时，将响应解析模式选择 HTTP，在选择解析数据来源为 Body，解析格式为 JSON， 然后就可以根据属性路径来配置解析规则。

例如， 假设响应内容如下 ：

{
    "success" : true,
    "message" : "OK",
    "data" : {
        "token" : "12345678-1234-1234-1234-1234567890AB"
    }
}

则使用路径 data.token 便可以访问到数据值 12345678-1234-1234-1234-1234567890AB 并赋值给变量 AccessToken 。

这样，我们在登录完成后， access token 便会被自动赋值到 AccessToken 变量中， 我们切换到运行模式来测试一下：

在获取到 access token 之后，我们便可以应用到下单接口中。 同样我们添加一个输入框用于填写商品ID， 一个数值输入框用于填写数量， 最后增加一个按钮用于提交订单。 则我们的面板配置如下：

由于订单 ID 后续需要使用到， 所以我们同样用一个变量来保存，我们在提交订单的接口配置如下：

再次切换到运行模式运行 ：

使用下拉选项方便参数输入

当输入参数为固定列表中的某一个选项时， 我们可以不通过输入框来进行数据输入，而是通过下来选项组件实现， 从而减少输入操作并防止输入错误， 以变更订单状态为例：

同使用输入框一样， 在接口发送时我们同样可以采用下拉框中的值来发送选中的值。

面板运行

当面板配置完成后，我们切换到运行模式来运行该面板：

结束

Bittly 提供了一种高效的方式，通过可视化面板快速管理和测试基于 HTTP 的 API。您可以通过拖拽组件的方式，将各类 API 操作组织成易用的 UI 界面，如登录、下单、变更订单状态等常见操作。同时，Bittly 支持在面板中通过输入框、下拉框等组件传递动态参数，甚至可以利用变量保存并复用关键数据（如 Access Token）。这一功能大大简化了 API 调用的复杂性，减少了手动输入错误，并提升了操作效率，使得开发和测试过程更加直观流畅。