1、login页面初始化方法:created()
2、获取验证码:getCode()
功能:向前端返回一个图片及一个uuid 注:这里的uuid就是根据key值找Redis中缓存的答案
2.1:captchaEnabled:获取到验证码后再显示
2.2:这里的.then 、 this 、 res各自的作用
.then(res => 是指在执行完所有请求方法以后再执行后面的操作 this 详细解释这里哦 res 后端向客户端(浏览器)返回的信息
2.3:login中getCode()(获取验证码)方法调用Axios的历程
Vue和Spring Boot交互是使用Ajax,而Ajax在Vue中封装成了Axios,而在此没有看到Axios方法的原因是因为其又进行了一层封装,即查看getCodeImg()的来源可发现它就是经过了一层封装,封装路径为根目录下/api/login.js文件(点我,了解Ajax与Axios的区别) 如图所示:这里return了一个request对象 继续找下去发现request引用的是@/utils/request.js文件,发现有创建axios实例 总而言之,login.vue这里使用getCode()这个方法的时候,虽使用了Axios,但是是经过了两次封装后才使用的。 注意:这里对于getCodeImg()这个方法的引用是采用import {getCodeImg} from ’XXXX‘的形式,而对于request对象采用的是import request from ’XXXX的形式。(即函数要用’{ }',对象则无需使用大括号)**
2.4:这里的captchaImage有什么作用?
若将captchaImage改为captchaImage2,如下图所示: 则页面会弹出此提示框,并且点击取消按钮后,登录框内不显示验证码图片 然后猛地一拍脑袋瓜,想起无论是Ajax还是Axios都是用于前后端交互,因而这里的请求发起地址必然是在后端,而后便在ruoyi的总项目中找到了对应注解位置 因此便捋顺了验证码表达式及图片从后端生成,然后通过前端调用request.js对象,利用request对象给前端发送验证码图片的过程。 能明确captchaImage是由后端Spring Boot工程进行访问的,如此便随之而来另一个问题:后端的端口是8080,但这里访问的时候没有端口出现,即访问默认端口80,那么这是为什么,见2.5
2.5:captchaImage请求 理论上请求后端,为何结果(形式)上请求的却是前端。(/或为了解决什么问题)
解答:此操作是为了 解决跨域问题,从而做的反向代理操作(未用ngix)。 反向代理(前端处理版):请求的是前端,通过反向代理映射到后端(url请求前端,进行代理,映射到后端),目的是解决跨域问题(按传统方法前后端交互时,必然要进行跨域操作,因为前端80 ,后端8080)。 那么,这个反向代理是如何进行操作的呢,答:是在前端的config.js中进行配置的,如下图所示: target:你要给哪里进行映射操作。 pathRewrite:路径重写,这里的含义是将dev-api替换成' '(空),再映射到 http://localhost:8080。 转变过程:http://localhost/dev-api/captchaImage --> http://localhost/captchaImage --> http://localhost:8080/captchaImage。
突然的知识点扩充 正向代理与反向代理(我的理解,即角色反转): 正向代理中client和proxy处于同一域中,此时proxy是代理client端,为client收发请求,使真实client对server不可见,eg1:突破自身ip的访问限制,访问之前无法访问的资源,如google,eg2:可以做缓存,以此提高访问速度;eg3:可对client访问授权,上网进行认证;eg4:proxy可以访问client的浏览记录,并对外隐藏用户信息。 反向代理中proxy和server处于同一域中,此时proxy是代理server端,为server端收发请求,使真实server对client不可见,eg1:对client隐藏server端的ip,以此来保证内网的安全,常见于大型网站;eg2:负载均衡,通过反向代理,将client端不同的请求分发到不同的server端;eg3:提高访问速度,此时proxy可以对于静态内容及短时间内有大量访问请求的动态内容提供缓存服务。 结合项目,便是客户在网页输入登陆信息后,后端即为server端,为避免跨域问题,从而使用反向代理,将前端和后端画至同一域中,而后通过路径重写,使前后端能够在保持前端页面的情况下自由的传递数据。
2.6:为何在抓包的时候显示的路径多了个dev-api?
如图所示: 解答:
注意:上文中 baseURL: process.env.VUE_APP_BASE_API 这一行是表示URL的公共请求部分,
此时表示的是开发环境,下图分别对应开发、生产和测试环境所需的文件(若要使用,则使用这些文件
内的API值,如下下图所示)
因而在启动后会在根路径localhost下紧跟着一个公共路径/dev-api(统一前缀)
3、思路总览