前后端分离项目中的接口设计与调用流程——以高仙机器人集成为例

一、背景介绍

在前后端分离项目开发中,前端页面需要频繁调用后端接口获取数据。在高仙机器人对接项目中,我们采用了若依(RuoYi)框架,前端通过统一的 API 封装与后端进行数据交互,而后端再对接高仙官方的 OPENAPI 实现数据获取。这里梳理一下接口调用链路和关键点,作为开发经验记录。


二、前后端接口调用的链路

1. 前端请求(以获取机器人地图列表为例)

javascript 复制代码
// src/api/gsrobot.js
export function getMapList(robotSn) {
  return request({
    url: '/external/gs/map/robotMap/list',
    method: 'post',
    data: { robotSn }
  })
}
  • 前端只需要调用 /external/gs/map/robotMap/list 这个约定好的 URL,无需关心数据来源细节。

2. 后端实现

  • 后端监听 /external/gs/map/robotMap/list,收到请求后,作为中间层调用高仙的 OPENAPI,获取机器人地图数据,并将数据转为前端所需格式后返回。

  • 后端的这个 URL 是对外暴露的"数据入口",前后端通过它达成约定。


3. 与高仙 OPENAPI 对接

  • 后端通过 HTTP 客户端调用高仙平台的 OPENAPI,完成实际数据获取。

  • 这一层对前端透明,前端无须关心高仙 API 的调用、鉴权等问题。


三、接口 URL 是否会混乱?

  • 前端和后端使用相同的 URL(如 /external/gs/map/robotMap/list并不会混乱

  • 前端是请求方,后端是服务方,职责清晰。

  • 前端只需要知道"向哪个地址要数据",后端负责实现这个地址的处理逻辑。

  • 高仙OPENAPI只是后端访问的外部服务,对前端不可见。


四、为什么要通过后端中转?

  1. 安全性:避免将第三方 API 的密钥和签名暴露给前端。

  2. 灵活性:后端可统一处理异常、格式转换、权限控制、缓存等业务逻辑。

  3. 解耦合:前端无需直接适配第三方 API,只需适配自家后端接口,降低维护难度。


五、整体流程图

javascript 复制代码
前端
  |
  | 1. 请求 /external/gs/map/robotMap/list
  v
后端
  |
  | 2. 调用高仙OPENAPI获取数据
  v
高仙OPENAPI
  |
  | 3. 返回数据给后端
  v
后端
  |
  | 4. 返回整理后的数据给前端
  v
前端

六、总结

前后端分离项目中,建议采用统一的接口约定、分层设计,前端调用自家后端接口,后端根据需要再与第三方平台(如高仙)对接。这种方式有效提升了安全性、可维护性和系统灵活性。

相关推荐
兮山与40 分钟前
前端1.0
前端
Warren983 小时前
Vue2博客项目笔记(第一天)
java·开发语言·javascript·vue.js·windows·笔记·ecmascript
Charles Wesley3 小时前
11:java学习笔记:1D array(1维数组)
java·笔记·学习·eclipse
王者鳜錸3 小时前
VUE+SPRINGBOOT从0-1打造前后端-前后台系统-邮箱重置密码
前端·vue.js·spring boot
stillaliveQEJ4 小时前
【JavaEE】多线程(一)
java·java-ee
present--014 小时前
【JAVA EE初阶】多线程(下)
java·java-ee
独泪了无痕5 小时前
深入浅析Vue3中的生命周期钩子函数
前端·vue.js
小白白一枚1115 小时前
vue和react的框架原理
前端·vue.js·react.js
字节逆旅5 小时前
从一次爬坑看前端的出路
前端·后端·程序员
Chan166 小时前
【智能协同云图库】第七期:基于AI调用阿里云百炼大模型,实现AI图片编辑功能
java·人工智能·spring boot·后端·spring·ai·ai作画