若依使用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低代码开发平台

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