Ruoyi-vue项目讲解

@[TOC]若依前后端调用接口解读
若依github官方下载地址
若依gitee官方下载地址

1.验证码时候的前端调用接口

调用前端登录界面的时候,调用的是login.vue这个文件中的created函数
调用created函数
这里我们查看getCode函数方法
getCode函数方法
可以看到,这里先调用了一个getCodeImg函数,然后接收到后端返回的值之后,再进行相应的处理,显示图片以及保存redis中的key,进入getCodeImg函数进行查看
getCodeImg函数
到api/login.js的文件下面查看getCodeImg函数
getCodeImg函数
可以看出,这里再次调用了一个request函数,查看request内容

import request from '@/utils/request'

查看request.js的文件
request.js中调用内容
这里的process.env.VUE_APP_BASE_API我们通过.env.development查看定义
在这里插入图片描述
可以看出,这里每次前端发出api的时候都会添加固定的前缀/dev-api前缀。

反向代理

除此之外,这里的url还调用了一次反向代理,在vue.config.js之中配置
反向代理配置
可以看出来这里跨域发送到后端的时候将process.env.VUE_APP_BASE_API转换为空字符串,并且将发送端口转为8080端口,通过浏览器我们也可以观察到前端发送的url请求内容前端的url调用调用的接口内容

2.验证码后端调用接口

发送完成之后,跨域转化完成之后就是localhost:8080/captchaImage接口,找到后端对应的调用部分,首先从数据库中查询是否开启验证码
查询是否开启验证码
接下来保存验证码在redis中保存的信息并且生成验证码,生成的字符串类似于4+1=?@5这种形式
生成验证码的部分
这里将4+1=?@5这块字符串拆分开来,将4+1生成图片,5保存在redis中为答案
最终redis的保存结果
将后端的结果返回到前端,前端保存图片内容以及redis的值

前端保存图片以及redis的值
这里我们可以看到this.codeUrl对应图片显示的部分

vue前端显示图片
对应的验证码部分图片如图所示
验证码部分图片
前端接收到后端返回的图片之后,成功显示图片

3.前端发起登录请求的调用

点击登录之后,从浏览器中查看发起的请求
浏览器中查看发起的请求
从上面可以看出,login、getInfo和getRouters三个请求在点击登录按钮之后同时被发送出去,我们首先看登录按钮调用的方法
登录按钮调用的方法
从这里可以看出,登录按钮调用handleLogin方法,查看方法的实现
登录方法的调用
这里首先查看是否需要记住密码,需要的时候保存在cookie之中,接下来会发生跳转

this.$store.dispatch("Login", this.loginForm).then(() => {...})

这里跳转到src/store/modules/user.js中的Login函数之中
跳转方法
这里又调用了login函数,查看login函数的部分
login函数
发出一个post请求,将username、password、code、uuid发送出去

4.后端接收请求内容

后端接收login请求
后端接收请求为四个变量,这里后端将四个变量打包成一个结构体,然后进入到loginService.login函数中进行查看
验证码判定部分
首先进行验证码的验证,进入validateCaptcha函数中
validateCaptcha方法
这里通过从redis中取出验证码数据来与自己输入的数据进行判断,如果验证码过期或者不相同的情况下抛出各种异常,而如果验证码通过的时候继续通过用户名和密码进行验证
调用用户名和密码进行验证
这里的authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(username,password));
就调用了UserDetailsService的实现类UserDetailsServiceImpl中的loadUserByUsername这个函数从数据库中取出来用户名和密码并且封装到LoginUser类之中
loadUserByUsername函数调用
最终如果验证成功的情况下,从authentication中取出LoginUser类,然后记录用户的登录信息并且生成token内容
在这里插入图片描述

5.前端发送/getInfo请求的调用

这两个调用确实比较难找,在permission.js文件之中调用beforeEach函数的时候出现
调用beforeEach函数
这里的beforeEach函数在跳转页面的时候进行调用
我们首先查看GetInfo函数的调用,GetInfo在store/modules/user.js之中

GetInfo函数调用
可以看出这里调用了getInfo方法,查找此方法
getInfo方法调用
这里的getInfo方法调用通过get发送了一个url的请求,该请求获取当前用户的信息并使用全局存储一下,接下来我们查看后端对于/getInfo请求的响应
后端getInfo接口的调用
这里查询用户以及权限信息返回给前端部分,然后我们继续查看前端接收到返回值之后的调用
GetInfo之后调用
可以看到GetInfo拿到角色权限等相关信息之后,才能够查找到可访问的路由表

6.前端发送/getRouter请求的调用

查看GenerateRoutes的调用
GenerateRoutes
这里查看调用的GenerateRoutes发出的请求,在src/store/modules/permission.js之中(实在找不到就采用全局搜索的方式)。
GenerateRoutes函数的调用
查看getRouters方法的调用

import { getRouters } from '@/api/menu'

调用getRouters请求
可以看出这里通过get发送/getRouters的url请求,回到后端查看getRouters方法的调用

7.后端接收getRouters请求

getRouters路由
这里采用的是一个不断延伸的树,进入到buildMenus函数之中,首先查看selectMenuTreeByUserId函数
selectMenuTreeByUserId函数图片
查看getChildPerms函数的调用,这一步是建树的关键
根据数据表的结构进行建立树
可以看出根节点为0,因此传入的parentId为0,进入到getChildPerms函数之中
getChildPerms函数的调用
这里可以看出,如果遍历节点的根节点为当前节点的时候,就继续深入遍历,然后将遍历的节点放入当前节点的list之中,这样就建立了一个不断深入的递归树。
getChildPerms只是进行了第一层,将指定的父节点与孩子节点建立联系,接下来继续深入需要递归调用,进入recursionFn函数的调用环节

private void recursionFn(List<SysMenu> list, SysMenu t)
{
    // 当前节点的子节点放入list之中
    List<SysMenu> childList = getChildList(list, t);
    //找一级菜单的子菜单
    t.setChildren(childList);
    for (SysMenu tChild : childList)
    //继续遍历孩子节点,二级菜单里面找三级菜单
    {
        if (hasChild(list, tChild))
        {
            recursionFn(list, tChild);
        }
    }
}

/**
 * 得到子节点列表
 *
 *
 * 从23条数据中把系统的子菜单找到
 */
private List<SysMenu> getChildList(List<SysMenu> list, SysMenu t)
{
    List<SysMenu> tlist = new ArrayList<SysMenu>();
    Iterator<SysMenu> it = list.iterator();
    while (it.hasNext())
    {
        SysMenu n = (SysMenu) it.next();
        if (n.getParentId().longValue() == t.getMenuId().longValue())
        //找到当前节点的子节点并放入tlist中,n.getParentId()为当前的孩子节点,
        //t.getMenuId()为遍历的23个节点Id
        {
            tlist.add(n);
        }
    }
    return tlist;
}

接下来,再使用getRouters方法将buildMenus方法打包

@Override
public List<RouterVo> buildMenus(List<SysMenu> menus)
    ......

将List< SysMenu >转换为List< RouterVo>的类型,然后返回给前端,前端接收到之后进行处理
getRouters方法调用

8.登录之后的跳转界面发送getList请求方法

接下来我们需要看登录成功之后页面如何跳转的,回到login.vue之中
Login.vue登录之后跳转
可以看出登录成功之后往根路径去跳转

this.$router.push({ path: this.redirect || "/" }).catch(()=>{});

此时我们需要知道根路径"/"指的是哪个界面,打开src/router/index.js之中去查看
根路径对应的索引
这里我们找到了跟路径对应的界面,进入到’'之后我们会自动地往index路径去跳转,打开@/views/index查看页面,发现这里就是首页的各种内容。
并且这个首页还调用了Layout组件的布局
这里我们查看主页侧边栏的调用
在这里插入图片描述
从这里可以看到调用侧边栏sidebar-container,具体的Sidebar调用查看import内容

import {AppMain, Navbar, Settings, Sidebar, TagsView } from './components'

具体的内容在src/layout/components/Sidebar之中有index.vue,这里sidebar-item之中有v-for循环

 <sidebar-item
     v-for="(route, index) in sidebarRouters"
     :key="route.path  + index"
     :item="route"
     :base-path="route.path"
 />

这里遍历的是我们的router对象,可以把后台的数据迭代出来。对应路径在src/views/system/,这里跳转的方向在数据库中有所记录
数据库中记录跳转方向
比如第一个用户管理对应的路径在views之中的system/user/index.vue
点击侧边栏进入用户管理,发现页面分为两块
页面分界
一块是左边的树状侧边栏,另外一块是中间的查询结果显示,中间的数据属于list,而侧边栏的数据属于tree,现在需要读取这两块的数据。在views/system/user/index中去找created方法,发现正好出现了这两部分的内容
getList和getTreeselect方法调用
进入到getList()函数中查询用户列表

getList(){
  this.loading = true;
  //让前端页面有一个加速转圈圈的效果
  listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      //查看listUser代码的入口
      //取到这两个变量之后view会自动加载相应的效果???
      this.userList = response.rows;
      this.total = response.total;
      //获取到了list和total数据
      this.loading = false;
   }
}

查看listUser函数的调用

// 查询用户列表
// 这里找到了listUser调用的请求方法
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}

9.后端处理/system/user/list方法

这里由于/system/user/list后端采用的是分层url的处理方式,因此我们先搜索list
/system/user/list接口的调用
这里先查看@ss.hasPermi(‘system:dept:list’)")的权限调用方法
权限调用方法
这里判断用户是否具有某种权限
判断是否具有某种权限
这里取出LoginUser之后采用的是切分的方式判断是否具有权限,查看hasPermissions函数的调用

private boolean hasPermissions(Set<String> permissions, String permission)
{
    return permissions.contains(ALL_PERMISSION) || permissions.contains(StringUtils.trim(permission));
}

这里permissions = * : * : * ,而permission = “system:user:list”,判断权限的时候如果为全权限 或者permissions字符串中包含permission,则可以获取到权限。
查看startPage函数调用,

protected void startPage()
{
    PageDomain pageDomain = TableSupport.buildPageRequest();
    //pageDomain一个新对象,专门用来获取分页信息的
    Integer pageNum = pageDomain.getPageNum();
    Integer pageSize = pageDomain.getPageSize();
    if (StringUtils.isNotNull(pageNum) && StringUtils.isNotNull(pageSize))
    {
        String orderBy = SqlUtil.escapeOrderBySql(pageDomain.getOrderBy());
        Boolean reasonable = pageDomain.getReasonable();
        PageHelper.startPage(pageNum, pageSize, orderBy).setReasonable(reasonable);
        //PageHelper可以单独设置页数,把分页参数设置到PageHelper提供的对象中即可
        //reasonable对参数进行逻辑处理,保证参数的正确性,比如pageNum=0或-1,将自动将pageNum设置为1
    }
}

这里定义了PageDomain等参数都是为了从前端发回的请求取出pageNum和pageSize这两个参数的,orderBy用来定义排序的顺序,reasonable对参数进行逻辑处理,保证参数的正确性,最后调用PageHelper中startPage方法封装好参数,调用PageHelper中的startPage会保证下一条sql语句进行分页处理,并且将结果封装成Page类型对象。
然后调用查询语句查询,并且将结果返回给前端。
结果返回
前端取回到数据之后,就会自动加载界面
前端自动加载界面

10.登录之后点击用户管理发出的第二次请求

用户管理显示
登录之后点击用户管理之后,在src/views/system/user/index.vue之中查看created函数的调用,在getList之后会发出第二次请求getTreeselect获取侧边栏的显示图
获取侧边栏的显示图
侧边栏的显示图
查看treeselect函数的调用
treeselect函数的调用
找到treeselect函数发出的请求,这里为部门下拉树结构

export function treeselect() {
  return request({
    url: '/system/dept/treeselect',
    method: 'get'
  })
}

找到获取部门下拉树的后端调用
获取部门下拉树列表
这里selectDeptList选择出部门信息的表格,deptService.buildDeptTreeSelect(depts)将depts建成一层一层的树,查看其中的代码

@Override
public List<TreeSelect> buildDeptTreeSelect(List<SysDept> depts)
{
    List<SysDept> deptTrees = buildDeptTree(depts);
    //将10条记录组装成一个树状图
    return deptTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
    //将deptTrees全部封装成TreeSelect,然后封装成集合,从SysDept封装成TreeSelect
    //需要转换的原因:SysDept中的字段过多,而TreeSelect中的字段较少,前端不需要SysDept
    //一样这么多的字段,本质上就是对字段进行复制
    //这里通过构造函数进行映射
    /***
     * public TreeSelect(SysDept dept)
     * {
     *    this.id = dept.getDeptId();
     *    this.label = dept.getDeptName();
     *    this.children = dept.getChildren().stream().map(TreeSelect::new).collect(Collectors.toList());
     * }
     */
 }

这里buildDeptTree针对depts建立多层树,而由于SysDept类中包含了过多的内容,因此需要将SysDept转换成TreeSelect类,初始化类为

public class SysDept extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    /** 部门ID */
    private Long deptId;

    /** 父部门ID */
    private Long parentId;

    /** 祖级列表 */
    private String ancestors;

    /** 部门名称 */
    private String deptName;

    /** 显示顺序 */
    private String orderNum;

    /** 负责人 */
    private String leader;

    /** 联系电话 */
    private String phone;

    /** 邮箱 */
    private String email;

    /** 部门状态:0正常,1停用 */
    private String status;

    /** 删除标志(0代表存在 2代表删除) */
    private String delFlag;

    /** 父部门名称 */
    private String parentName;
    ... 
 }

接着查看TreeSelect类调用

public class TreeSelect implements Serializable
{
    private static final long serialVersionUID = 1L;

    /** 节点ID */
    private Long id;

    /** 节点名称 */
    private String label;
    ......
}

也就是说前端不需要这么多的信息,所以选择TreeSelect这么多的内容即可
这里SysDept类的初始化方法为

public TreeSelect(SysDept dept)
{
    this.id = dept.getDeptId();
    this.label = dept.getDeptName();
    this.children = dept.getChildren().stream().map(TreeSelect::new).collect(Collectors.toList());
}

点击研发部门之后的内容

点击研发部门之后的内容
点击研发部门之后基于研发部门进行进一步的查询

在src/views/system/user/index.vue之中查看el-tree标签内容
el-tree标签内容
查看handleNodeClick的方法
节点单击调用方法
这里查看getList方法调用

getList() {
  this.loading = true;
  //让它有一个加载的效果,转圈圈
  listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      //查看listUser代码的入口
      //取到这两个变量之后view会自动加载相应的效果???
      this.userList = response.rows;
      this.total = response.total;
      //获取到了list和total数据
      this.loading = false;
    }
  );
},

this.loading = true让它加载有一个转圈圈的功能,而listUser调用相应的请求

export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}

这里调用/system/user/list与之前的区别在于这里的user加入了其他的参数,因此查找的时候是条件查找。

文件的导入和导出

文件的导入和导出界面
这里有文件的导入和导出两个按钮,导入是将文件的数据写入到数据库中,而导出则是将数据库的数据写出到文件中

前端点击新增方法

点击新增方法

提交按钮的方法

提交按钮的方法

点这个圈圈能把所有的断点都去掉。

异步任务管理器

异步任务管理器中的调用在ruoyi-framework中的src/main/java/com.ruoyi.framework.web.service.SysLoginService.java中的

AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));

1.调用异步管理器

AsyncManager.me()

获取一个AsyncManager对象,AsyncManager是一个单例模式

2.执行execute方法,执行任务,传入的是一个Task对象,实现了Runnable接口,表示它是一个任务,由线程Thread去执行。

封装了登录信息,执行了添加操作,这里不会执行,而是交给线程对象来执行。
这里首先调用了异步线程池

/**
* 异步操作任务调度线程池
*/
private ScheduledExecutorService executor = SpringUtils.getBean("scheduledExecutorService");
......
/**
 * 执行任务
 * 
 * @param task 任务
 */
public void execute(TimerTask task)
{
    executor.schedule(task, OPERATE_DELAY_TIME, TimeUnit.MILLISECONDS);
}
/***
* 这里是创建线程池的操作,corePoolSize为核心池的大小
* 异步任务管理器内部定义了一个线程池,然后根据业务创建
* 添加日志的任务,交给线程池来处理,这样做到来日志和业务
* 的抽象、解耦合,日志全部统一处理。
* 同步:登录成功之后必须记录日志,如果没有记录下来登录成功
* 这部分就需要等
***/
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
RuoYi-Vue3是一个基于Vue3和Element Plus的前端管理系统框架,是RuoYi项目的升级版。该项目提供了一些通用的后台管理界面的组件和页面,可以快速开发出美观、响应式的管理系统。 RuoYi-Vue3的特点包括: 1. 基于Vue3和Element Plus,使用Vue3的最新特性和Element Plus的组件。 2. 支持响应式布局,可以适配各种设备。 3. 提供了丰富的组件和页面,可以快速开发出功能完善的管理系统。 4. 代码结构清晰,易于理解和维护。 5. 支持国际化和权限控制。 在RuoYi-Vue3中,可以使用Vue3的Composition API来编写组件。例如: ``` <template> <div> <h1>{{ message }}</h1> <button @click="increment">增加计数器</button> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ message: '欢迎使用RuoYi-Vue3', counter: 0 }) const increment = () => { state.counter += 1 } return { message: state.message, increment } } } </script> ``` 在RuoYi-Vue3中,还可以使用Element Plus的组件来构建页面。例如: ``` <template> <el-table :data="users" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ users: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' } ] }) return { users: state.users } } } </script> ``` 总之,RuoYi-Vue3是一个功能强大、易于开发和维护的Vue3前端管理系统框架,具有广泛的应用前景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值