若依前后端分离版开源项目学习

news/2024/4/17 7:16:50

前言: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(){@Overridepublic 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


https://www.xjx100.cn/news/3293480.html

相关文章

外包干了3个月,技术倒退明显...

先说情况,大专毕业,18年通过校招进入湖南某软件公司,干了接近6年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

LACP——链路聚合控制协议

LACP——链路聚合控制协议 什么是LACP? LACP(Link Aggregation Control Protocol,链路聚合控制协议)是一种基于IEEE802.3ad标准的实现链路动态聚合与解聚合的协议,它是链路聚合中常用的一种协议。 链路聚合组中启用了…

JDK, JRE, 和 JVM 的解释

在Java编程中,JDK(Java Development Kit,Java开发工具包)、JRE(Java Runtime Environment,Java运行环境)和JVM(Java Virtual Machine,Java虚拟机)是三个核心概…

利用 ChatGPT 提升个人工作、生活品质

利用 ChatGPT 提升个人工作、生活品质和个人智慧是一个多方面而又切实可行的方法。 以下是一些具体的建议: 获取信息和知识: ChatGPT 可以回答各种问题并提供相关信息和知识。你可以利用它来查询工作中遇到的问题、学习新的知识领域或是获取日常生活中的…

林曦老师的新年礼物,送你三个学习锦囊

暄桐是一间传统美学教育教室,创办于2011年,林曦是创办人和授课老师,教授以书法为主的传统文化和技艺,皆在以书法为起点,亲近中国传统之美,以实践和所得,滋养当下生活。    在暄桐六阶读书课…

力扣● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

● 1049. 最后一块石头的重量 II 题目要把石头分成两堆,这两堆的重量差值最小。相撞之后剩下的石头重量就最小。其实就是要尽量把石头分为差不多重量的两堆,和昨天的● 416. 分割等和子集相似,这样就转换成了01背包问题。 和416题一样&…

【Kubernetes】k8s中容器之间、pod之间如何进行网络通信?

目录 PodKubernetes 网络模型同一Pod上的容器之间进行通信同一Node上的不同Pod之间进行通信不同Node上的Pod之间进行通信Service参考 Pod 首先来回顾一下Pod: Pod 是用于构建应用程序的最小可部署对象。单个 Pod 代表集群中正在运行的工作负载,并封装一…

JMeter实现接口自动化测试

一、JMETER的环境搭建 参考:https://www.cnblogs.com/qmfsun/p/4902534.html 二、JMETER的汉化 临时汉化方法:打开jmeter,options-->choose language-->选择语言 可以根据自己的需要选择简体中文或者繁体中文,如图&#xf…