如何查看接口

梦里梦外; 2023-06-13 04:36 31阅读 0赞

How？  
Summary  
开发工具：Idea  
难度系数：★☆☆☆☆  
建议用时：30min

前后端分离架构中，前后端交互都是靠接口对接的，后端定义好接口，online或者offline告知前端，即可同时开发，不受影响。前后端都需要快速找到接口，后端根据接口找到实现代码，这是非常基础的。

##### 1.如何找接口？ #####

我们直接访问页面，然后打开开发者工具Chrome:快捷键：Mac 系统下：Alt + Command + I ,或者右键==》检查，找到NetWork选项卡即可。如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70]

如果有一点点基本的开发者工具基础知识，我们知道：Elements是用来查看网页结构的，也就是可以看到整体的HTML语言；Console是控制台，Network是请求想相应状态，关于开发者工具，以后会专门在作总结。

1）一个Name就是一个接口，XHR一般这么过滤。Header里面的RequestURL就是前端调用后端的接口；

2）上图中的idp应该是后端的一个服务（项目），/user/admin/lock就是接口，也就是后端的@RequestMapping或者@Path()

在Idea中，如何快速找到这个接口所对应的后端代码？

在后端代码中，这个接口就是指定的具体类中的某个方法，也就是path。

Eg：

http://175.23.43.5/cscsc/branch\_center/dynamic

这就是个接口，组成部分：

HTTP——协议名称  
175.23.43.5 ——服务器名称  
cscsc——服务名称（对应后台一个工程|一个模块|一个服务）  
branch\_center——请求路径  
dynamic—二级路径

如何快速查找呢？

记住快捷键是个好方法，但是快捷键总会忘记的，如果换了开发工具，不也忘了么？

法1：记住快捷键是从哪里来的  
Edit ==》 Find ==》Find in path 这样就一劳永逸，即便忘记，也不怕。  
因为大脑擅长逻辑，而不是擅长记忆。

法2：快捷键：Ctrl + Shift +F  
这个快捷键和搜狗输入法繁简体切换冲突。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70 1]

搜索的时候，/这个加不加上，大有来头。我一般选择Directory选项卡，选择Words过滤，  
这样筛选出来的都是@Path()之类的，非常方便。

@Path（”/branch\_center/dynamic“）  
@Path(“branch\_center/dynamic”)  
这两个搜的时候，就要区别有无/,如果直接/就会直接过滤掉第二个路径。有时候，有的接口搜索/ 或者branch\_center也是找不到，需要加上”branch\_center”，这就考验你对@Path理解的深刻与否了。

换做其他开发工具，也是类似。

##### 2. Summary #####

1.Idea中快捷键：Ctrl + Shift +F (对应：Edit ==> find ==> find in path)，这个快捷键和搜狗输入法繁简体切换冲突。  
记住快捷键没什么，重要的是知道这个快捷键怎么来的。

double shift 就是全局搜索类

2.个人习惯选择Directory选项卡搜索，然后精准匹配Words

3.path的书写大有讲究。有无/是很关键的一个指标。如果你默认以为/branch\_center，那么就直接过滤掉了branch\_center

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111317550025.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113175613844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw==,size_16,color_FFFFFF,t_70