若依使用reids作為緩存管理，每個用戶登錄的token通過redis進行緩存，緩存的作用就是加快系統(tǒng)的高頻讀區(qū)數(shù)據(jù)的操作

1、界面操作

步驟一：點擊左側菜單欄，系統(tǒng)監(jiān)控-緩存列表，右側工作區(qū)顯示緩存列表

步驟二：每個緩存集合下面有多個key，每個key對應一個值，例如用戶登錄的集合是login_tokens，每個用戶登錄都有一個唯一的key，每個key都存儲了用戶相關的信息，當前端請求接口服務的時候，在header會將key帶上。接口通過header獲取token的key，并獲取用戶的登錄信息。

步驟三：緩存出了用戶數(shù)據(jù)的集合之外，還有驗證碼，或者一些基本配置也可以放入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 內(nèi)置的卡片組件，使用起來很方便。

2.3、緩存集合數(shù)據(jù)獲取

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

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

在頁面創(chuàng)建完畢后，調(diào)用getCacheNames函數(shù)，getCacheNames函數(shù)調(diào)用listCacheNameapi接口

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

2.4、后端接口實現(xiàn)

@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, "數(shù)據(jù)字典")); 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, "密碼錯誤次數(shù)"));}

未來計劃

1、ruoyi非分離版本拆解

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

3、ruoyi-vue-pro：支付模塊，電商模塊

4、基于ruoyi-vue-pro項目開發(fā)

5、JEECG低代碼開發(fā)平臺

請關注我，本星球會持續(xù)推出更多的開源項目代碼解析，如有更好的意見請留言回復或者私信。