• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Katttes
V2EX  ›  程序员

纯前端对接接口的痛, AI 真的解决了吗?

  •  
  •   Katttes · 16h 6m ago · 4474 views
    现在虽然有 AI 辅助,但我还是想请教下各位前端:你们做前后端对接时,是不是也这样干?

    1. 后端导出 Swagger/OpenAPI ,用工具或 AI 自动生成 TS 类型;

    2. 把请求封装、统一返回结构和示例代码喂给 AI ;

    3. 按模块先让 AI 写 API 层;

    4. 等页面做完,再让 AI 根据 API 把页面数据对接上。

    我目前是这么做的,但不确定是不是主流,也不知道有没有更高效的做法。大家实际工作流是怎样的?有没有踩过坑或者更好的实践?求分享。
    48 replies  •  2026-10-13 22:40:41 +08:00
    infoscope
        1
    infoscope  
       16h 5m ago via iPhone
    1. AI 前后端一把梭
    2. 让 AI 生成给前端的 md 文档,前端甩给 AI
    wxlwsy
        2
    wxlwsy  
       16h 3m ago
    游戏服务器基操:
    服务器写接口, 工具一键生成客户端调用代码. 用 ai 写单元测试.
    hushes
        3
    hushes  
       15h 59m ago
    我们使用的 apifox ,它提供了 skill 可以给 Agent 调用
    novaline
        4
    novaline  
       15h 58m ago
    1,2,3 可以合成一步,客户端调用代码用模板直接生成
    andrei007
        5
    andrei007  
       15h 57m ago
    这问题还要问么?

    都不需要后端导出 Swagger/OpenAPI 。我直接都是让 AI 直接看后端代码,更直接。
    gitlight
        6
    gitlight  
       15h 56m ago
    前后端 Schema 翻译一直用 orval ,偶尔会碰到 bug ,总体很舒服
    erhsilence
        7
    erhsilence  
       15h 56m ago
    apipost 有 mcp ,生成好响应示例后 ai 能直接对接接口
    sagnitude
        8
    sagnitude  
       15h 56m ago
    给 AI 一个账号,让 AI 根据后端代码和测试服务器自己测试自己写接口
    94
        9
    94  
       15h 32m ago
    直接接入对应 api 平台的 mcp 工具或者 skill ,生成好对应接口声明之后调用页面生成器。
    或者先用代码生成器生成对应功能模块的前后端代码,后端开始调整业务逻辑,完成之后之后前端调用 api 工具按照接口返回值变更自动调整前端代码。
    hiqxy
        10
    hiqxy  
       15h 31m ago
    纯前端还不秒杀啊?没难度了
    zzzzero
        11
    zzzzero  
       15h 31m ago
    让你们老板把后台开了,你一把梭就不用对接了。
    GreatAuk
        12
    GreatAuk  
       15h 10m ago
    https://github.com/openapi-ui/openapi-ts-request 用这个,把 Swagger2/OpenAPI3/Apifox 生成 TypeScript/JavaScript 客户端请求函数

    用了好几年了
    hesetiema
        13
    hesetiema  
       15h 7m ago
    搞不太懂,后端给接口文档地址,前端拿接口喂给 AI ,让 AI 数据对接,自测,不就完事了么?
    wqhui
        14
    wqhui  
       15h 4m ago
    前后端一起生成,没必要弄个文档中转,多一次转换就多一次信息传输丢失,因为光是 api 接口文档是不够的,前端还需要拼接不同情况下接口调用的组合顺序
    caisanli
        15
    caisanli  
       15h 2m ago
    现在对接接口是最轻松的.

    公司用的 yapi, 写了一个工具来下载接口 json 文件.

    写了一个接口对接的 skill, 每次更新和对接接口都去拉取最新的 json.

    对接新模块的时, 我会提供模块的接口前缀, AI 就自己去找相关接口, 直接对接整个模块的接口.
    None123
        16
    None123  
       15h 2m ago
    不需要对接,一把梭。
    iorilu
        17
    iorilu  
       15h 0m ago
    你们公司居然还分前后端, 确实不错了, 一般公司早裁掉一半剩下全包了
    dingxi
        18
    dingxi  
       14h 55m ago
    1. AI 拉取后端最新的代码,AI 读取需求文档和扫描相关提交
    2. 扫描前端代码
    3. 输出符合需求文档中的关联接口,以及 API 需求覆盖率,标注存疑,需要人工介入的接口实现。
    4. AI 介入前端联调工作, 存疑项跳过。 人为介入
    dingxi
        19
    dingxi  
       14h 55m ago
    @dingxi #18 人为介入,不是 手动编程,是和产品沟通
    fcvi44
        20
    fcvi44  
       14h 45m ago
    前端这种岗位居然还存在??我还以为都灭绝了,现在是 AI 大人前后端一把梭哈的时代
    alfa
        21
    alfa  
       14h 42m ago
    直接一个 mono repo ,还管的什么那一端,直接面向需求开发就行。
    h1104350235
        22
    h1104350235  
       14h 38m ago
    我是自己写了一个 node 脚本,拉取 swagger 上的文档字段,然后本地缓存这份 json 数据,剩下交给 AI 。自动生成 TS 类型和对接接口。
    AI 对接比我好多了,人工对接还可能误解文档字段,AI 貌似没发现这个问题。
    AreYou0k
        23
    AreYou0k  
       14h 37m ago
    直接工作区两个项目. 前端通过 npm 插件 `openapi-ts-request` `@hey-api/openapi-ts`直接连接后端 api 生成 ts 定义和 api 请求文件, 不适配的改后端代码. 上面的 mcp, apifox 之类的都是去年的了, 都梭哈 ai 了没意义了.
    aitaii
        24
    aitaii  
       14h 33m ago
    把后端的实体拿过来,接口都不需要。
    cheerxl
        25
    cheerxl  
       14h 32m ago
    推荐你了解下 oval 或者 kubb ,这些工具基于 openapi , 把类型、fetch/axios 、react query 、mock 、zod schema 等相关代码都给你生成好了,你要做的就是让 ai 基于接口产物来实现页面,由于产物已经足够丰富,对于常规页面,不需要过多描述就能直接处理完了,没那么多步骤
    YNaN
        26
    YNaN  
       14h 32m ago
    让后端放开代码和测试数据库,直接 AI 读取一把梭哈 比中间看文档准确多了
    gloye
        27
    gloye  
       14h 20m ago
    大差不差啊,我也是这么做的
    archxm
        28
    archxm  
       14h 14m ago via Android
    ai 推广期,后面一大堆推广经费。不吃可惜了
    cheerxl
        29
    cheerxl  
       14h 10m ago
    @cheerxl oval -> orval
    Torpedo
        30
    Torpedo  
       13h 20m ago
    这个可以的。还要加上厚度代码信息,让 ai 结合后端代码读
    Ayanokouji
        31
    Ayanokouji  
       13h 14m ago
    我选 connectrpc
    nolynfeng
        32
    nolynfeng  
       13h 10m ago
    ai 的做法是干掉前后端,直接全栈一把梭
    atbeta
        33
    atbeta  
       13h 6m ago
    给 AI 配上个流量助手就行,我一直在研究这个方向,目前也经常用来做逆向,让 AI 分析流量写对应脚本实现想要的功能。https://juejin.cn/post/7626240732470853667
    pedoc
        34
    pedoc  
       12h 54m ago
    我是写了一套脚本从后端 api 生成前端 ts,同时接口增加一些元数据,从而让前端直接根据元数据渲染表格/表达那之类,对于常见 curd 接口写完 ui 也就出完了,后端变化自动跟随变化,没有不确定性.
    coryxu
        35
    coryxu  
       12h 40m ago
    你这已经落后了,我们公司前端早就开始搞前后端一把梭了。
    ThisDay
        36
    ThisDay  
       11h 52m ago
    更高效的方法当然有,直接让 ai 自己读后端代码
    fend
        37
    fend  
       11h 50m ago
    对接接口我一直都很顺畅,没遇到过什么不准或者奇葩的事。
    ytmsdy
        38
    ytmsdy  
       11h 43m ago
    都什么年代了,还有纯前端这个岗位?现在不是直接把 figma 的设计稿丢给 AI ,然后后端工程师进行测试么?
    测试前端 UI 显示没问题以后,就直接发布了。
    baipiaoguai
        39
    baipiaoguai  
       11h 42m ago
    有工具(比如 heyapi 之类的,也可以直接生成 react-query 之类的 hook )可以把 1 2 3 都合成一个,直接生成类型和 API 层;在结合 API 生成和使用的 skill ;基本就可以自动化了
    chaxus
        40
    chaxus  
       11h 36m ago
    前端和后端都在一个仓库里面,ai 自己就知道接口是什么,逻辑是什么了,自己对接,不需要任何中间层工具
    declandragon
        41
    declandragon  
       11h 32m ago
    内部 MCP ,有读取文档、后端代码、DB 结构、发起请求这些方法,前后端一起用,理论上不用接口文档了,但是还是会输出 MD 接口文档给人看。
    nomansky
        42
    nomansky  
       10h 31m ago
    @atbeta 看完了你的博客,可能有用。但就文中举例的场景来说,没发现得用抓包 mcp 来增加使用复杂性和学习成本的必要性。

    平时开发中,几乎所有 AI IDE 都自带的 command mcp 用 curl 通用命令完全足够用了。AI 已经足够聪明来自动鉴权获取 token ,根据当前仓库代码接口自动构建 curl 请求,分析 api 返回了。
    GiantHard
        43
    GiantHard  
       9h 38m ago
    只要 LLM 能访问后端代码库且页面跟接口有 e2e 测试覆盖,API 文档以及 TS 类型定义对旗舰模型来说就是浪费 Token 。
    jfds
        44
    jfds  
       9h 33m ago
    现在都是一把梭,直接看代码对接了
    GiantHard
        45
    GiantHard  
       9h 26m ago
    我现在在新的项目中尝试完全不用 react/vue/angular 这样的前端 framework 。复杂交互控件用 web component 写,页面结构全部在后端渲染,用 htmx 增强体验。

    现在发现这样是完全值得的:

    因为不使用 typescript/react ,所以前端资源构建一直没超过 1s 。
    因为采用服务端渲染,所以不需要接口对接,也就不存在接口对接的痛了。
    xbisland
        46
    xbisland  
       8h 59m ago
    第一步生成的 TS 可以单独用项目管理,比如 xxx-api 。前端当成 package 引入就行,更新由 ci 跑就行。
    第二步 ~ 第四步 Ai 自己都能做吧。
    auroraccc
        47
    auroraccc  
       6h 35m ago
    不用,你都有 openapi 了,都知道后端是怎么定义接口的了,甚至方法名都有了,为啥前端还要定义一遍接口。直接通过类似 openapi-typescript 类似的工具写个 npm util script 生成就行了,ai 根据 openapi 接口直接调用生成的 api util 上对应的接口方法就好了。
    DICK23
        48
    DICK23  
       3h 39m ago
    直接上 rpc,连接口我都懒得自己写
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1075 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 119ms · UTC 18:20 · PVG 02:20 · LAX 11:20 · JFK 14:20
    ♥ Do have faith in what you're doing.