121 lines
5.4 KiB
HTML
121 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>修复验证实验室 - Spring Boot</title>
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f5f5f5; }
|
||
.container { max-width:1200px; margin:0 auto; padding:20px; }
|
||
.header { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; padding:28px 20px; border-radius:12px; text-align:center; margin-bottom:20px; }
|
||
.nav { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
|
||
.nav a { padding:10px 18px; background:#fff; border-radius:20px; text-decoration:none; color:#333; }
|
||
.nav a.active { background:#667eea; color:#fff; }
|
||
.lab { background:#fff7e6; border-left:4px solid #fa8c16; padding:16px; border-radius:8px; margin-bottom:20px; }
|
||
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
|
||
.card { background:#fff; border-radius:12px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
|
||
.card h3 { margin-bottom:12px; color:#333; }
|
||
.result { background:#111827; color:#d1d5db; padding:12px; border-radius:8px; min-height:160px; white-space:pre-wrap; font-family:monospace; margin-top:10px; }
|
||
button { padding:10px 14px; background:#667eea; color:#fff; border:none; border-radius:6px; cursor:pointer; margin-right:8px; margin-bottom:8px; }
|
||
.status-pass { color:#16a34a; font-weight:700; }
|
||
.status-fail { color:#dc2626; font-weight:700; }
|
||
.hint { color:#666; line-height:1.7; margin-top:8px; }
|
||
.summary { background:#fff; border-radius:12px; padding:18px; margin-bottom:20px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>🩺 修复验证实验室</h1>
|
||
<p>不是“我说修好了”，而是你自己点检查，看到哪里坏、为什么坏、修没修好。</p>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<a href="index.html">🏠 首页</a>
|
||
<a href="auth-lab.html">🔐 鉴权实验室</a>
|
||
<a href="api.html">🔌 API 测试</a>
|
||
<a href="verify-lab.html" class="active">🩺 修复验证实验室</a>
|
||
</div>
|
||
|
||
<div class="lab">
|
||
<strong>参与式验证任务卡</strong>
|
||
<ul style="padding-left:20px;line-height:1.8;margin-top:8px;">
|
||
<li>先点“一键跑总览”，确认当前 profile / auth / datasource 状态</li>
|
||
<li>再分别点数据库、用户服务、MyBatis 产品查询，感受“哪个环节坏了就在哪一步暴露”</li>
|
||
<li>最后打开 H2 Console，验证修复后跳转是不是仍保持 https</li>
|
||
<li>如果某一步失败，不要只看失败，要看返回里的 hint —— 那是排查方向</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="summary">
|
||
<button onclick="runOverview()">一键跑总览</button>
|
||
<button onclick="openH2()">打开 H2 Console</button>
|
||
<div id="summaryResult" class="result">点击按钮开始验证...</div>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h3>数据库链路</h3>
|
||
<button onclick="runCheck('database','dbResult')">检查数据库</button>
|
||
<div class="hint">验证 DataSource / JDBC / H2 是否可用。</div>
|
||
<div id="dbResult" class="result"></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>用户服务链路</h3>
|
||
<button onclick="runCheck('users','userResult')">检查用户服务</button>
|
||
<div class="hint">验证 JPA / Service / 用户数据查询是否正常。</div>
|
||
<div id="userResult" class="result"></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>MyBatis 链路</h3>
|
||
<button onclick="runCheck('products','productResult')">检查产品查询</button>
|
||
<div class="hint">验证 MyBatis Mapper / SQL / 数据库查询是否正常。</div>
|
||
<div id="productResult" class="result"></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>鉴权模式</h3>
|
||
<button onclick="runCheck('auth','authResult')">检查鉴权模式</button>
|
||
<div class="hint">对照当前 profile，理解 why learn=none / advanced=jwt。</div>
|
||
<div id="authResult" class="result"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
async function runOverview() {
|
||
const el = document.getElementById('summaryResult');
|
||
el.textContent = '检查中...';
|
||
try {
|
||
const res = await fetch('/api/verify/overview');
|
||
const data = await res.json();
|
||
el.textContent = JSON.stringify(data, null, 2);
|
||
} catch (e) {
|
||
el.textContent = '总览检查失败: ' + e.message;
|
||
}
|
||
}
|
||
|
||
async function runCheck(name, resultId) {
|
||
const el = document.getElementById(resultId);
|
||
el.textContent = '检查中...';
|
||
try {
|
||
const res = await fetch('/api/verify/' + name);
|
||
const data = await res.json();
|
||
const badge = data.ok ? '✅ PASS' : '❌ FAIL';
|
||
el.textContent = badge + '\n\n' + JSON.stringify(data, null, 2);
|
||
} catch (e) {
|
||
el.textContent = '检查失败: ' + e.message;
|
||
}
|
||
}
|
||
|
||
function openH2() {
|
||
window.open('/h2-console', '_blank');
|
||
}
|
||
|
||
runOverview();
|
||
</script>
|
||
</body>
|
||
</html>
|