什么是若依

若依是一个开源项目

官网：http://www.ruoyi.vip/

研究若依的目标

1. 使用、减少自己的工作量。
2. 学习优秀开源项目底层的编程思想、设计思路，提高自己的编程能力。

准备

架构基础：SpringBoot + Vue

后端技术：SpringBoot、Spring Security、JWT、MyBatis、Druid、Fastjson

前端技术：Vue、Vuex、Element-ui、Axios、Sass、Quill

环境要求：

• JDK 1.8+
• MySQL
• Redis
• Maven
• Vue

使用

• 下载运行

  官网地址下载前后端分离版。

  后端配置：MySQL、Redis，运行admin模块；

  前端配置：安装依赖(npm install)、启动前端(npm run dev)。

• 看懂业务流程

• 进行二次开发（使用：根据自己的需求）

登录

验证码展示

前端实现

Vue获取图片理论上应该调用后端，但http://localhost/dev-api/captchaImage 是请求的前端，

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

proxy: {
  // detail: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {
    target: `http://localhost:8080`,
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
}

/dev-api 替换成 ’ ’ 在映射到 http://localhost:8080/captchaImage，请求后端代码。

后端实现

• 后端生成一个表达式，1+1=2
• 1+1=?@2
• 将 1+1=? 转成图片，传到前端展示
• 将 2 存入 Redis

登录实现

• 校验验证码
• 校验用户名密码
• 生成token返回

过程中使用了异步任务管理器，结合线程池，实现了异步记录日志，与与业务逻辑实现异步解耦合。

getInfo

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

*:*:*

getRouters

根据当前用户的权限获取动态路由（路由：不同用户对应的不同菜单展示）。

用户管理

流程：初始化加载页面 -> 请求后台数据

getList()：获取用户数据。

getDeptTree()：获取所有部门组成的树装结构。

添加用户

reset 是表单重置

getTreeselect 获取部门树状图

getUser 获取角色和部门信息

后端 User 业务

修改用户

点击修改按钮，getUser方法除了要获取所有岗位和角色信息之外，还要获取当前用户已经拥有的岗位和角色。

操作数据库：1、修改 user； 2、重新获取user_post 和 user_role。（修改数据流程为先删除数据再添加数据）

删除用户

删除用户为逻辑删除，更改了 user 表的删除标志字段。

异步任务管理器

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

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

1、AsyncFactory.recordLogininfor 登录用户的信息封装成一个任务交给线程对象来执行。

2、AsyncManager.me() 获取一个 AsyncManager 对象，调用 execute 方法执行任务，传入一个Task对象，execute 实现了 Runnable 接口，由线程 Thread 去执行。

异步任务管理器，内部定义了一个线程池，根据业务创建添加日志的任务，交给线程池来处理，这样做到日志和业务的抽象解耦合，日志全部统一处理。

代码自动生成

创建数据表

导入

菜单

系统管理

代码生成

编辑

基本信息

字段信息

生成信息

生成代码

点击生成代码

结构

main（Java 后端代码）

vue（Vue 前端代码）

SQL（菜单 SQL）

导入代码

导入后重启项目