阿昌带你一起学习若依之【项目结构、登录实现】 -若依开源项目

若依开源项目


一、项目结构

0、前言

阿昌之前的文章《阿昌手摸手教你如何在服务器部署若依前后端分离版项目》中,我们部署了若依的项目在线上;

这次我们先使用本地去学习若依项目,阿昌也在学习这个开源项目,想做自己学习的文章分享,一方面记录督促自己学习,另一方分享知识给广大编程好友们!!!

1、项目的结构

我们拿到一个开源项目要如何入手去去学习呢?

总不能直接对着源码猛读!!!

  • 观察项目结构,会发现若依的项目是多模块开发,就是ruoyi-admin为主入门,引入别的模块的坐标
    • 好处:
      • 便于项目的管理
      • 降低代码耦合
      • 有利于多人协同开发
      • 项目每个模块功能明确

image-20210419201751974


  • 我们观察最主要的ruoyi-admin模块,会发现里面只有controller。没有别的代码层。那他们去哪里了呢?

image-20210419201736290


  • 不断摸索看了看发现,若依把别的层都写在了ruoyi-system模块里面
    • domain
    • mapper
    • service

image-20210419202037405


  • 观察ruoyi-common模块
  • 发现里面如模块名一样,都是一些公共的
    • 配置类【config】
    • 注解【annotation】
    • 实体类【constant】
    • 核心基类【core】
      • 公共基类
      • redis工具
      • 文本工具
      • 分页工具
      • …等
    • 枚举类【enums】
    • 异常【exception】
    • 过滤器【filter】
    • 工具包【utils】

image-20210419202319715


  • 在看ruoyi-framework模块,里面有一些
    • 切面【数据过滤处理、多数据源、日志记录】
    • 配置类【各种组件的配置类,如:redis、MyBatis、线程池等…】
    • 数据源【动态数据源、数据源切换】
    • 拦截器
    • 管理【异步工厂、异步任务器、关闭管理等…提升用户体验】
    • 安全【这里阿昌下的是springsecurity的整合版本】
    • web

image-20210419202729254


  • 再往下看,ruoyi-generator代码生成模块
    • 主要的一些对应的模板类

image-20210419203308397


  • ruoyi-quartz定时任务模块

image-20210419203415572


  • 阿昌发现了一个好的方法,就是看主模块的xml文件,若依作者写的很详细里面引入的坐标模块,也就知道对应这个模块的作用是什么了

image-20210419203525896


二、登录功能实现

今天就记录一下若依的登录功能实现的学习

  • 首先启动前端npm run dev

image-20210419203639612

  • 再启动页面按F12,打开调试面板,再到Network网络请求部分,再刷新页面,看他发了什么网络请求

image-20210419203905640

  • 我们看到了他发了三个请求,右侧可看详细请求地址,于是我们先看login这个请求

image-20210419203931759

  • 发现他请求了/login请求接口,于是我们就去后台去寻找/login这个接口的controller

  • 阿昌这里分享一个快速找这个接口的方法,右击模块-Find inPath,再输入/login,就能快速找到对应的接口位置

image-20210419204108303

image-20210419204146478


  • 接口的详细

image-20210419204229970

  • 我们先看看他接受前端发来的登录实体类里面的属性是什么
public class LoginBody
{
    /**
     * 用户名
     */
    private String username;

    /**
     * 用户密码
     */
    private String password;

    /**
     * 验证码
     */
    private String code;

    /**
     * 唯一标识
     */
    private String uuid = "";
	
    .............//省略get/set()方法
}
  • 发现他有用到验证码和uuid
  • 然后我们打断点,输入账号密码验证码发个请求看看

image-20210419204503002

  • 阿昌发现一个问题,在实体类中没有定义uuid,为什么他就生成了uuid的值,看样子是随机生成的

  • 想到之前有验证码的请求,于是我们去看看验证码的请求

image-20210419204602830

  • 通过上面同样的方法快速定位到/captchaImage 接口的位置
@RestController
public class CaptchaController
{
    @Resource(name = "captchaProducer")
    private Producer captchaProducer;

    @Resource(name = "captchaProducerMath")
    private Producer captchaProducerMath;

    @Autowired
    private RedisCache redisCache;
    
    // 验证码类型
    @Value("${ruoyi.captchaType}")
    private String captchaType;

    /**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        // 保存验证码信息
        String uuid = IdUtils.simpleUUID();
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

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

        // 生成验证码
        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);
        }

        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());
        }

        AjaxResult ajax = AjaxResult.success();
        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(os.toByteArray()));
        return ajax;
    }
}
  • 代码如上,发现他的验证码类型可以更换,他读取的是配置文件中的值,我们去配置文件中看

    image-20210419204914668

image-20210419204951402


  • 验证码生成的使用

image-20210419205055752

  • 我们打个debug断点看看验证码的情况

image-20210419205403424

image-20210419205528869

  • 我们点进去看看redisCache他是怎么写的,他封装了redisTemplete,向redis存值

image-20210419205621259


  • 到这里知道了uuid是在验证码的请求中生成的,那他为什么在/login登入请求就自带了?????

  • 阿昌就去看了看前端部分,找到这个前端的页面

image-20210419205827160


  • 发现他在created()生命周期就调用了getCode()函数,我猜就是获取验证码的函数

image-20210419210051089

  • 我们看看getCodeImg() js脚本是什么样子的,来源在/src/api/login.js里面

image-20210419210119209

image-20210419210148517


  • 跟阿昌想的一样,他就是获取验证码的js脚本

image-20210419210241569

到此我们就知道了他前端请求了后端的验证码接口,并给对象赋值,所以前端就显示了图片验证码,然后验证码的谜底就储存在redis中,我们就继续向下走


  • 既然我们在看前端了,那我们就继续看前面

image-20210419210604102


  • 我们向下看,发现我们上面进入这个页面就会调getCode()方法,然后点击验证码也会调用getCode()方法

image-20210419210659145


  • 我们先看到登录请求的前端js脚本

image-20210419211019851


  • 回到后端,打上断点,输入账号密码,查看debug

image-20210419211247609

  • 他执行了login方法,我们进去看看

image-20210419211604677


image-20210419211814191

在这里插入图片描述

  • 最后生成token↑

image-20210419212054119

image-20210419212129028

image-20210419212326546

  • 阿昌发现这里并没有获取到存储我们后端发来的token,那他是在哪里存储的呢?

  • 然后我们去store下面看看
    image-20210419212740207

  • 发现他设置了token,res.token

image-20210419212836084

  • setToken的来源在哪里,ctrl+左键点SET_TOKEN

image-20210419212921306

  • 发现他在Cookie中通过set(),将token设置到了cookie中

image-20210419212949236

  • 然后他们一般会帮axious封装到request.js 脚本中

image-20210419213218381

  • 我们来看看,果然不出所料

image-20210419213317215

  • 从cookie中获取token,并拦截每一次的请求,在请求头上设置token,并发送,所有每个请求,后端都会接收到token

image-20210419213403361

  • 登录之后,根据账号密码生成token后,他每一次请求都会在cookie中携带token!!!

image-20210419213823192

  • 然后我们输入正确的账号密码验证码,就登录了若依的登录页面

image-20210419213901996


通过docker搭建Redis集群的步骤如下: 1. 创建容器:使用docker命令创建多个Redis容器,每个容器代表一个节点。例如,可以使用以下命令创建一个名为redis-node-1的节点容器: ``` docker run --name redis-node-1 -p 6381:6379 -d redis ``` 2. 进入容器:使用docker exec命令进入容器内部,例如,可以使用以下命令进入redis-node-1容器: ``` docker exec -it redis-node-1 /bin/bash ``` 3. 构建集群关系:在容器内部,使用Redis命令行工具,将新增的节点作为master节点加入原集群。例如,可以使用以下命令将节点redis-node-7加入集群: ``` redis-cli -p 6381 cluster add-node <new_node_ip:port> <existing_node_ip:port> ``` 4. 查看集群状态:使用Redis命令行工具查看集群的状态。例如,可以使用以下命令在节点redis-node-1上查看集群信息: ``` redis-cli -p 6381 cluster info ``` 通过以上步骤,你可以使用docker搭建Redis集群,并查看集群的状态。请根据实际情况进行操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [阿昌教你通过docker搭建Redis集群](https://blog.csdn.net/qq_43284469/article/details/122458602)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿昌喜欢吃黄桃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值