Vue 制作的前端页面,怎么找按钮对应的后端请求地址? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
MuHuoLiLi
V2EX    程序员

Vue 制作的前端页面,怎么找按钮对应的后端请求地址?

  •  1
     
  •   MuHuoLiLi 2023-04-03 16:52:47 +08:00 3436 次点击
    这是一个创建于 922 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我是一个后端,早年 JQuery 时,页面按钮一般是 a 标签,href 属性就是请求地址;或者其它标签,一般在 onclick 属性里也能找到;现在 Vue 了,按钮就是个 button ,本身只有 type 、class ,看起来也没啥特殊的,怎么找对应的请求地址呢?

    1.问前端可以问到,我想学一下能不能通过浏览器 F12-Elements 自己找;
    2.不能动线上数据,也就是没法通过 F12-Network 来看。
    19 条回复    2023-04-06 10:18:10 +08:00
    sanmaozhao
        1
    sanmaozhao  
       2023-04-03 16:56:08 +08:00   4
    可以在 F12-Network 里面,调成 Offline ,然后再点按钮
    这样请求地址会出现,但是由于已离线,不会产生实际的调用
    CloudnuY
        2
    CloudnuY  
       2023-04-03 16:56:22 +08:00   2
    Element 里找到选中这个元素,在事件监听器里找到 click 方法,点进去追踪一下函数
    dafuyang
        3
    dafuyang  
       2023-04-03 16:59:16 +08:00 via Android
    f12 查网络请求里面的 fetch/XHR 请求跟动线上数据有什么联系啊,你把网络设置成 offline 发不出去不是也可以。。
    brader
        4
    brader  
       2023-04-03 17:06:12 +08:00
    F12-Elements 选中这个元素,然后在界面右边有个 Event Listeners 能看到监听的事件
    AV1
        5
    AV1  
       2023-04-03 17:08:11 +08:00
    就算你不知道 Network 里有个模拟 Offline ,你也应该懂得关 wifi 、拔网线,再点按钮来看请求地址嘛。
    lichdkimba
        6
    lichdkimba  
       2023-04-03 17:10:33 +08:00
    JQuery 时代都是绑定事件的………… href 属性的至少不能算 JQuery 的风格
    ruoxie
        7
    ruoxie  
       2023-04-03 19:32:03 +08:00 via iPhone
    把你网线拔了,f12 不就能看了,当然连续调多个接口而且有先后顺序的,还是看不到
    AyaseEri
        8
    AyaseEri  
       2023-04-03 19:35:12 +08:00
    jQuery 时代就已经是事件触发 ajax 了,a 标签都不是调接口的操作
    superedlimited
        9
    superedlimited  
       2023-04-03 20:30:56 +08:00 via iPhone
    2023 年,竟然看到恐龙活化石了
    Pastsong
        10
    Pastsong  
       2023-04-03 20:35:22 +08:00 via Android
    click handler 有点难找 现在都是绑在 root 上代理下来的,用网络请求的发起者反找比较方便
    ivslyyy
        11
    ivslyyy  
       2023-04-04 00:15:48 +08:00
    1 、f12 断网后抓包
    2 、source 里监听点击事件
    3 、看源码,在源代码里找
    n18255447846
        12
    n18255447846  
       2023-04-04 08:03:54 +08:00
    为什么不问前端小伙伴呢,一条消息的事
    ccyu220
        13
    ccyu220  
       2023-04-04 08:05:45 +08:00
    @ruoxie 不能动线上数据,拔网线+1
    ccyu220
        14
    ccyu220  
       2023-04-04 08:06:12 +08:00
    @ccyu220 当然这个把网线不是真的让你把网线,而是在控制台里面把网络关了。
    MuHuoLiLi
        15
    MuHuoLiLi  
    OP
       2023-04-04 08:50:31 +08:00
    @sanmaozhao 感谢
    MuHuoLiLi
        16
    MuHuoLiLi  
    OP
       2023-04-04 09:03:12 +08:00
    @CloudnuY 定位到 button 元素后,监听器显示这样

    这三个定位分别跳转到



    应该继续从哪个方法跟踪,来找到最终 URL ?
    xiaoqidev
        17
    xiaoqidev  
       2023-04-04 09:10:56 +08:00
    wangtian2020
        18
    wangtian2020  
       2023-04-04 11:40:26 +08:00   1
    Vue 项目如果按照正常流程打包上线,线上的都是 min 压缩后的 js 文件,鬼找得到啊。去看前端源码
    MuHuoLiLi
        19
    MuHuoLiLi  
    OP
       2023-04-06 10:18:10 +08:00
    @wangtian2020 谢谢~所以说现代前端项目很难仅通过浏览器元素来查找对应调用的接口对吗?还是得靠前端小伙伴和项目源代码~
    关于     帮助文档     自助推广系统     博客     API     FAQ   Solana     2625 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 31ms UTC 14:04 PVG 22:04 LAX 07:04 JFK 10:04
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86