tip-通过web前端界面查看后端调用的相关API信息

最新推荐文章于 2025-02-13 16:36:07 发布
最新推荐文章于 2025-02-13 16:36:07 发布
阅读量2.4k 收藏 3
点赞数
分类专栏： 后端工作tips
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Longtermevolution/article/details/119110779
版权


今天主管布置了一个任务：进入已经发布的web开发版本页面，然后结合git上的项目源码，将页面功能点和源代码相对应，梳理一下相关功能点的业务逻辑和代码逻辑。
之前没有遇到过，所以记录一下。

1、通过web前端页面url获取后端开发api相关信息
    1）通过点击相应界面，按f12，查看network，可以看到网页请求的header，从中可以看到具体方法的url、入参、返回参数等信息；
    2）在idea中使用restfultoolkit插件实现通过url查找相应源码（快捷键ctrl + \）；

前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9514
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
前端怎么找到后端api_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目...
weixin_29530503的博客
01-26 239
项目名称：vue-fds_music项目作者：符道胜开源许可协议：Apache-2.0项目地址：https://gitee.com/fudaosheng/vue-fds_music项目简介Vue 高仿热门音乐播放器，基本实现所有音乐相关功能。本项目前端均是作者独立自主开发，所用技术栈：Vue全家桶+better-scroll+axios。后端接口来源及 API 安装可前往项目主页查看具体文档。项目...
页面调用后台方法
u012539826的专栏
11-16 547
导入Ajax.dll //注册后台类   Ajax.Utility.RegisterTypeForAjax(typeof(myajaxdll));  //设置方法可以在客户端调用     [Ajax.AjaxMethod()]下面是后台方法 原因：是命名空间的问题 注意事项： 1. pageload()方法中 AjaxPro.Utility.Regis
手把手教你使用API接口
2301_78671173的博客
02-13 1185
API接口的使用并不复杂，只要掌握基本方法和技巧，你就能轻松驾驭它，开发出功能强大的应用。希望本指南能帮助你快速入门API接口的使用，开启你的API探索之旅！如同通往数据宝库的钥匙，掌握它，你就能轻松获取所需资源，打造功能强大的应用。本指南将手把手教你如何使用API接口，从入门到精通，助你开启API世界的大门！仔细阅读API文档，了解API的功能、请求参数、响应格式等信息。确定你需要使用的API接口，例如天气API、地图API等。每个API都有详细的文档，是学习使用API的最佳资源。
优雅的后端API接口这么写，给新手看
gaston的博客
02-18 502
由于是转发也不再复制粘贴了，贴地址看吧： https://segmentfault.com/a/1190000038639204 或、 https://mp.weixin.qq.com/s/ipFW88zeRRQZE1BydJE9gw
Web 网页页面前后端数据交互接口的查找与解析（本文以 Chrome 浏览器为例）
sinat_32501475的博客
09-28 8666
大数据环境下，人人都会写爬虫。不夸张的说，程序猿十有八九都有过写爬虫的经历，不管用的是 Java 语言或 Python 语言；其中，Python 语言，刚推广时，更是以 “3行代码写爬虫”，作为其语言较其它语言简单明了的噱头。 会写爬虫，不一定知道业务所需的数据在哪个请求中；会写爬虫，不一定会采集数据。纵观网上的爬虫教程，十有八九都只是拿到百度（首页链接：“https://www.baidu.com/”）或知乎（首页链接：“https://www.zhihu.com/”）的首页源代码即可。
如何查看后端接口
weixin_63218113的博客
11-01 5114
1.打开谷歌浏览器，点击f12 ①： ②：打开设置-找到更多工具-找到开发者工具，找到Network,找到xhr,点击搜索或者别的请求，能够看到后端接口
Element-UI上传组件与后端整合：构建无缝文件上传流程
![Element-UI]... ...# 1.... ## Element-UI上传组件的简介 Element-UI是基于Vue.js的优秀组件库，广泛应用于Web开发中，提供了一整套界面组件，极大地
Jauery-EasyUi压缩包与最新的API文件
05-01
jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列的UI组件，使得开发者能够快速构建出美观、功能丰富的Web应用。EasyUI 的核心理念在于通过简单的HTML标记和CSS样式，结合JavaScript API，实现...
vue2 web端通过 el-upload上传到云点播
最新发布
03-20
由于前端无法直接操作敏感信息（如腾讯云 API 密钥），通常需要由后端提供一个接口来生成临时密钥或签名 URL。具体流程如下： - 用户发起请求时，前端向后端发送请求以获取临时密钥。 - 后端利用腾讯云提供的 STS ...
【API详解】：深入理解Layui-laydate的数据接口与前端交互
!... # 摘要 本文对Layui-laydate的时间选择器和日期...文章第三章具体阐述了前端交互实践，包含配置初始化、日期时间选择器和弹出层组件的实现。第四章则讲述了进阶接口应用，如异步加载、分页处理、接口安全和异常处理。
爬虫学习笔记-如何看api指向的网址
CSDNXXCQ的博客
09-10 5546
首先搜索api文件 其次在你想要的api中查看requesturl
如何判断当前请求的API类型
dotNET跨平台
12-11 503
前言上次，我们判断了《当前请求是否健康检查API》，避免其写入日志。但是，对于我们自己开发的API来说，最好也能来区分，比如调试用API，就不需要再写调用日志了。DisplayName方式...
Webservice的查询接口
步入什么
11-11 1575
www.google.com =>   http://api.google.com/GoogleSearch.wsdl  http://www.google.com/apis/ 
分析入手新项目后前后端的接口调用位置以及sql情况
qq_39123467的博客
07-04 1050
比如我们的userList的一个功能，我们刷新页面后会发现当前页面有很多请求，我们根据请求名和 来分析，当前的“用户列表”接口是哪个请求，这里建议检索倒数第二个url路径，选中“全字符匹配”和“区分大小写”，然后我们就发现了requestPath（tiouser）了。那我我们就找到了前端接口url，然后分析header发现关键词，准备在后端检索request.url。然后在此类中检索list，打上断点，重新让前端发送请求并测试是否是此接口即可。我们填入一个参数，点击查询，发现又调用了新的接口。
web问题定位：F12，如何找到对应接口
crhnb的博客
07-11 1633
接口查看法，是我们最常用的定位前后端问题的方法。即：一般用来查看是后端返回给前端的数据有误，还是前端显示有误。主流浏览器（如Chrome，FireFox，等）都有自带的接口查看工具，可以通过F12（设置–工具–开发者工具）开启抓包。每进行一个操作，一般都会调用对应的接口，在NetWork中可以看到当前页面发送的每个请求。
怎么通过前端页面找到后端代码（接口）（controller）
热门推荐
学未者
09-14 3万+
通过页面找到后端代码流程： 1.找到页面按f12，点击network或者网络其实就是一个东西 2.点击页面搜索出现了一个东西name然后点开这个name 3.看到地址后复制文号之前的一小段 （根据自己的项目看） 4.最后打开idea按住ctrl+shift+N粘贴进去就看到一个p之后按回车就可以看到后端的接口了。 ...
如何查询网站的后台有对接哪些API接口
weixin_42609225的博客
01-16 2360
可以使用网络抓包工具，如Fiddler或Charles，在网站使用过程中抓取网络请求并查看请求地址，从而查看网站使用了哪些API接口。也可以查看网站的代码或文档来了解网站对接的API接口。 ...
el-upload通过:file-list将文件传给后端
10-15
`el-upload` 是 Element UI 提供的一个基于 Web 的文件上传组件，它允许用户方便地选择并上传文件到服务器。当用户完成文件选择后，`el-upload` 使用 `file-list` 属性来存储选中的文件信息，包括文件名、大小等数据。 当你想把文件列表传给后端服务器时，通常会涉及到一个发送请求的过程。在`el-upload` 的 `on-success` 或者 `on-change` 事件处理器中，你可以处理这个上传操作。例如： ```javascript <template> <el-upload :action="uploadUrl" // 替换为你的实际上传接口URL list-type="text" :file-list="fileList" @change="handleFileChange" @success="handleSuccess" > <i class="el-icon-plus"></i> <div slot="tip">点击上传</div> </el-upload> </template> <script> export default { data() { return { uploadUrl: 'your-backend-api/upload', // 你的后端接收文件的API地址 fileList: [], // 用于存放文件信息的对象数组 }; }, methods: { handleFileChange(file) { this.fileList.push(file); }, // 当上传成功时调用此函数 handleSuccess(response, file) { const formData = new FormData(); formData.append('files[]', file); // 将file对象添加到FormData axios.post(this.uploadUrl, formData).then(res => { // 后端返回的响应在这里处理，比如更新状态等 console.log(res.data); }); }, }, }; </script> ``` 在这个例子中，`handleSuccess` 函数会创建一个 `FormData` 对象，并将文件对象附加到其中，然后通过 Axios 发送 POST 请求。后端接收到文件后可以根据需要进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值