若依— — 快速入门【源码分析】

蔚落 2024-03-24 17:47 52阅读 0赞

## 若依— — 快速入门 ##

### 1 什么是若依 ###

> 官网地址：http://www.ruoyi.vip/
> 
>  *  若依是一款优秀的开源项目，涉及到企业开发中大部分的管理系统，我们依此为模板进行二次开发，可以快速开发出符合大部分公司中的后台管理系统。

### 2 使用若依 ###

> 使用开源项目流程：
> 
> 1.  下载并运行
> 2.  看懂其中的业务流程
> 3.  进行二次开发

*  下载  
    ![在这里插入图片描述][aab22589f24b40d193a669b7693ac18a.png]  
    ![在这里插入图片描述][c41fef3e4da5412eb7b9dd8f5d960341.png]
 *  修改配置文件，配置数据源和Redis
 *  下载前端依赖，然后运行

> 同时别忘记启动本机redis
> 
>  *  Redis官网地址：https://redis.io/
>  *  如果没有redis的可以去官网下载一个

### 3 若依源码分析 ###

#### 3.1 登录流程分析 ####

> 基本思路：  
> 后端生成一个表达式，然后根据@分割，将表达式转为图片传给前端，将表达式结果存入Redis，最后用户通过表单提交，判断结果是否正确，以此来达到区分人机的效果。

详细流程：  
①前端通过vue反向代理请求到后端接口`http://localhost/dev-api/captchaImage`【避免跨域问题】  
②后端判断是否开启验证码开关`captchaEnabled`，同时根据captchaType验证码类型，生成对应的表达式，同时生成一个UUID作为存入验证码的key

> ![在这里插入图片描述][d77607f525e94428a7db4a3885d8aa9c.png]  
> 根据`@`符号分割，然后将`8+1`通过IO操作生成图片传给前端，将结果9存入redis。redis的key为：用户每次请求时后端生成的UUID。

前缀+UUID作为redis的key：  
![在这里插入图片描述][e272be8c3cbd474198da0b9c99f1ec9c.png]

将生成的UUID和验证码图片，传给前端。

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

③前端展示图片，同时保存后端返回的UUID  
④用户输入验证码后，前端携带UUID+用户输入的验证码结果请求后端`/login`进行登录

> ![在这里插入图片描述][08d2b3fc5cc7402b8051c0b945a7da77.png]
> 
>  *  根据前端传入的UUID取对应redis的value，然后将value与前端传入的code做比较，如果正确，则进行用户名密码校验，校验成功则生成token，并存入redis

// 验证码校验
      validateCaptcha(username, code, uuid);
      // 登录前置校验
      loginPreCheck(username, password);
      // 用户验证
      ...
      //最后生成token返回给前端
      return tokenService.createToken(loginUser);

![在这里插入图片描述][6e1bcb8f604d486899f72ad8bf1eb525.png]  
⑤用户后面直接携带token访问后端不用重复登录

> 前端将后端返回的token存入浏览器的cookie中，并且让每次请求都携带上token
> 
>  *  浏览器的cookie中存入token：  
>     ![在这里插入图片描述][3cec40e09234468b93baf491958eb792.png]
>  *  后端每次请求携带上token：  
>     ![在这里插入图片描述][4a7f447f6cec4cb788c442a260ee401f.png]

例如：

①后端生成一个表达式，1+1=2
    1+1=?@2
    ②1+1=? 转成图片，传到前端进行展示
    ③表达式结果2存入redis

> 前端获取验证码的请求URL：http://localhost/dev-api/captchaImage
> 
>  *  若依的后端端口是8080，前端是80，为什么上面的URl直接通过80端口就能访问到后台呢？
>  *  答案就是：反向代理

![在这里插入图片描述][187bf40572ee4eb7a50a5705e2780fe6.png]

/dev-api 替换成'' 再映射到
    http://localhost:8080
    
    # 最后的URL被替换为：http://localhost:8080/captchaImage

#### 3.2 登录具体流程 ####

> 若依的安全框架之前使用的是shiro，后来转换为了SpringSecurity

##### ①校验验证码 #####

##### ②校验用户名和密码 #####

##### ③生成Token #####

##### ④异步任务管理器记录日志 #####

> 使用异步任务管理器，结合线程池，实现了异步记录日志的操作，成功实现和业务逻辑异步解耦合。

##### ⑤getInfo #####

> 获取当前用户的角色和权限信息，存储到Vuex中  
> 权限匹配：`*:*:*`  
> 请求后端`/getInfo`获取当前用户信息，包括拥有哪些权限等：  
> ![在这里插入图片描述][e0abb02d35d44056858517b86bccf1d9.png]  
> 当前用户所拥有的权限：  
> ![在这里插入图片描述][c8c73f934ab5489db171bd031ac51867.png]

##### ⑥GetRouters #####

> 根据当前用户的权限获取动态路由
> 
>  *  因为若依是一个权限管理的系统，因此不同用户对应的左侧菜单栏是不同的

![在这里插入图片描述][10d96b7dc30d417fbf50d29b8583806b.png]

*  若依底层维护了几张表：

> 包括：sys\_menu，其中借助了parent\_id来进行层级的管理![在这里插入图片描述][d12bc43d039c4d04abb37f428a1675d4.png]

#### 3.3 用户管理 ####

> 流程：加载Vue页面 - - 请求后台数据

例如：getList

1.  startPage():  
    ![在这里插入图片描述][1e5b589906c9481ea7fc1b0428be879c.png]

public class PageUtils extends PageHelper{
        
        /**
         * 设置请求分页数据
         */
        public static void startPage()
        {
        
        	//如果请求中没有携带请求分页参数，则自动设置
            PageDomain pageDomain = TableSupport.buildPageRequest();
            //默认为：1
            Integer pageNum = pageDomain.getPageNum();
            //默认为：10
            Integer pageSize = pageDomain.getPageSize();
            String orderBy = SqlUtil.escapeOrderBySql(pageDomain.getOrderBy());
            Boolean reasonable = pageDomain.getReasonable();
            PageHelper.startPage(pageNum, pageSize, orderBy).setReasonable(reasonable);
        }
        ...
    }

> PageHelper中的reasonable（合理的）对参数进行逻辑处理，保证参数的正确性。
> 
>  *  例如：pageNum= 0/ -1, 则直接将pageNum设置为1

1.  userService.selectUserList(user);

> 注解`@DataScope(deptAlias="d", userAlias = "u")`是给表设置别名的
> 
>  *  sys\_dept d, sys\_user u

/**
         * 根据条件分页查询用户列表
         * 
         * @param user 用户信息
         * @return 用户信息集合信息
         */
        @Override
        @DataScope(deptAlias = "d", userAlias = "u")
        public List<SysUser> selectUserList(SysUser user)
        {
        
            return userMapper.selectUserList(user);
        }

1.  treeselect

> 1.  查出所有的部门数据
> 2.  组装成树状结构  
>     buildDeptTreeSelect：将10条记录组装成一个树状图  
>     recursionFn(depts, dept);  
>     1、先找到顶级节点，再找到它的子节点  
>     2、遍历顶级节点的子节点，再找到它的子节点

后端：  
![在这里插入图片描述][e307d723e06f4174891b2650f81a8875.png]  
前端：  
![在这里插入图片描述][047fe05fa1404fe089f80e52feaa50be.png]

封装VO：

*  封装前：  
    ![在这里插入图片描述][ebec6f7bb3d1457bb2020dcf49907233.png]
 *  封装后：  
    ![在这里插入图片描述][a50b185cdf134e9cb32bce706594a126.png]  
    点击树状图中的数据：  
    ![在这里插入图片描述][0f3a06fdbf4b4bb2af539b1c8ef7d31d.png]

#### 3.4 添加数据 ####

![在这里插入图片描述][56a649af934a4ca9a6d23f0967c81065.png]

>  *  reset：表单重置
>  *  getTreeselct：获取部门树状图
>  *  getUser：获取角色和部门信息

后端User业务：

![在这里插入图片描述][3cb4fad09fbc443e9fe947de5429286b.png]

#### 3.5 修改数据 ####

> 以修改用户信息为例  
> ①先根据userId查询用户数据【请求的路径中有userId就是修改，没有就是查询】–GET请求  
> ②根据userId进行修改【若依中的修改是：先删除再新增】–PUT请求

1.  根据userId获取用户信息

>  *  如果有id就是修改，如果没有就是查询操作  
>     ![在这里插入图片描述][28f8713a726f4ff19a844680539f17e5.png]
>  *  修改用户信息的前端操作：  
>     ![在这里插入图片描述][4d776f0d2e7948839747f3d16c77f026.png]

![在这里插入图片描述][a526917d00b04fc5bffd2cfebb8b4053.png]

> 这里的getUser方法除了要获取所有岗位和角色信息之外，还要获取当前用户已经拥有的岗位和角色

1.  根据userId发起PUT请求，修改用户信息  
    ![在这里插入图片描述][3498c886d4fc4c8fa2fb9c7d56ad8605.png]
2.  后端进行修改逻辑处理

/**
     * 修改保存用户信息
     * 
     * @param user 用户信息
     * @return 结果
     */
    @Override
    @Transactional
    public int updateUser(SysUser user)
    {
        
        Long userId = user.getUserId();
        // 删除用户与角色关联
        userRoleMapper.deleteUserRoleByUserId(userId);
        // 新增用户与角色管理
        insertUserRole(user);
        // 删除用户与岗位关联
        userPostMapper.deleteUserPostByUserId(userId);
        // 新增用户与岗位管理
        insertUserPost(user);
        return userMapper.updateUser(user);
    }

数据库：

1.  修改user
2.  重新维护user\_post和user\_role【用户-岗位，多对多关系，维护中间表】

> 根据是否有userId来区分是新增还是修改
> 
>  *  修改操作：直接先删除，然后再新增记录关系

#### 3.6 删除数据 ####

![在这里插入图片描述][4618e7bb5fb64d2c9b6352dd7f4b7c2a.png]

#### 3.7 异步任务管理器 ####

AsyncManager.me().execute(AsyncFactory.recordLogininfor(
    username, Constants.LOGIN_FAIL,
    MessageUtils.message("user.password.not.match")));

> 通过异步任务管理器记录登录日志：
> 
> 1.  AsyncManager.me()获取一个AsyncManager对象
> 2.  执行execute方法，执行任务，传入的是一个Task对象，实现了Runnable接口，是一个任务，由线程Thread去执行。

若依框架中维护了一个`sys_oper_log`表，用于记录操作日志：  
![在这里插入图片描述][95ac536f0eaf48d381622d238845f152.png]  
①通过请求方法中的@Log日志，直接记录操作

/**
     * 删除用户
     */
    @PreAuthorize("@ss.hasPermi('system:user:remove')")
    @Log(title = "用户管理", businessType = BusinessType.DELETE)
    @DeleteMapping("/{userIds}")
    public AjaxResult remove(@PathVariable Long[] userIds){
        
    	...
    }

②直接异步调用日志记录

public String login(String username, String password, String code, String uuid)
        {
        
            // 验证码校验
            validateCaptcha(username, code, uuid);
            // 登录前置校验
            loginPreCheck(username, password);
            // 用户验证
            Authentication authentication = null;
            try
            {
        
                UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(username, password);
                AuthenticationContextHolder.setContext(authenticationToken);
                // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
                authentication = authenticationManager.authenticate(authenticationToken);
            }
            catch (Exception e)
            {
        
                if (e instanceof BadCredentialsException)
                {
        
                	//异步记录日志打印
                    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
                    throw new UserPasswordNotMatchException();
                }
            }
            finally
            {
        
                AuthenticationContextHolder.clearContext();
            }
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
            LoginUser loginUser = (LoginUser) authentication.getPrincipal();
            recordLoginInfo(loginUser.getUserId());
            // 生成token
            return tokenService.createToken(loginUser);
        }

打印日志实现：

1.  创建线程池，配置核心参数等
2.  创建任务  
    ![在这里插入图片描述][bf45df69b78c4a459b230c83ba85c468.png]
3.  记录日志  
    ![在这里插入图片描述][2a311295928b4cb69073f25f13ae85e4.png]

/**
     * 记录登录信息
     * 
     * @param username 用户名
     * @param status 状态
     * @param message 消息
     * @param args 列表
     * @return 任务task
     */
    public static TimerTask recordLogininfor(final String username, final String status, final String message,
            final Object... args)
    {
        
        final UserAgent userAgent = UserAgent.parseUserAgentString(ServletUtils.getRequest().getHeader("User-Agent"));
        final String ip = IpUtils.getIpAddr();
        return new TimerTask()
        {
        
            @Override
            public void run()
            {
        
                String address = AddressUtils.getRealAddressByIP(ip);
                StringBuilder s = new StringBuilder();
                s.append(LogUtils.getBlock(ip));
                s.append(address);
                s.append(LogUtils.getBlock(username));
                s.append(LogUtils.getBlock(status));
                s.append(LogUtils.getBlock(message));
                // 打印信息到日志
                sys_user_logger.info(s.toString(), args);
                // 获取客户端操作系统
                String os = userAgent.getOperatingSystem().getName();
                // 获取客户端浏览器
                String browser = userAgent.getBrowser().getName();
                // 封装对象
                SysLogininfor logininfor = new SysLogininfor();
                logininfor.setUserName(username);
                logininfor.setIpaddr(ip);
                logininfor.setLoginLocation(address);
                logininfor.setBrowser(browser);
                logininfor.setOs(os);
                logininfor.setMsg(message);
                // 日志状态
                if (StringUtils.equalsAny(status, Constants.LOGIN_SUCCESS, Constants.LOGOUT, Constants.REGISTER))
                {
        
                    logininfor.setStatus(Constants.SUCCESS);
                }
                else if (Constants.LOGIN_FAIL.equals(status))
                {
        
                    logininfor.setStatus(Constants.FAIL);
                }
                // 插入数据
                SpringUtils.getBean(ISysLogininforService.class).insertLogininfor(logininfor);
            }
        };

> 封装了登录用户的信息，执行添加操作，这里不会执行，而是将任务交给线程对象来执行。
> 
>  *  异步任务管理器，内部定义了一个线程池，然后根据业务创建添加日志的任务，交给线程池来处理，这样做到日志和业务的抽象，解耦合，日志全部统一处理。

#### 3.8 代码自动生成（menu菜单） ####

1.  创建数据表

use ruoyi_vue;
    create table test_user(
     id int primary key auto_increment,
     name varchar(11),
      password varchar(11)
    );

1.  系统工具 - 代码生成  
    完整步骤：  
    ①在数据库中创建一个表

create table test_user(
        id int primary key ,
        name varchar(11),
        age int
    )

②导入表

> 系统工具-代码生成

![在这里插入图片描述][8ca6597539e74775b5dcc053688e2b0f.png]  
③导入之后，编辑我们导入的test\_user表

> 需要新增表的字段描述和表的生成信息、表的描述等，否则无法成功生成正确的代码

![在这里插入图片描述][f1b085648b314eae906689aec532e607.png]  
![在这里插入图片描述][678e8bcae2c14442b7e6be2e254dbf30.png]  
![在这里插入图片描述][e446e1c935334180bf2e21389226cc50.png]  
④点击生成代码  
![在这里插入图片描述][1f183207d1cd45819cac2f97aff473c7.png]  
3. 解压，使用代码  
![在这里插入图片描述][700d7e79c23f4ea4bda3560ee6062212.png]

>  *  main（Java后端代码）
>  *  Vue（Vue前端代码）
>  *  SQL（菜单SQL）

对应复制或直接执行使用即可。

`注意：`

> 如果后端抛出404异常，点击Idea的rebuild project，重新启动即可

[aab22589f24b40d193a669b7693ac18a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/625c6926f8ff46af8f6142c9c3ec5489.png
[c41fef3e4da5412eb7b9dd8f5d960341.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/cc37bb32bcd24b67a5d0dc5e555df9c1.png
[d77607f525e94428a7db4a3885d8aa9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/08172b63261041d0bd91d0a3e0049899.png
[e272be8c3cbd474198da0b9c99f1ec9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d57ae09b962b45c39af340d98cd61879.png
[08d2b3fc5cc7402b8051c0b945a7da77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7ba0cfc10197488cabb12108f334807e.png
[6e1bcb8f604d486899f72ad8bf1eb525.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e1f814ba797b428387e5940bb99544e7.png
[3cec40e09234468b93baf491958eb792.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4af843ee9a2b4d678dcaed69f6336d42.png
[4a7f447f6cec4cb788c442a260ee401f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1a565189969f452ca5dfb7eea3a76868.png
[187bf40572ee4eb7a50a5705e2780fe6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/79aa8a09201640b6976498cd005e1278.png
[e0abb02d35d44056858517b86bccf1d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/755e02581a4144fd974c57e1288d8265.png
[c8c73f934ab5489db171bd031ac51867.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c7080c6e1bc64c4abd7add9141cf8a4d.png
[10d96b7dc30d417fbf50d29b8583806b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ed51f34349fc4c899654bad6c1ce7503.png
[d12bc43d039c4d04abb37f428a1675d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/cfaad0a1afa840fbbd979f267bcf7be5.png
[1e5b589906c9481ea7fc1b0428be879c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/88ec5cf2062b4d19bee31e5f0fed8ce2.png
[e307d723e06f4174891b2650f81a8875.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/92dac4c6baa14c87acae921714eee601.png
[047fe05fa1404fe089f80e52feaa50be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/35623f37a48a4a8e9abdae3749168e74.png
[ebec6f7bb3d1457bb2020dcf49907233.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7994207abeda43878da6f07c1266a7c1.png
[a50b185cdf134e9cb32bce706594a126.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f01dbe64e44b49fabc6abb4642e1a25a.png
[0f3a06fdbf4b4bb2af539b1c8ef7d31d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ad1e8b80c5174136b981332948109887.png
[56a649af934a4ca9a6d23f0967c81065.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e8f198e03e8346b09e52a50a9926801f.png
[3cb4fad09fbc443e9fe947de5429286b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/83a0b3bb769a427dbf1bd8de7a0d8f2b.png
[28f8713a726f4ff19a844680539f17e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a44472b812294a6584fff298a4ac780a.png
[4d776f0d2e7948839747f3d16c77f026.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/624743410cc74492808de64ab4a48c59.png
[a526917d00b04fc5bffd2cfebb8b4053.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d539d4d33600486583afd3d6f9df33b4.png
[3498c886d4fc4c8fa2fb9c7d56ad8605.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2082d076f6d24a4898ab9a572ea9ea76.png
[4618e7bb5fb64d2c9b6352dd7f4b7c2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8fd2cc989d21417ba67c12fa4bc39897.png
[95ac536f0eaf48d381622d238845f152.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c07ca28f2b874b83b7130cce547c0b1e.png
[bf45df69b78c4a459b230c83ba85c468.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a1f8888b718f4bcda96b0788e4d32997.png
[2a311295928b4cb69073f25f13ae85e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/aa394f9dd76444ca93865f1041f80cce.png
[8ca6597539e74775b5dcc053688e2b0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8f7f48f1b53e4f0ba1e3f95d265447a5.png
[f1b085648b314eae906689aec532e607.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/90a0ed912f194f7bb3101f45bc0f8328.png
[678e8bcae2c14442b7e6be2e254dbf30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f40765295ff04a9b884ad2ef9c0e7c79.png
[e446e1c935334180bf2e21389226cc50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8313b7f59a9946f1b287db5a270bba37.png
[1f183207d1cd45819cac2f97aff473c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/646bd7ebcd5b42338e01b45f0957a94e.png
[700d7e79c23f4ea4bda3560ee6062212.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/22d71aec44e643ebbf5a633e94a8858a.png