从前端发送请求到后端超详细全过程
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)
在后端代码中可以找到对应的请求!