沉梦听雨的编程指南
  • 项目笔记
  • RuoYi-Vue
沉梦听雨
2023-06-13
目录

若依学习笔记

# 若依（前后端分离版）

# 如何快速上手开源项目？

  • 先看前端，再看后端

  • 打开浏览器，检查网络，粘贴请求的路径

  • 看前端代码

  • 到后端代码 按 全局文件搜索：crtl + shift + f 该路径，快速找到对应代码

# 文件结构

# 后端结构

com.ruoyi     
├── common            // 工具类
│       └── annotation                    // 自定义注解
│       └── config                        // 全局配置
│       └── constant                      // 通用常量
│       └── core                          // 核心控制
│       └── enums                         // 通用枚举
│       └── exception                     // 通用异常
│       └── filter                        // 过滤器处理
│       └── utils                         // 通用类处理
├── framework         // 框架核心
│       └── aspectj                       // 注解实现
│       └── config                        // 系统配置
│       └── datasource                    // 数据权限
│       └── interceptor                   // 拦截器
│       └── manager                       // 异步处理
│       └── security                      // 权限控制
│       └── web                           // 前端控制
├── ruoyi-generator   // 代码生成（可移除）
├── ruoyi-quartz      // 定时任务（可移除）
├── ruoyi-system      // 系统代码
├── ruoyi-admin       // 后台服务
├── ruoyi-xxxxxx      // 其他模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 前端结构

├── build                      // 构建相关  
├── bin                        // 执行脚本
├── public                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
│   └── robots.txt             // 反爬虫
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── plugins                // 通用方法
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── .editorconfig              // 编码格式
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .eslintignore              // 忽略语法检查
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── babel.config.js            // babel.config.js
├── package.json               // package.json
└── vue.config.js              // vue.config.js
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

# 1.1 什么是若依？

开源项目，学习开源项目的目标：

1、用，减少自己的工作量

2、学习优秀开源项目底层的编程思想，设计思路，提高自己的编程能力

官方文档：[介绍 | RuoYi (opens new window)](http://doc.ruoyi.vip/ruoyi-vue/)

更系统的学习，建议看官方文档

基础：Spring Boot + Vue

环境要求：

1、JDK 1.8+

2、MySQL

3、Redis

4、Maven

5、Vue

# 1.2 使用若依

使用开源项目的步骤：

1、下载并运行

2、看懂业务流程

3、进行二次开发

  • 去官网下载源代码

  • 配置数据库 MySQL、Reids

  • 本地执行 SQL 脚本

  • 在工程中配置数据库 -- application-druid.yml 文件中修改

  • Redis 配置

启动前端：

1、安装依赖 npm install

2、启动 npm run dev

# 1.3 登录

# 1.3.1 生成验证码

基本思路

后端生成一个表达式，1+1=2

1+1=?@2

1+1=? 转成图片，传到前端进行展示

2 （答案）存入 Reids

前端

http://localhost/dev-api/captchaImage (opens new window) (opens new window)前端

页面信息都在 views 文件夹里面

Vue 获取图片，前端还是后端？ -- 后端

反向代理，url 请求前端，进行代理，映射到后端，解决跨越问题

image

/dev-api 替换成'' 再映射到

http://localhost:8080
1
2
3

http://localhost:8080/captchaImage

后端

到后端代码 按 全局文件搜索：crtl + shift + f 该路径，快速找到对应代码

image

# 1.3.2 登录的具体流程

后端：

1、校验验证码

2、校验用户名和密码

3、生成 Token

使用异步任务管理器，结合线程池，实现了异步的操作

日志记录，和业务逻辑实现异步解耦合。

# 1.3.3 getInfo

获取当前用户的角色和权限信息，存储到 Vuex 中

* 是通配符，模块:菜单:功能

// spring security 里面的东西
// 代表所有权限
*:*:*
1
2
3

image

后端相应代码

image

# 1.3.4 getRouters

根据当前用户的权限获取动态路由，不同权限的用户，展现的菜单不一样

parent_id 为 0 的是最高级菜单，其他为子菜单

image

先查询出的是父节点菜单，子菜单包含在 children 里。

image

# 1.4 用户管理

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

1、getList -- 加载用户管理列表

image

1.1、startPage() -- 分页

PageHelper 中的 reasonable 对参数进行逻辑处理，保证参数的正确性，

当 pageNum = 0/-1 时，自动填写 pageNum = 1

1.2、userService.selectUserList(user);

注解 @DataScope(deptAlias = "d", userAlias = "u")

给表设置别名的，sys_dept d，sys_user u

2、treeselect -- 加载左边的树状图列表

（1）查出所有的部门数据

（2）组装成树状结构

buildDeptTreeSelect：将 10 条记录组装成一个树状图

recursionFn(depts, dept);

2.1、先找到顶级节点，找到它的子节点

2.2、遍历顶级节点的子节点，再找到它的子节点

image

点击树状图中的数据

image

# 1.5 添加数据

前端 -- 添加的方法

image

reset 是表单重置

getTreeselect 获取部门树状图

getUser 获取角色和部门信息

后端 -- User 业务

插入用户的方法包含插入三张表，目的是增添关联表的记录

image

# 1.6 修改数据

image

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

image

数据库：

1、修改 user

2、重新维护 user_post 和 user_role

修改的逻辑是：先删后增

这样子更加安全，不用判断是否存在

image

# 1.7 删除数据

image

做判断，不能删除当前用户，并使用注解记录删除操作的日志信息到数据库中

# 1.8 异步任务管理器

image

AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN\_FAIL, MessageUtils.message("user.password.not.match")));
1

通过异步任务管理器记录登录日志

1、AsyncManager.me() 获取一个 AsycnManager 对象

image

2、执行 execute 方法，执行任务，传入的是一个 Task 对象（在异步工厂的类里写），实现了 Runnable 接口，是一个任务，由线程 Thread 去执行

    /**
     * 记录登录信息
     * 
     * @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);
            }
        };
    }
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
52
53
54

封装了登录用户的信息，执行添加操作，这里不会执行，而是将任务交给线程对象来执行。

异步任务管理器，内部定义了一个线程池，然后根据业

务创建添加日志的任务，交给线程池来处理，这样做到

日志和业务的抽象，解耦合，日志全部统一处理。

使用线程池有什么用？

提高线程利用率

# 1.9 代码自动生成

# 1、创建数据表

use ruoyi_vue;

create table test_user(
	id int primary key auto_increment,
	name varchar(11),
	password varchar(11)
);
1
2
3
4
5
6
7

# 2、系统工具 -> 代码生成

image

# 3、编辑

基本信息

image

字段信息

image

生成信息

image

# 4、点击生成代码

image

# 5、解压

生成代码后下载压缩包，里面有三个文件：

  • main（Java 后端代码）

  • vue（Vue 前端代码）

  • SQL（菜单 SQL）

# 6、导入代码，重启项目

  • 如果后端抛出 404 异常，可能是因为代码刚导进项目，还未被扫描到
  • rebuild project，重新启动即可
知识梳理

←

Theme by Vdoing | Copyright © 2023-2024 沉梦听雨 | MIT License