若依使用reids作为缓存管理，每个用户登录的token通过redis进行缓存，缓存的作用就是加快系统的高频读区数据的操作

1、界面操作

步骤一：点击左侧菜单栏，系统监控-缓存列表，右侧工作区显示缓存列表

步骤二：每个缓存集合下面有多个key，每个key对应一个值，例如用户登录的集合是login_tokens，每个用户登录都有一个唯一的key，每个key都存储了用户相关的信息，当前端请求接口服务的时候，在header会将key带上。接口通过header获取token的key，并获取用户的登录信息。

步骤三：缓存出了用户数据的集合之外，还有验证码，或者一些基本配置也可以放入redis缓存

2、前端代码拆解

2.1、路径如下，放在monitor文件夹下面

2.2、列表展示代码

<el-row :gutter="10"> <el-col :span="8"> 。。。。。。 </el-col> <el-col :span="8"> 。。。。。。 </el-col> <el-col :span="8"> 。。。。。。 </el-col></el-row>

界面拆分成为三个模块，使用el-row，el-col标签，每份为8.

<el-card style="height: calc(100vh - 125px)"> <div slot="header"> <span><i class="el-icon-collection"></i> 缓存列表</span> <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="refreshCacheNames()" ></el-button> </div> <el-table v-loading="loading" :data="cacheNames" :height="tableHeight" highlight-current-row @row-click="getCacheKeys" style="width: 100%" > 。。。。 </el-table> </el-card></el-col>

如上代码是集合列表，使用el-card组件，el-card 是Element-UI 内置的卡片组件，使用起来很方便。

2.3、缓存集合数据获取

created() { this.getCacheNames();},

/** 查询缓存名称列表 */getCacheNames() { this.loading = true; listCacheName().then(response => { this.cacheNames = response.data; this.loading = false; });},

在页面创建完毕后，调用getCacheNames函数，getCacheNames函数调用listCacheNameapi接口

// 查询缓存名称列表export function listCacheName() { return request({ url: '/monitor/cache/getNames', method: 'get' })

2.4、后端接口实现

@PreAuthorize("@ss.hasPermi('monitor:cache:list')")@GetMapping("/getNames")public AjaxResult cache(){ return AjaxResult.success(caches);}

返回caches列表

private final static List<SysCache> caches = new ArrayList<SysCache>();{ caches.add(new SysCache(CacheConstants.LOGIN_TOKEN_KEY, "用户信息")); caches.add(new SysCache(CacheConstants.SYS_CONFIG_KEY, "配置信息")); caches.add(new SysCache(CacheConstants.SYS_DICT_KEY, "数据字典")); caches.add(new SysCache(CacheConstants.CAPTCHA_CODE_KEY, "验证码")); caches.add(new SysCache(CacheConstants.REPEAT_SUBMIT_KEY, "防重提交")); caches.add(new SysCache(CacheConstants.RATE_LIMIT_KEY, "限流处理")); caches.add(new SysCache(CacheConstants.PWD_ERR_CNT_KEY, "密码错误次数"));}

未来计划

1、ruoyi非分离版本拆解

2、ruoyi-vue-pro：讲解工作流

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。