117 lines
2.4 KiB
Markdown
117 lines
2.4 KiB
Markdown
|
# 前端缓存监控页适配内存缓存实施记录
|
||
|
|
|
||
|
|
## 1. 实际改动内容
|
||
|
|
|
||
|
|
### 1.1 调整缓存监控首页
|
||
|
|
|
||
|
|
修改文件：
|
||
|
|
|
||
|
|
- `ruoyi-ui/src/views/monitor/cache/index.vue`
|
||
|
|
|
||
|
|
改动内容：
|
||
|
|
|
||
|
|
- 页面展示从 Redis 服务器指标改为内存缓存统计
|
||
|
|
- 增加默认数据结构：
|
||
|
|
- `cache_type`
|
||
|
|
- `cache_mode`
|
||
|
|
- `key_size`
|
||
|
|
- `hit_count`
|
||
|
|
- `miss_count`
|
||
|
|
- `expired_count`
|
||
|
|
- `write_count`
|
||
|
|
- 新增格式化与归一化方法：
|
||
|
|
- `normalizeCacheData`
|
||
|
|
- `normalizeCommandStats`
|
||
|
|
- `formatCacheType`
|
||
|
|
- `formatCacheMode`
|
||
|
|
- `formatSampleTime`
|
||
|
|
- `toNumber`
|
||
|
|
- 基本信息区改为展示：
|
||
|
|
- 缓存类型
|
||
|
|
- 运行模式
|
||
|
|
- 总键数
|
||
|
|
- 写入次数
|
||
|
|
- 命中次数
|
||
|
|
- 未命中次数
|
||
|
|
- 过期清理次数
|
||
|
|
- 命中率
|
||
|
|
- 图表改为展示内存缓存统计分布与条形概览
|
||
|
|
|
||
|
|
### 1.2 调整缓存列表页清理全部后的状态
|
||
|
|
|
||
|
|
修改文件：
|
||
|
|
|
||
|
|
- `ruoyi-ui/src/views/monitor/cache/list.vue`
|
||
|
|
|
||
|
|
改动内容：
|
||
|
|
|
||
|
|
- 清理全部缓存后主动清空：
|
||
|
|
- `cacheKeys`
|
||
|
|
- `cacheForm`
|
||
|
|
- `nowCacheName`
|
||
|
|
- 重新加载缓存分类列表，避免页面残留旧数据显示
|
||
|
|
|
||
|
|
### 1.3 API 文件
|
||
|
|
|
||
|
|
文件：
|
||
|
|
|
||
|
|
- `ruoyi-ui/src/api/monitor/cache.js`
|
||
|
|
|
||
|
|
结论：
|
||
|
|
|
||
|
|
- 接口路径与交互方式保持不变
|
||
|
|
- 本次未对 API 文件做额外改动
|
||
|
|
|
||
|
|
## 2. 验证结果
|
||
|
|
|
||
|
|
### 2.1 Node 版本
|
||
|
|
|
||
|
|
项目中未提供 `.nvmrc`，因此未能直接执行 `nvm use` 自动切换。
|
||
|
|
|
||
|
|
本机 `nvm` 已安装版本：
|
||
|
|
|
||
|
|
- `v14.21.3`
|
||
|
|
- `v25.9.0`
|
||
|
|
|
||
|
|
实际使用版本：
|
||
|
|
|
||
|
|
- `nvm use 14.21.3`
|
||
|
|
|
||
|
|
原因：
|
||
|
|
|
||
|
|
- Vue CLI 4 + Vue 2 对较新的 Node 版本存在潜在兼容风险，优先使用更稳妥的 `v14.21.3`
|
||
|
|
|
||
|
|
### 2.2 构建命令
|
||
|
|
|
||
|
|
已执行：
|
||
|
|
|
||
|
|
- `cd ruoyi-ui && source ~/.nvm/nvm.sh && nvm use 14.21.3 && npm run build:prod`
|
||
|
|
|
||
|
|
结果：
|
||
|
|
|
||
|
|
- 构建成功
|
||
|
|
- 输出 `DONE Build complete. The dist directory is ready to be deployed.`
|
||
|
|
|
||
|
|
### 2.3 构建告警
|
||
|
|
|
||
|
|
存在 webpack 资源体积告警：
|
||
|
|
|
||
|
|
- `asset size limit`
|
||
|
|
- `entrypoint size limit`
|
||
|
|
|
||
|
|
说明：
|
||
|
|
|
||
|
|
- 这些是现有项目静态资源体积告警，不影响本次缓存监控页适配结果
|
||
|
|
- 本次未对该类历史体积问题做额外处理
|
||
|
|
|
||
|
|
## 3. 与计划差异
|
||
|
|
|
||
|
|
- 计划中预期通过 `nvm use` 自动切换版本，但项目没有 `.nvmrc`，因此改为显式执行 `nvm use 14.21.3`
|
||
|
|
- 除此之外，前端实施路径与计划一致
|
||
|
|
|
||
|
|
## 4. 当前结论
|
||
|
|
|
||
|
|
- 缓存监控首页已适配后端内存缓存统计结构
|
||
|
|
- 缓存列表页与现有接口保持兼容
|
||
|
|
- 前端生产构建已通过
|