前言：vscode中vue代码没有高亮显示，可以下载vetur插件解决，ctrl+点击无法跳转函数定义问题，可以下载vue-helper插件解决；idea中ctrl+点击函数即可跳转函数定义。
一、登录
1.生成验证码
基本思路：
后端生成一个表达式，1+1=？@2，
将1+1=？转换成流，生成图片，传给前端，
答案2存入redis
vue获取图片的请求：http://localhost:81/dev-api/captchaImage
请求的是后端还是前端？链接端口号是81，前端的端口号，因此请求的是前端；
反向代理，url请求前端，进行代理，映射到后端，解决跨域问题。
前后端端口号不一样，所以前后端交互存在跨域问题，前端通过反向代理方式解决跨域问题。
url端口号还是前端端口号，所以不存在跨域问题，利用代理映射到后端端口号，巧妙解决跨域，看起来是在请求前端，但实际上是在请求后端。
/dev-api 替换成' ' 再映射到 http://localhost:8080
最终请求为 http://localhost:8080/captchaImage
前端发起请求===>后端查询数据库sys_config表，查看是否开启了验证码，若是没有开启直接跳过生成验证码图片这一步===>生成uuid以及redis的key值===>验证码类型为math，则生成表达式，将式子转换成图片===>将答案存入redis数据库===>将图片和uuid返回给前端===>前端将图片显示在页面上，并将uuid存入表单。
2.登录的具体流程
后端：
- 校验验证码
- 校验用户名和密码
- 生成token
使用异步任务管理器，结合线程池，实现了异步的操作日志记录，和业务逻辑实现异步解耦合。
3. getInfo
获取当前用户的角色和权限信息，存储到VueX中；
写在ruoyi-ui目录中的permission.js文件中的router.beforeEach方法中，和login请求绑定在一起，发送login请求时，也会发送getinfo请求；另外，前端页面进行跳转时也会进到router.beforeEach这个方法中，发送getinfo请求。
4. getRouters
根据当前用户的权限获取动态路由
二、用户管理
流程：加载vue页面===>请求后台数据
1. getlist
(1)startPage()
pagehelper中的reasonable对参数进行逻辑处理，保证参数的正确性
(2)userService.selectUserList(user);
注解@DataScope(deptAlias = "d", userAlias = "u")
给表设置别名,表sys_dept的别名为d, 表sys_user的别名为u
2.deptTree
①查出所有的部门数据
②组装成树状结构
buildDeptTreeSelect：将10条记录组装成一个树状图
三、添加数据
reset()重置表单
getUser获取角色和部门信息
后端 user 业务逻辑
四、修改数据
这里的getUser方法除了要获取所有岗位和角色信息之外，还要获取当前用户已经拥有的岗位和角色。
先删除再新增
结合上两张图片中的代码，总结数据库操作：
1.修改user
2.重新维护user_post和user_role
五、异步任务管理器
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));通过异步任务管理器记录登录日志
1.AsyncManager.me()获取一个AsyncManager对象
2.执行execute方法，执行任务，传入的是一个Task对象，实现了runnable接口，表示它是一个任务，由线程Thread去执行。
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.创建数据表
use ry_vue;
create table test_user(
id int primary key auto_increment,
name varchar(11),
password varchar(11)
);2.系统工具===>代码生成
3.导入后，点击编辑
前端类型后来改成vue2版本了，vue3时前端test页面不显示，猜测是框架不匹配
4.点击生成代码
5.解压
main(java后端代码)
vue(Vue前端代码)
sql(菜单sql语句)
6.导入代码，重启项目
进入main目录下，复制java和resource目录，粘贴到ruoyi-vue项目的ruoyi-admin目录下的main目录中；
前端同样粘贴完成。
重启项目：前端执行npm run dev；后端重新构建后，运行RuoYiApplication.java
