快速了解_RuoYi-Vue框架如何将请求发送到后端

从前端发送请求到后端超详细全过程

1.启动前端项目即触发getRouters()方法获取全部菜单页面对应的.vue文件路径(每一个.vue文件就相当于一个前端页面)

注:全文以用户管理模块举例

2.点击用户管理页面即发送请求/system/user去寻找对应的.vue前端页面返回

3.在前端代码中可以找到对应的.vue文件

4.找到新增按钮来演示请求如何发送到后端 找到其绑定的点击方法handleAdd()

5.在handleAdd()中可以找到其调用了getUser方法

6.长按Ctrl建点击getUser()方法找到其出处 知道其方法是通过导入/api/system/user包得到的

7.寻找到对应的目录/api/system/user发现真正发送请求的方法:/system/user(userId) 但是此路径依然不完整 接下来继续查看导入的/utils/request包

8.找到/utils/request包发现其中定义了请求URL的公共部分为VUE_APP_BASE_API继续前往env.development文件查看其值

9.在env.development中可以知道VUE_APP_BASE_APIZ的值为/dev-api（可以看作为请求的前缀）

注:到此我们可以得到现在的请求路径为 /dev-api/system/user(userId)

10.至关重要的一步在若以项目中使用到了代理服务器(devServer)实现跨域 解析如图

注:至此请求的路径变为:http:localhost:8080/system/user(userId)

在后端代码中可以找到对应的请求！