若依（RuoYi）开源框架-登录

学习目标：

使用，减少自己的工作量

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

环境要求：jdk1.8 MySQL Redis Maven Vue

使用若依：

1.下载并运行

2.看懂业务流程

3.进行二次开发

1.登录

1.1生成验证码

基本思路

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

1+1=？@ 2

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

将2存入Redis（用户提交表单后将结果与Redis中存储的结果进行比较）。

前端获取验证码方法

// 获取验证码
export function getCodeImg() {
  return request({
    url: '/code',
    headers: {
      isToken: false
    },
    method: 'get',
    timeout: 20000
  })
}

request又被封装：

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 100000
})

Vue获取图片是前端：

反向代理：url请求前端，进行代理，映射到后端；解决跨域问题（前端解决跨域问题）。

前端代码：将地址替换，process.env.VUE_APP_BASE_API 为统一前缀“dev-api”  替换为 “ ”。最后为 http://localhost:8091/code

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

后端代码：

 1.2登录具体流程

后端：

1、校验验证码

2、校验用户名和密码

3、生成Token

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

getInfo:获取当前用户的 角色和权限信息

getRouters:根据当前用户的权限获取动态路由。