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

前言: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/707772.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue a-table 实现指定字段相同数据合并行

vue a-table 实现相同数据合并行 实现效果代码实现cloums数据格式数据源格式合并代码 实现效果 代码实现 cloums数据格式 const getColumns function () {return [{title: "分类",dataIndex: "checked",width: "150px",customRender: (text, …

JMeter--9.录制脚本

录制步骤 1.新建线程组:测试计划->线程->线程组 测试计划下,至少要有1个线程组,因为在录制器中需要选择【目标控制器】 2. 新建录制器:测试计划->非测试原件->HTTP(S)测试脚本记录器(HTTP代理服务器&…

【vue】vue2 和 vue3 的区别,响应式/性能提升/渲染函数/插槽

vue2/vue3 的对比 响应式原理 vue2 使用 definePropertyvue3 使用 proxyapi vue2 是选项式 options API 基于对象的方式,将组件的选项 data,methods 等作为组件实例属性代码逻辑比较复杂,难以维护data 必须是函数使用 mixin 复用相同逻辑 命…

Ansible自动化运维(四)jinja2 模板、Roles角色详解

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

PHP7.3 GD库报错imagecreatefromstring(): No JPEG support in this PHP build

最近在做docker容器的时候遇到了问题,安装的GD库没有JPEG支持,因为项目用到了绘图技术,这个支持必不可少。要解决这个问题也很简单: 安装jpeg支持,重新编译gd库,生成gd.so文件,重新加载gd库扩展…

Springboot+vue的考务报名平台(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频: Springbootvue的考务报名平台(有报告)。Javaee项目,springboot vue前后端分离项目。 项目介绍: 本文设计了一个基于Springbootvue的前后端分离的考务报名平台,采用M(model&#xff0…

vue2后台管理系统demo,包含增删查改、模糊搜索、分页

因一直敲小程序,vue不熟练,自己练手项目,就包含增删查改以及模糊搜索分页 一、页面简单但功能齐全 二、数据是mock模拟 三、启动步骤 1、 json-server --watch data.json 启动mock数据 2、npm i 下载依赖 3、npm run serve 四、github地址…

ETH网络中的账户

ETH网络中的账户 Externally owned accounts (EOA) - 外部账户 由用户控制,我们导入助记词创建的账户就属于此类账户。 Contract accounts (smart contracts) - 合约账户 合约账户由以太坊虚拟机执行的代码控制。它也被称为智能合约。合约帐户有相关的代码和数据存…

Redis的高性能之道

前言:做码农这么多年,我也读过很多开源软件或者框架的源码,在我看来,Redis是我看过写得最优美、最像一件艺术品的软件,正如Redis之父自己说的那样,他宁愿以一个糟糕的艺术家身份而不是一名好程序员被别人记…

python opencv比较图片相似度

目录 一:均值哈希算法 二:三直方图算法 三:单通道直方图 一:均值哈希算法 均值哈希算法是一种快速比较图像相似度的方法。它首先将图像转化为灰度图像,然后计算图像的均值,接着将每个像素的

探索AI视频模型的无限可能:OpenAI的Sora引领创新浪潮

文章目录 📑前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动🌤️总结 📑前言 随着人工智能技术的蓬勃发展,AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中,OpenAI推出的首个AI视…

算法沉淀——动态规划之回文串问题(上)(leetcode真题剖析)

算法沉淀——动态规划之回文串问题 01.回文子串02.最长回文子串03.分割回文串 IV04.分割回文串 II05.最长回文子序列06.让字符串成为回文串的最少插入次数 01.回文子串 题目链接:https://leetcode.cn/problems/palindromic-substrings/ 给你一个字符串 s &#xf…

雾锁王国服务器官方配置要求说明

雾锁王国/Enshrouded服务器CPU内存配置如何选择?阿里云服务器网aliyunfuwuqi.com建议选择8核32G配置,支持4人玩家畅玩,自带10M公网带宽,1个月90元,3个月271元,幻兽帕鲁服务器申请页面 https://t.aliyun.com…

C# TCP/IP协议

在C#中编写TCP/IP通信 //开启监听各个网络的连接是否成功 //开启服务端,监听,并且进入监听线程 try { IPAddress ip IPAddress.Parse(HostAddress); IPEndPoint ipe new IPEndPoint(ip, HostPort); m_services new Socket(Add…

深入JVM:解析OOM的三大场景,原因及实战解决方案

在Java应用程序开发中,OutOfMemoryError(OOM)是一个令人头痛的问题。当JVM中的内存无法满足应用程序的需求时,就会抛出这个错误。本文将深入探讨OOM的三大场景:堆内存溢出、方法区内存溢出和栈内存溢出,并分…

ChatGPT能替代什么人?

上一讲关于ChatGPT的热炒,其实对于我们来说算是敲了敲警钟。 其实在今天,关于ChatGPT,最多人关注的一个问题就是:ChatGPT能取代人吗,或者说能抢人的饭碗么吗? 有人说不能,也有人说能&#xff…

代码随想录算法训练营day30 || 332.重新安排行程(未完成),51. N皇后,37. 解数独(未完成)

这就是传说中的N皇后&#xff1f; 回溯算法安排&#xff01;| LeetCode&#xff1a;51.N皇后_哔哩哔哩_bilibili // 时间复杂度O(n^2) // 空间复杂度O(n^2)class Solution {List<List<String>> res new ArrayList<>();public List<List<String>>…

【机器人最短路径规划问题(栅格地图)】基于蚁群算法求解

基于蚁群算法求解机器人最短路径规划问题的仿真结果 仿真结果 收敛曲线变化趋势 蚁群算法求解最优解的机器人运动路径 各代蚂蚁求解机器人最短路径的运动轨迹

Java+SpringBoot+Vue:瑜伽馆管理的黄金组合

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

LeetCode 刷题 [C++] 第128题.最长连续序列

题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 题目分析 对于数组中存在的连续序列&#xff0c;为了统计每个连续序列的…