From e766fa427f3b6568bbc5e2d9ffbc9a644ae1f40f Mon Sep 17 00:00:00 2001 From: likingcode Date: Mon, 9 Mar 2026 01:55:19 +0800 Subject: [PATCH] feat(v2): add profile banner and advanced module task card --- src/main/resources/static/advanced.html | 244 ++++++++++++++++++++++++ src/main/resources/static/api.html | 16 ++ 2 files changed, 260 insertions(+) create mode 100644 src/main/resources/static/advanced.html diff --git a/src/main/resources/static/advanced.html b/src/main/resources/static/advanced.html new file mode 100644 index 0000000..75ec029 --- /dev/null +++ b/src/main/resources/static/advanced.html @@ -0,0 +1,244 @@ + + + + + + 高级功能学习 - Spring Boot + + + +
+
+

🚀 高级功能学习

+

Redis 缓存 | 分布式锁 | 多数据库 | 认证方案

+
+ + + +
+

🧪 实验任务卡(高级模块)

+
    +
  • 目标:比较 learn/advanced profile 下可用能力差异
  • +
  • 步骤1:先查看“系统配置”和“认证方案对比”
  • +
  • 步骤2:执行 Redis SET/GET + 分布式锁接口
  • +
  • 预期:advanced 模式下功能更完整,返回字段更丰富
  • +
  • 常见坑:本机无 Redis 导致接口失败(属于环境问题)
  • +
+
+ +
+

⚙️ 系统配置

+ +
+
+ +
+

🔐 认证方案对比

+ +
+
+ +
+

💾 Redis 数据类型

+
+

String

字符串,最基本类型

+

Hash

哈希,存储对象

+

List

列表,队列/栈

+

Set

集合,去重运算

+

SortedSet

有序集合,排名

+
+ +
+ +
+

🧪 Redis 操作测试

+
+ + + +
+ + +
+
+ +
+

🔒 分布式锁演示

+

模拟多个请求竞争同一资源

+ + +
+
+ +
+

⚠️ 缓存三大问题

+
+

缓存穿透

+

问题:查询不存在的数据,每次都打到数据库

+

解决:布隆过滤器 | 缓存空值

+
+
+

缓存击穿

+

问题:热点key过期,大量请求打到数据库

+

解决:互斥锁 | 逻辑过期

+
+
+

缓存雪崩

+

问题:大量key同时过期,数据库压力激增

+

解决:随机过期时间 | 多级缓存

+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/src/main/resources/static/api.html b/src/main/resources/static/api.html index d801914..ea6d0f8 100644 --- a/src/main/resources/static/api.html +++ b/src/main/resources/static/api.html @@ -49,6 +49,7 @@ .tab-content.active { display: block; } .json-input { width: 100%; min-height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: monospace; font-size: 0.9em; } + .profile-banner { background:#fff7e6;border-left:4px solid #fa8c16;padding:12px 14px;border-radius:8px;margin-bottom:18px; color:#874d00; } @@ -68,6 +69,8 @@ 🔌 API +
正在读取 profile...
+
👥 用户 API
📦 产品 API
@@ -248,6 +251,17 @@ document.getElementById(tab + 'Tab').classList.add('active'); } + async function loadProfileBanner() { + try { + const res = await fetch('/api/profile'); + const data = await res.json(); + const enabled = (data.enabledModules || []).join(', '); + document.getElementById('profileBanner').textContent = `当前 profile: ${data.profile} | 已启用模块: ${enabled}`; + } catch (e) { + document.getElementById('profileBanner').textContent = '当前 profile 读取失败,请检查 /api/profile'; + } + } + async function testApi(method, url, body, resultId) { const resultDiv = document.getElementById(resultId); resultDiv.classList.add('show'); @@ -275,6 +289,8 @@ resultDiv.innerHTML = `Error\n\n${e.message}`; } } + + loadProfileBanner(); \ No newline at end of file