应用访问流程

本篇详细介绍如何访问后端接口，包括接口测试和前端集成的完整流程。

概述

当您完成测试应用的创建并启动后端服务后，GA 服务会自动对您开发的应用进行健康检查。

后端服务示例

以下是使用 Python Flask 框架的后端服务示例：

from flask import Flask, jsonify

app = Flask(__name__)

@app.post("/hello")
def hello():
    return jsonify(code=200, data="hello world!", msg="OK")

@app.get("/ping")
def ping():
    return jsonify(code=200, data="ping", msg="OK")

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8899, debug=True)

接口说明

该示例包含两个接口：

/ping - 健康检查接口，用于服务状态监控
/hello - 业务接口，用于演示功能

接口测试

下面使用 Apifox 工具对 /hello 接口进行测试：

请求参数规范

标准请求参数格式：

{
    "version":"1.0.0",
    "transport":"http",
    "params":{
        "lang":"zh-CN"
    }
}

参数说明

参数	类型	必填	说明
`version`	String	是	请求版本号，调试时固定为 `1.0.0`
`transport`	String	是	传输协议类型，支持 `http` 和 `socket`
`params`	Object	否	业务参数，发送给外置应用的具体参数

Transport 协议类型

http - 适用于 HTTP/HTTPS 服务
socket - 适用于 Socket 服务

注意

协议类型必须与后端服务类型匹配，否则会导致服务无法访问
目前仅支持 http 和 socket 两种协议

认证要求

重要

访问接口时请确保携带有效的 Token 进行身份认证。您可以去浏览器的开发者工具去获取 token。

URL 访问规范

接口访问地址格式：

http://web2.gmssh.com/tunnel/api/call/{组织名}/{应用名称}/{接口路径}

URL 组成说明：

example/demo - 创建 DevTools 应用时填写的应用名称
hello - 后端代码中定义的接口路径

提示

确保应用名称与创建时填写的名称完全一致，区分大小写。

前端访问后端服务

前置要求

在前端访问后端接口时，需要确保：

前端服务已正常启动
已正确引入 GM SDK
网络连接正常

访问效果

代码示例

以下是完整的前端集成示例，展示如何使用 GM SDK 调用后端接口：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>GM SDK Demo</title>
  <!-- 1. 引入 GM 提供的 SDK -->
  <script src="https://down-gmb.oss-cn-zhangjiakou.aliyuncs.com/appWebJs/gmAppSdk.js"></script>
  <style>
    body {
      background-color: #1a1a1a;
      color: white;
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    button {
      background-color: #333;
      color: white;
      border: 1px solid #555;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      margin: 10px 0;
    }
    button:hover {
      background-color: #555;
    }
    pre {
      background-color: #2a2a2a;
      color: white;
      padding: 15px;
      border-radius: 5px;
      border: 1px solid #444;
      white-space: pre-wrap;
      word-wrap: break-word;
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <h2>请求示例</h2>
  <button id="btn">点我发请求</button>
  <pre id="result"></pre>
  <script>
    // 2. 点击按钮后调用后端接口
    document.getElementById("btn").addEventListener("click", () => {
      // 使用 GM 封装的 axios 实例发起 POST 请求
      $gm
        .request("/api/call/example/demo/hello", {
          method: "POST",
          data: {
            "version": "1.0.0",
            "transport": "http",
            "params": {
              "lang": "zh-CN"
            }
          },   // 发送 JSON 数据作为请求体
        })
        .then((res) => {
          // 3. 打印返回结果
          document.getElementById("result").textContent = JSON.stringify(res, null, 2);
        })
        .catch((err) => {
          document.getElementById("result").textContent = "请求失败:\n" + err;
        });
    });
  </script>
</body>
</html>

核心功能说明

SDK 引入 - 通过 CDN 引入 GM 提供的官方 SDK
接口调用 - 使用 $gm.request() 方法发起请求
参数传递 - 按照标准格式传递 version、transport 和 params 参数
结果处理 - 处理成功和失败的响应结果

最佳实践

开发建议

在生产环境中建议添加更完善的错误处理机制
可以根据实际需求自定义 UI 样式和交互效果
建议对请求参数进行验证，确保数据格式正确

访问流程图

系统的完整访问流程如下所示：

流程说明

前端发起请求：用户在前端界面操作，发起API请求
GS服务处理：网关服务接收前端请求
GA服务路由：应用网关服务进行请求分析和路由
应用识别与校验：
- 根据用户访问信息判断目标应用
- 校验应用版本兼容性
- 验证后端服务类型和端口配置
外置应用处理：将请求转发到对应的外置应用进行业务处理
响应返回：处理结果沿原路径返回到前端进行渲染