若依框架前后端分离版——登录模块代码解读

冰茶不冰

已于 2022-07-01 10:47:49 修改

阅读量8.1k

点赞数 8

分类专栏： Java 文章标签：学习前端 java vue spring boot

于 2022-05-29 23:46:44 首次发布

本文链接：https://blog.csdn.net/WWK0905/article/details/125038482

版权

Java 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言

由于最近做项目需要基于若依框架（前后端分离版）二次开发，这里简单记录一下我看若依框架源代码的过程，供自己复习时使用，也希望能够给想学习若依框架的朋友一点启发！

若依项目代码运行前需要配置MySQL和Redis

若依的前端代码主要集中在ruoyi-ui模块的src/views目录下

若依的后端代码主要集中在ruoyi-admin模块

验证码模块

验证码生成的主要步骤：

后端生成一个表达式，如 4-2=2
实际上是 4-2=?@2
1+1=? 转成图片，2存入Redis

前端代码

从登录界面的代码入手，找到验证码部分。
在这里插入图片描述

我们刷新登录页面，通过浏览器F12，可以看到请求的URL，如下图所示。

由上图可见，captchaImage请求有个统一前缀dev-api，并且请求的是localhost:80(没加端口号，默认80)，也就是请求的是前端。这其实是为了解决跨域问题，若依是在前端通过反向代理来解决的，URL请求前端，然后再映射到后端，具体配置见vue.config.js文件。
在这里插入图片描述

后端代码

利用idea的全局搜索功能（如下图所示，快捷键是Ctrl+Shift+R），搜索刚刚前端看到的captchaImage。
在这里插入图片描述

    /**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        AjaxResult ajax = AjaxResult.success();
        boolean captchaOnOff = configService.selectCaptchaOnOff();
        ajax.put("captchaOnOff", captchaOnOff);
        if (!captchaOnOff)
        {
            return ajax;
        }

        // 保存验证码信息
        String uuid = IdUtils.simpleUUID();
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

        String capStr = null, code = null;
        BufferedImage image = null;

        // 生成验证码
        String captchaType = RuoYiConfig.getCaptchaType();
        if ("math".equals(captchaType))
        {
            String capText = captchaProducerMath.createText(); // 4-2=?@2
            capStr = capText.substring(0, capText.lastIndexOf("@")); // 4-2=?
            code = capText.substring(capText.lastIndexOf("@") + 1); // 2
            image = captchaProducerMath.createImage(capStr); // 生成的表达式图片
        }
        else if ("char".equals(captchaType))
        {
            capStr = code = captchaProducer.createText();
            image = captchaProducer.createImage(capStr);
        }
		
        // verifyKey——captcha_codes:077e4780a55c406e852669df581f1763
        // code——表达式答案，也就是2
        // Constants.CAPTCHA_EXPIRATION+TimeUnit.MINUTES——验证码超时时间，这里是两分钟
        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        
        // 转换流信息写出
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try
        {
            ImageIO.write(image, "jpg", os);
        }
        catch (IOException e)
        {
            return AjaxResult.error(e.getMessage());
        }

        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(os.toByteArray()));
        return ajax;
    }