【ruoyi_01】项目运行以及登录图片验证功能分析 项目运

发表于

背景：记录一下学习 ruoyi 项目的过程、项目地址。

本文主要有以下内容：

  • 若以分离版环境搭建以及项目运行
  • 登录验证码逻辑

前置条件：操作系统为 macos

  • 已本地安装 mysql8
  • Java11
  • Node 20.9
  • git

项目运行

项目下载，通过git clone git@gitee.com:y_project/RuoYi-Vue.git命令下载项目，项目下载后通过idea打开、由于本操作系统是macos，因此需要修改这三个配置文件。

  • application.yml
  • application.druid.yml
  • logback.xml

application.yml: 文件中的端口号，这一步是可选的，不想与本地其他项目冲突故而修改。除此之外需要修改profile配置项，这一步是为了保证图片上传功能能够正常使用，需要保证配置的目录具有可读可写的权限

application-druid.yml: 需要把连接信息修改为本地。数据库相关的文件在项目的sql文件夹下，按照文档执行即可。

logback.xml: 这一步是修改日志的保存目录，也需要保证该目录具有可读可写的权限。

修改完如上配置文件之后，即可启动后端项目。

前端项目：进入到 ruo-ui 目录下，通过shell终端执行 npm install，命令执行完毕后通过 vscode 打开，修改 vue-config.js 文件

修改 target 中的端口号为后端项目启动的端口号，如果之前没改则不需要！

此时通过 npm run dev 即可启动项目。

图片验证码功能实现

在 application.yml 文件中的 ruoyi.captchaType:math 这一个配置项就是配置了图片验证码验证方式。

图片验证码的后端接口在 ruoyi-admin/com/ruoyi/web/controller/CaptchaController.java 类中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
java复制代码 @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        // 1.创建返回对象
        AjaxResult ajax = AjaxResult.success();
       // 2.获取是否开启验证、先在redis中找、然后去库sys_config里面找默认开启、最后在设置到redis中
        boolean captchaEnabled = configService.selectCaptchaEnabled();
        ajax.put("captchaEnabled", captchaEnabled);
        if (!captchaEnabled)
        {
            return ajax;
        }

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

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

        // 生成验证码
        String captchaType = RuoYiConfig.getCaptchaType();
        if ("math".equals(captchaType))
        {
            String capText = captchaProducerMath.createText();
            capStr = capText.substring(0, capText.lastIndexOf("@"));
            code = capText.substring(capText.lastIndexOf("@") + 1);
            image = captchaProducerMath.createImage(capStr);
        }
        else if ("char".equals(captchaType))
        {
            capStr = code = captchaProducer.createText();
            image = captchaProducer.createImage(capStr);
        }
        // 保存用户的验证登录信息到redis中
        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;
    }

以上便是 ruoyi 分离版项目运行配置以及登录验证的过程分析。

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%