若依使用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低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表