feat: add guided learning cockpit
This commit is contained in:
Codex
@@ -3,159 +3,406 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Spring Boot Learning Hub</title>
|
||||
<title>Spring Boot Learning Cockpit</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: radial-gradient(circle at top, #eef9f0 0%, #eff4ff 45%, #ffffff 100%);
|
||||
--card: rgba(255,255,255,0.92);
|
||||
--text: #132238;
|
||||
--muted: #62788f;
|
||||
--green: #3f8f2c;
|
||||
--blue: #0f6db5;
|
||||
--line: #dfebf6;
|
||||
--shadow: 0 20px 48px rgba(16, 39, 74, 0.12);
|
||||
--bg: #eef5ff;
|
||||
--panel: rgba(255, 255, 255, 0.94);
|
||||
--line: #d8e4f0;
|
||||
--text: #122033;
|
||||
--muted: #5d7288;
|
||||
--brand: #177245;
|
||||
--accent: #0f67b5;
|
||||
--warm: #f08c2b;
|
||||
--shadow: 0 22px 54px rgba(18, 32, 51, 0.12);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", "PingFang SC", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "Aptos", "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(23, 114, 69, 0.14), transparent 28%),
|
||||
radial-gradient(circle at bottom right, rgba(15, 103, 181, 0.14), transparent 26%),
|
||||
var(--bg);
|
||||
}
|
||||
.page {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 18px 48px;
|
||||
}
|
||||
.hero {
|
||||
background: var(--card);
|
||||
border: 1px solid rgba(255,255,255,0.8);
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, input, select { font: inherit; }
|
||||
.page { max-width: 1380px; margin: 0 auto; padding: 24px; }
|
||||
.hero, .card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 32px;
|
||||
margin-bottom: 24px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.hero { padding: 28px; margin-bottom: 18px; }
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
padding: 8px 14px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(63, 143, 44, 0.12);
|
||||
color: #2d6e20;
|
||||
background: rgba(23, 114, 69, 0.1);
|
||||
color: var(--brand);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .06em;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1 {
|
||||
margin: 18px 0 12px;
|
||||
font-size: clamp(36px, 6vw, 58px);
|
||||
line-height: 1.04;
|
||||
h1, h2, h3 { margin: 10px 0 12px; }
|
||||
p { margin: 0; color: var(--muted); line-height: 1.8; }
|
||||
.hero-grid, .workspace, .triple {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
p {
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
.hero-grid {
|
||||
grid-template-columns: 1.3fr 0.9fr;
|
||||
align-items: start;
|
||||
}
|
||||
.hero-actions {
|
||||
.actions, .chip-list, .toolbar, .demo-links {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.btn {
|
||||
.btn, .btn-soft {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 12px 18px;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary { background: linear-gradient(135deg, var(--green), #57b83f); color: #fff; }
|
||||
.btn-secondary { background: rgba(15, 109, 181, 0.08); color: var(--blue); }
|
||||
.grid {
|
||||
.btn {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--brand), #35a465);
|
||||
}
|
||||
.btn-soft {
|
||||
color: var(--accent);
|
||||
background: #eaf3ff;
|
||||
}
|
||||
.card { padding: 22px; }
|
||||
.stats {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid rgba(255,255,255,0.8);
|
||||
border-radius: 24px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 24px;
|
||||
.stat {
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 24px;
|
||||
.stat span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
|
||||
.stat strong { font-size: 28px; }
|
||||
.workspace {
|
||||
grid-template-columns: 380px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
.card code {
|
||||
display: inline-block;
|
||||
.triple {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.flow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(15, 109, 181, 0.08);
|
||||
color: var(--blue);
|
||||
font-size: 13px;
|
||||
}
|
||||
.quick-links {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
.step, .lab, .note, .code-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
background: rgba(255,255,255,0.45);
|
||||
}
|
||||
.step strong, .lab strong, .code-card strong { display: block; margin-bottom: 8px; }
|
||||
.lab small, .step small, .note small { color: var(--muted); display: block; line-height: 1.7; }
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.quick-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
background: rgba(255,255,255,0.8);
|
||||
label { font-size: 13px; font-weight: 700; color: #21384f; }
|
||||
input, select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
.console {
|
||||
margin-top: 14px;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d6e2ef;
|
||||
background: #0e1723;
|
||||
}
|
||||
.console-head {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid rgba(216, 228, 240, 0.14);
|
||||
color: #bdd2ea;
|
||||
font-weight: 700;
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
min-height: 240px;
|
||||
padding: 16px;
|
||||
color: #dceaff;
|
||||
white-space: pre-wrap;
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
overflow: auto;
|
||||
}
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 103, 181, 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.list-item {
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.45);
|
||||
}
|
||||
.list-item p { margin-top: 8px; }
|
||||
@media (max-width: 1180px) {
|
||||
.hero-grid, .workspace, .triple, .flow, .stats { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 780px) {
|
||||
.page { padding: 14px; }
|
||||
.hero-grid, .workspace, .triple, .flow, .stats { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<section class="hero">
|
||||
<span class="eyebrow">Spring Boot practice</span>
|
||||
<h1>Explore web, validation, security, and AOP from one clean hub.</h1>
|
||||
<p>
|
||||
This project now highlights the most useful demos directly from the homepage so you can jump into the
|
||||
user management flow, auth example, AOP pages, and health endpoints without decoding broken text first.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary" href="/users.html">Open user management</a>
|
||||
<a class="btn btn-secondary" href="/learn">View auth demo</a>
|
||||
<a class="btn btn-secondary" href="/actuator/health">Check health</a>
|
||||
<div class="hero-grid">
|
||||
<div>
|
||||
<div class="eyebrow">Spring Boot Learning Cockpit</div>
|
||||
<h1>Use one workspace to understand MVC, validation, security, AOP, and application events.</h1>
|
||||
<p>
|
||||
This homepage is now a guided study cockpit. Instead of only linking to pages, it explains the request
|
||||
path, suggests experiment sequences, and lets you call real endpoints to observe how the demo behaves.
|
||||
</p>
|
||||
<div class="actions" style="margin-top:18px;">
|
||||
<a class="btn" href="/users.html">Open user lab</a>
|
||||
<a class="btn-soft" href="/aop.html">Open AOP lab</a>
|
||||
<a class="btn-soft" href="/events.html">Open event lab</a>
|
||||
<a class="btn-soft" href="/learn">Open MVC learn API</a>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="stat"><span>Core labs</span><strong>4</strong></div>
|
||||
<div class="stat"><span>Major layers</span><strong>6</strong></div>
|
||||
<div class="stat"><span>Interactive pages</span><strong>4</strong></div>
|
||||
<div class="stat"><span>Tested backend paths</span><strong>2+</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="padding:0;">
|
||||
<div class="card" style="box-shadow:none; border:none; border-radius:28px;">
|
||||
<div class="eyebrow">Start Here</div>
|
||||
<h2>Recommended study order</h2>
|
||||
<div class="list">
|
||||
<div class="list-item">
|
||||
<strong>1. Learn endpoint binding</strong>
|
||||
<p>Hit the live API explorer below and compare query, path, header, cookie, and JSON body patterns.</p>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>2. Study users and validation</strong>
|
||||
<p>Open the user lab to inspect CRUD, duplicate email handling, and aggregate stats.</p>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>3. Watch cross-cutting behavior</strong>
|
||||
<p>Move to AOP and events to see timing, rate limiting, and listener history.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid">
|
||||
<article class="card">
|
||||
<h2>User Management</h2>
|
||||
<p>CRUD, validation, duplicate email protection, search, and stats cards in one interactive page.</p>
|
||||
<code>/users.html</code>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>AOP Showcase</h2>
|
||||
<p>Review logging, performance tracing, and rate limiting demonstrations built with Spring AOP.</p>
|
||||
<code>/aop.html</code>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Event Flow</h2>
|
||||
<p>See how controller actions can publish events and decouple downstream reactions.</p>
|
||||
<code>/events.html</code>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Quick Links</h2>
|
||||
<div class="quick-links">
|
||||
<a href="/api/users">Open `/api/users`</a>
|
||||
<a href="/api/users/stats">Open `/api/users/stats`</a>
|
||||
<a href="/learn">Open `/learn`</a>
|
||||
<a href="/actuator/health">Open `/actuator/health`</a>
|
||||
</div>
|
||||
</article>
|
||||
<section class="card" style="margin-bottom:18px;">
|
||||
<div class="eyebrow">Architecture</div>
|
||||
<h2>How one request travels through the demo</h2>
|
||||
<div class="flow">
|
||||
<div class="step"><strong>Browser</strong><small>Form submit or fetch call starts the request.</small></div>
|
||||
<div class="step"><strong>Security</strong><small>JWT demo routes decide whether the request is public or protected.</small></div>
|
||||
<div class="step"><strong>Controller</strong><small>Spring binds params, body, headers, and cookies into method arguments.</small></div>
|
||||
<div class="step"><strong>Service</strong><small>Business rules run, such as duplicate email checks or stats calculation.</small></div>
|
||||
<div class="step"><strong>AOP / Events</strong><small>Cross-cutting timing or event listeners react without cluttering core logic.</small></div>
|
||||
<div class="step"><strong>Response</strong><small>Structured JSON or HTML returns to the page and becomes visible feedback.</small></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="workspace">
|
||||
<aside class="card">
|
||||
<div class="eyebrow">Lab Tracks</div>
|
||||
<h2>What to practice in each area</h2>
|
||||
<div class="list">
|
||||
<div class="lab">
|
||||
<strong>User management</strong>
|
||||
<small>Create a user, trigger duplicate email protection, search records, and compare stats before and after changes.</small>
|
||||
</div>
|
||||
<div class="lab">
|
||||
<strong>MVC parameter binding</strong>
|
||||
<small>Use `/learn` routes to compare `@RequestParam`, `@PathVariable`, `@RequestBody`, `@RequestHeader`, and `@CookieValue`.</small>
|
||||
</div>
|
||||
<div class="lab">
|
||||
<strong>AOP tracing</strong>
|
||||
<small>Trigger `/api/users` and `/api/users/stats`, then inspect `/aop/aop/stats` to see which methods were counted.</small>
|
||||
</div>
|
||||
<div class="lab">
|
||||
<strong>Application events</strong>
|
||||
<small>Publish LOGIN or CREATED events and refresh event history to understand publisher-listener decoupling.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eyebrow" style="margin-top:20px;">Code Reading Map</div>
|
||||
<h2>Files worth reading next</h2>
|
||||
<div class="list">
|
||||
<div class="code-card">
|
||||
<strong>UserController -> UserService</strong>
|
||||
<small>Shows validation, CRUD orchestration, search, and stats aggregation.</small>
|
||||
</div>
|
||||
<div class="code-card">
|
||||
<strong>LearningSecurityConfig + LearningJwtFilter</strong>
|
||||
<small>Explains why most labs stay public while `/api/secure/**` stays protected.</small>
|
||||
</div>
|
||||
<div class="code-card">
|
||||
<strong>PerformanceAspect + UserEventPublisher + UserEventListener</strong>
|
||||
<small>Shows the two cleanest examples of cross-cutting and event-driven behavior.</small>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="triple">
|
||||
<section class="card" style="grid-column: 1 / -1;">
|
||||
<div class="eyebrow">Live Explorer</div>
|
||||
<h2>Call real endpoints without leaving the page</h2>
|
||||
<p>Use these controls to inspect real JSON responses while you read the code. This makes the project easier to connect to concrete behavior.</p>
|
||||
|
||||
<div class="toolbar" style="margin-top:14px;">
|
||||
<button class="btn" type="button" onclick="loadEndpoint('/actuator/health')">Health</button>
|
||||
<button class="btn-soft" type="button" onclick="loadEndpoint('/api/users/stats')">User stats</button>
|
||||
<button class="btn-soft" type="button" onclick="loadEndpoint('/learn')">Learn overview</button>
|
||||
<button class="btn-soft" type="button" onclick="loadEndpoint('/aop/aop/stats')">AOP stats</button>
|
||||
<button class="btn-soft" type="button" onclick="loadEndpoint('/aop/event/history')">Event history</button>
|
||||
</div>
|
||||
|
||||
<div class="triple" style="margin-top:16px;">
|
||||
<div class="card" style="padding:0; box-shadow:none; background:transparent; border:none;">
|
||||
<div class="field">
|
||||
<label for="eventType">Publish demo event</label>
|
||||
<select id="eventType">
|
||||
<option value="LOGIN">LOGIN</option>
|
||||
<option value="CREATED">CREATED</option>
|
||||
<option value="UPDATED">UPDATED</option>
|
||||
<option value="DELETED">DELETED</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="padding:0; box-shadow:none; background:transparent; border:none;">
|
||||
<div class="field">
|
||||
<label for="eventUserId">User id</label>
|
||||
<input id="eventUserId" value="99">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="padding:0; box-shadow:none; background:transparent; border:none;">
|
||||
<div class="field">
|
||||
<label for="eventUserName">User name</label>
|
||||
<input id="eventUserName" value="learning-user">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar" style="margin-top:14px;">
|
||||
<button class="btn" type="button" onclick="publishEvent()">Publish event</button>
|
||||
<button class="btn-soft" type="button" onclick="loadEndpoint('/api/users')">Load users</button>
|
||||
</div>
|
||||
|
||||
<div class="console">
|
||||
<div class="console-head">Endpoint output</div>
|
||||
<pre id="consoleOutput">Select an experiment above to load live output.</pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="eyebrow">Experiment 1</div>
|
||||
<h2>Trace validation</h2>
|
||||
<p>Open the user lab, create a user, then repeat with the same email. Compare the frontend error with `DuplicateEmailException` and the global exception handler.</p>
|
||||
<div class="chip-list" style="margin-top:12px;">
|
||||
<span class="pill">UserController</span>
|
||||
<span class="pill">UserService</span>
|
||||
<span class="pill">GlobalExceptionHandler</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="eyebrow">Experiment 2</div>
|
||||
<h2>Trace AOP timing</h2>
|
||||
<p>Load users and stats several times, then call `/aop/aop/stats`. Watch how controller and service methods accumulate timing and call count data.</p>
|
||||
<div class="chip-list" style="margin-top:12px;">
|
||||
<span class="pill">PerformanceAspect</span>
|
||||
<span class="pill">@Around</span>
|
||||
<span class="pill">Cross-cutting</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="eyebrow">Experiment 3</div>
|
||||
<h2>Trace event decoupling</h2>
|
||||
<p>Publish CREATED and LOGIN events, then reload event history. This shows how the request can finish while listeners keep handling side effects.</p>
|
||||
<div class="chip-list" style="margin-top:12px;">
|
||||
<span class="pill">Publisher</span>
|
||||
<span class="pill">Listener</span>
|
||||
<span class="pill">@Async</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function loadEndpoint(path, options = {}) {
|
||||
const output = document.getElementById('consoleOutput');
|
||||
output.textContent = 'Loading ' + path + ' ...';
|
||||
try {
|
||||
const response = await fetch(path, options);
|
||||
const contentType = response.headers.get('content-type') || '';
|
||||
if (contentType.includes('application/json')) {
|
||||
const json = await response.json();
|
||||
output.textContent = JSON.stringify(json, null, 2);
|
||||
} else {
|
||||
output.textContent = await response.text();
|
||||
}
|
||||
} catch (error) {
|
||||
output.textContent = 'Request failed: ' + error.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function publishEvent() {
|
||||
const type = document.getElementById('eventType').value;
|
||||
const userId = document.getElementById('eventUserId').value.trim() || '99';
|
||||
const userName = document.getElementById('eventUserName').value.trim() || 'learning-user';
|
||||
const params = new URLSearchParams({
|
||||
userId,
|
||||
userName,
|
||||
eventType: type
|
||||
});
|
||||
await loadEndpoint('/aop/event/publish?' + params.toString(), { method: 'POST' });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user