RuoYi基于SpringBoot+Vue前后端分离的Java快速开发框架学习_2_登录

---

一、登录

1.生成验证码

基本思路：

1. 后端生成一个表达式，例如3+4=?@7,显而易见@后面是答案
2. 截取出来题干和答案
3. 把题干1+1=？变成图片，变成流，传到前端
4. 答案7存入Redis

2.验证码作用

1.大体流程

刷新RouYi前台后，查看Redis

Redis中存入了答案"10"，并且"10"是存在Key值为captcha_codes中的，之后我们只需要根据Key值来提取答案即可验证用户输入的验证码是否正确。

2.代码层面(我们都是从前端开始看起)

Step1:找到地址栏中的地址，如下图所示为login。

Step2：找到地址login在路由中指向的vue文件。按照下图顺寻进行查找。

Step3：下图我们可以看到在这个login.vue文件created时，执行了函数this.getcode()。

Step4：从下面代码我们可以看到getCode()调用了getCodeImg()方法。

methods: {
    getCode() {
      getCodeImg().then(res => { //调用了getCodeImg()方法
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;//验证码在redis的key值
        }
      });
    },

Step5：而从下图我们可以看出getCodeImg是在api目录下的login文件中。

Step6：我们找到getCodeImg()函数,它封装了一个request对象，里面是axios的东西。