admin/struts2-demo
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand struts demo lab

Browse Source
This commit is contained in:
Codex
2026-03-18 18:12:20 +08:00
parent 1f60832445
commit fba7b0497f
25 changed files with 1847 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

861
web/index.jsp
View File

@@ -1,552 +1,403 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Struts2 全栈学习平台</title>
<title>Struts2 Demo Lab</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--primary: #667eea;
--secondary: #764ba2;
--success: #11998e;
--warning: #f093fb;
--danger: #f5576c;
--dark: #2d3748;
--light: #f7fafc;
--bg: #f4f6fb;
--panel: rgba(255,255,255,0.94);
--line: #d7e0ea;
--text: #122033;
--muted: #5c6f84;
--brand: #1464c7;
--brand-2: #f68b1f;
--soft: #e8f2ff;
--shadow: 0 20px 44px rgba(18, 32, 51, 0.14);
}
* { box-sizing: border-box; }
body {
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
margin: 0;
min-height: 100vh;
color: var(--dark);
font-family: "Aptos", "Segoe UI", "Microsoft YaHei", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top right, rgba(20, 100, 199, 0.15), transparent 28%),
radial-gradient(circle at bottom left, rgba(246, 139, 31, 0.12), transparent 24%),
var(--bg);
}
.header {
background: rgba(255,255,255,0.95);
padding: 20px 0;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
a { color: inherit; text-decoration: none; }
.shell { max-width: 1480px; margin: 0 auto; padding: 24px; }
.hero, .card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 28px;
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
}
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
.hero {
padding: 28px;
margin-bottom: 18px;
}
.eyebrow {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 800;
color: var(--brand);
}
.hero-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8em;
font-weight: bold;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links a {
margin-left: 25px;
text-decoration: none;
color: var(--dark);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover { color: var(--primary); }
.container {
max-width: 1400px;
margin: 40px auto;
padding: 0 20px;
}
.hero {
text-align: center;
color: white;
margin-bottom: 50px;
gap: 20px;
align-items: flex-start;
}
.hero h1 {
font-size: 3em;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
margin: 10px 0 12px;
font-size: 42px;
line-height: 1.1;
}
.hero p {
font-size: 1.3em;
opacity: 0.9;
margin: 0;
color: var(--muted);
line-height: 1.9;
max-width: 860px;
}
.progress-section {
background: white;
border-radius: 20px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.progress-section h2 {
margin-bottom: 20px;
color: var(--primary);
}
.progress-bar {
.hero-actions {
display: flex;
gap: 15px;
gap: 10px;
flex-wrap: wrap;
}
.progress-item {
flex: 1;
min-width: 150px;
padding: 15px;
background: var(--light);
border-radius: 10px;
text-align: center;
border-left: 4px solid var(--primary);
transition: transform 0.3s;
}
.progress-item:hover { transform: translateY(-5px); }
.progress-item.completed { border-color: var(--success); }
.progress-item.current { border-color: var(--warning); background: #fff3e0; }
.progress-item h3 { font-size: 1.1em; margin-bottom: 5px; }
.progress-item span { font-size: 0.85em; color: #666; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 25px;
}
.card {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(0,0,0,0.3);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--light);
}
.card-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
.btn, .btn-soft {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
margin-right: 15px;
border-radius: 999px;
padding: 12px 18px;
font-weight: 700;
}
.card-icon.green { background: #e8f5e9; }
.card-icon.blue { background: #e3f2fd; }
.card-icon.pink { background: #fce4ec; }
.card-icon.yellow { background: #fff3e0; }
.card-icon.purple { background: #f3e5f5; }
.card h3 {
font-size: 1.3em;
color: var(--dark);
.btn { background: linear-gradient(135deg, var(--brand), #3a8dff); color: white; }
.btn-soft { background: var(--soft); color: var(--brand); }
.metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 20px;
}
.card p {
color: #666;
line-height: 1.7;
margin-bottom: 15px;
.metric {
padding: 16px;
border-radius: 18px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.56);
}
.metric span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.metric strong { font-size: 26px; }
.layout {
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.sidebar, .content { display: flex; flex-direction: column; gap: 18px; }
.card { padding: 22px; }
.search {
display: flex;
gap: 10px;
margin-top: 14px;
}
.search input {
flex: 1;
border: 1px solid var(--line);
border-radius: 16px;
padding: 13px 14px;
font: inherit;
background: transparent;
color: var(--text);
outline: none;
}
.helper-list {
margin: 14px 0 0;
padding-left: 18px;
color: var(--muted);
line-height: 1.9;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.demo-card {
border: 1px solid var(--line);
border-radius: 22px;
padding: 18px;
background: rgba(255,255,255,0.45);
transition: transform 0.18s ease, border-color 0.18s ease;
}
.demo-card:hover {
transform: translateY(-3px);
border-color: rgba(20, 100, 199, 0.28);
}
.demo-card h3 {
margin: 10px 0 8px;
font-size: 20px;
}
.demo-card p {
margin: 0 0 14px;
color: var(--muted);
line-height: 1.8;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.tag {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8em;
margin-right: 5px;
margin-bottom: 5px;
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
background: var(--soft);
color: var(--brand);
font-size: 12px;
font-weight: 700;
}
.tag.basic { background: #e8f5e9; color: #2e7d32; }
.tag.advance { background: #e3f2fd; color: #1565c0; }
.tag.expert { background: #fce4ec; color: #c2185b; }
.btn {
display: inline-block;
padding: 10px 25px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: 500;
margin-top: 10px;
transition: transform 0.3s, box-shadow 0.3s;
.demo-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
.link-btn {
display: inline-flex;
padding: 9px 14px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--text);
background: white;
font-size: 13px;
font-weight: 700;
}
.feature-list {
list-style: none;
margin: 15px 0;
.pipeline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
.feature-list li {
padding: 8px 0;
padding-left: 25px;
position: relative;
.step {
padding: 16px;
border-radius: 18px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.52);
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--success);
font-weight: bold;
}
.code-preview {
background: #1e1e1e;
color: #d4d4d4;
padding: 15px;
border-radius: 10px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.85em;
overflow-x: auto;
margin: 15px 0;
}
.code-preview .keyword { color: #569cd6; }
.code-preview .string { color: #ce9178; }
.code-preview .comment { color: #6a9955; }
.code-preview .annotation { color: #c586c0; }
.footer {
.step strong { display: block; margin-bottom: 8px; }
.step p { margin: 0; color: var(--muted); line-height: 1.75; }
.empty {
padding: 14px;
border: 1px dashed var(--line);
border-radius: 16px;
color: var(--muted);
text-align: center;
padding: 40px 20px;
color: white;
opacity: 0.8;
}
@media (max-width: 768px) {
.hero h1 { font-size: 2em; }
.grid { grid-template-columns: 1fr; }
.progress-bar { flex-direction: column; }
.nav-links { display: none; }
@media (max-width: 1100px) {
.layout { grid-template-columns: 1fr; }
.grid, .pipeline, .metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.shell { padding: 14px; }
.hero-head, .search { flex-direction: column; align-items: stretch; }
.grid, .pipeline, .metrics { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="header">
<div class="header-content">
<div class="logo">🚀 Struts2 学习平台</div>
<div class="nav-links">
<a href="#course">课程体系</a>
<a href="#examples">示例代码</a>
<a href="#projects">实战项目</a>
<a href="#resources">资源下载</a>
</div>
</div>
</div>
<div class="container">
<div class="hero">
<h1>从零掌握 Struts2 框架</h1>
<p>完整的 Struts2 学习路径 | 视频教程 | 代码示例 | 实战项目</p>
</div>
<!-- 学习进度 -->
<div class="progress-section">
<h2>📈 学习路径</h2>
<div class="progress-bar">
<div class="progress-item completed">
<h3>第一阶段</h3>
<span>环境搭建 + 基础</span>
</div>
<div class="progress-item current">
<h3>第二阶段</h3>
<span>核心组件</span>
</div>
<div class="progress-item">
<h3>第三阶段</h3>
<span>数据处理</span>
</div>
<div class="progress-item">
<h3>第四阶段</h3>
<span>企业应用</span>
</div>
</div>
</div>
<!-- 课程卡片 -->
<div class="grid" id="course">
<!-- 1. Hello World -->
<div class="card">
<div class="card-header">
<div class="card-icon green">👋</div>
<h3>1. Hello World</h3>
</div>
<p>Struts2 入门最简单的示例，掌握基本的 Action 配置和参数传递。</p>
<ul class="feature-list">
<li>Action 编写</li>
<li>struts.xml 配置</li>
<li>结果视图映射</li>
</ul>
<span class="tag basic">入门</span>
<a href="demo/hello/index.jsp" class="btn">开始学习</a>
</div>
<!-- 2. 表单与验证 -->
<div class="card">
<div class="card-header">
<div class="card-icon blue">✅</div>
<h3>2. 表单与验证</h3>
</div>
<p>深入理解 Struts2 的两种验证方式：编程式验证和声明式验证。</p>
<ul class="feature-list">
<li>validate() 方法</li>
<li>XML 验证文件</li>
<li>字段级验证</li>
</ul>
<span class="tag basic">入门</span>
<a href="demo/validation/index.jsp" class="btn">开始学习</a>
</div>
<!-- 3. 数据封装 -->
<div class="card">
<div class="card-header">
<div class="card-icon pink">📦</div>
<h3>3. 数据封装</h3>
</div>
<p>掌握 Struts2 的数据封装机制，包括属性驱动和模型驱动。</p>
<ul class="feature-list">
<li>属性驱动</li>
<li>模型驱动 (ModelDriven)</li>
<li>复杂对象封装</li>
</ul>
<span class="tag basic">进阶</span>
<a href="demo/model/index.jsp" class="btn">开始学习</a>
</div>
<!-- 4. 文件上传 -->
<div class="card">
<div class="card-header">
<div class="card-icon yellow">📁</div>
<h3>4. 文件上传</h3>
</div>
<p>Struts2 文件上传功能，支持单文件和多文件上传。</p>
<ul class="feature-list">
<li>File 对象接收</li>
<li>文件类型验证</li>
<li>多文件上传</li>
</ul>
<span class="tag advance">进阶</span>
<a href="demo/upload/index.jsp" class="btn">开始学习</a>
</div>
<!-- 5. 类型转换 -->
<div class="card">
<div class="card-header">
<div class="card-icon purple">🔄</div>
<h3>5. 类型转换器</h3>
</div>
<p>自定义类型转换器，处理特殊数据类型和复杂对象。</p>
<ul class="feature-list">
<li>TypeConverter</li>
<li>StrutsTypeConverter</li>
<li>局部/全局转换器</li>
</ul>
<span class="tag advance">进阶</span>
<a href="demo/converter/index.jsp" class="btn">开始学习</a>
</div>
<!-- 6. AJAX -->
<div class="card">
<div class="card-header">
<div class="card-icon green">⚡</div>
<h3>6. AJAX + JSON</h3>
</div>
<p>使用 Struts2 JSON 插件实现异步数据交互。</p>
<ul class="feature-list">
<li>JSON 结果类型</li>
<li>AJAX 表单提交</li>
<li>局部页面刷新</li>
</ul>
<span class="tag advance">进阶</span>
<a href="demo/ajax/index.jsp" class="btn">开始学习</a>
</div>
<!-- 7. 拦截器 -->
<div class="card">
<div class="card-header">
<div class="card-icon blue">🛡️</div>
<h3>7. 拦截器</h3>
</div>
<p>理解拦截器机制，这是 Struts2 框架的核心灵魂。</p>
<ul class="feature-list">
<li>自定义拦截器</li>
<li>拦截器栈</li>
<li>方法过滤拦截器</li>
</ul>
<span class="tag advance">进阶</span>
<a href="demo/interceptor/index.jsp" class="btn">开始学习</a>
</div>
<!-- 8. OGNL -->
<div class="card">
<div class="card-header">
<div class="card-icon pink">📊</div>
<h3>8. OGNL 表达式</h3>
</div>
<p>掌握 Struts2 的表达式语言，操作对象图和集合。</p>
<ul class="feature-list">
<li>基础语法</li>
<li>集合操作</li>
<li>上下文对象</li>
</ul>
<span class="tag advance">进阶</span>
<a href="demo/ognl/index.jsp" class="btn">开始学习</a>
</div>
<!-- 9. Session/Request -->
<div class="card">
<div class="card-header">
<div class="card-icon yellow">🔐</div>
<h3>9. 作用域对象</h3>
</div>
<p>掌握 ActionContext 和值栈的操作。</p>
<ul class="feature-list">
<li>Session 管理</li>
<li>Request/Response</li>
<li>值栈操作</li>
</ul>
<span class="tag advance">进阶</span>
<a href="demo/scope/index.jsp" class="btn">开始学习</a>
</div>
<!-- 10. REST -->
<div class="card">
<div class="card-header">
<div class="card-icon purple">🌐</div>
<h3>10. RESTful</h3>
</div>
<p>使用 Struts2 实现 RESTful 风格的 API 设计。</p>
<ul class="feature-list">
<li>REST 插件</li>
<li>URL 参数映射</li>
<li>内容协商</li>
</ul>
<span class="tag expert">专家</span>
<a href="demo/rest/index.jsp" class="btn">开始学习</a>
</div>
<!-- 11. 国际化 -->
<div class="card">
<div class="card-header">
<div class="card-icon green">🌍</div>
<h3>11. 国际化 (i18n)</h3>
</div>
<p>实现多语言支持的应用程序。</p>
<ul class="feature-list">
<li>资源文件配置</li>
<li>getText() 使用</li>
<li>动态语言切换</li>
</ul>
<span class="tag advance">进阶</span>
<a href="demo/i18n/index.jsp" class="btn">开始学习</a>
</div>
<!-- 12. 源码解析 -->
<div class="card">
<div class="card-header">
<div class="card-icon blue">🔍</div>
<h3>12. 源码解析</h3>
</div>
<p>深入理解 Struts2 框架的内部实现原理。</p>
<ul class="feature-list">
<li>请求处理流程</li>
<li>拦截器链源码</li>
<li>OGNL 原理</li>
</ul>
<span class="tag expert">专家</span>
<a href="demo/source/index.jsp" class="btn">开始学习</a>
</div>
</div>
<!-- 配置参考 -->
<div class="progress-section" style="margin-top: 50px;" id="examples">
<h2>⚙️ 配置文件示例</h2>
<div class="grid">
<div class="shell">
<section class="hero">
<div class="hero-head">
<div>
<h3 style="margin: 15px 0;">struts.xml 基础配置</h3>
<div class="code-preview">
<span class="comment">&lt;?xml version="1.0"?&gt;</span>
<span class="keyword">&lt;struts&gt;</span>
<span class="comment">&lt;!-- 开发模式 --&gt;</span>
<span class="keyword">&lt;constant</span> name=<span class="string">"struts.devMode"</span> value=<span class="string">"true"</span><span class="keyword">/&gt;</span>
<span class="comment">&lt;!-- 包定义 --&gt;</span>
<span class="keyword">&lt;package</span> name=<span class="string">"default"</span> namespace=<span class="string">"/"</span> extends=<span class="string">"struts-default"</span><span class="keyword">&gt;</span>
<span class="keyword">&lt;action</span> name=<span class="string">"hello"</span> class=<span class="string">"com.demo.HelloAction"</span><span class="keyword">&gt;</span>
<span class="keyword">&lt;result&gt;/hello.jsp&lt;/result&gt;</span>
<span class="keyword">&lt;/action&gt;</span>
<span class="keyword">&lt;/package&gt;</span>
<span class="keyword">&lt;/struts&gt;</span>
</div>
<div class="eyebrow">Struts2 Demo Lab</div>
<h1>Turn scattered examples into a guided demo portal</h1>
<p>This workspace now acts like a mini learning application instead of a pile of sample pages. You can jump into action basics, login flow, validation, uploads, and JSON demos from one place.</p>
</div>
<div>
<h3 style="margin: 15px 0;">Action 基础写法</h3>
<div class="code-preview">
<span class="keyword">public class</span> HelloAction <span class="keyword">extends</span> ActionSupport {
<span class="keyword">private</span> String name;
<span class="annotation">@Override</span>
<span class="keyword">public</span> String execute() {
<span class="keyword">return</span> SUCCESS;
}
<span class="comment">// getter/setter</span>
<span class="keyword">public</span> String getName() { <span class="keyword">return</span> name; }
<span class="keyword">public void</span> setName(String name) { <span class="keyword">this</span>.name = name; }
}
</div>
<div class="hero-actions">
<a class="btn" href="hello?name=Platform%20Team">Run hello action</a>
<a class="btn-soft" href="user/login.jsp">Open login flow</a>
</div>
</div>
</div>
<!-- 实战项目 -->
<div class="progress-section" style="margin-top: 50px;" id="projects">
<h2>💼 实战项目</h2>
<div class="grid">
<div class="card">
<h3>📝 博客系统</h3>
<p>完整的博客系统，包含文章管理、评论、分类等功能。</p>
<span class="tag basic">入门</span>
<a href="#" class="btn">查看详情</a>
</div>
<div class="card">
<h3>📋 待办事项</h3>
<p>Todo 列表应用，练习 CRUD 操作和 AJAX。</p>
<span class="tag basic">入门</span>
<a href="#" class="btn">查看详情</a>
</div>
<div class="card">
<h3>🛒 商城购物车</h3>
<p>购物车功能，练习 Session 和订单管理。</p>
<span class="tag advance">进阶</span>
<a href="#" class="btn">查看详情</a>
</div>
<div class="metrics">
<div class="metric"><span>Live action routes</span><strong>5</strong></div>
<div class="metric"><span>Guide pages</span><strong>4</strong></div>
<div class="metric"><span>Demo forms</span><strong>3</strong></div>
<div class="metric"><span>JSON endpoints</span><strong>2</strong></div>
</div>
</section>
<div class="layout">
<aside class="sidebar">
<section class="card">
<div class="eyebrow">Quick search</div>
<h2>Filter demos by keyword</h2>
<div class="search">
<input id="searchInput" type="text" placeholder="Try login, validation, upload, json, or hello" />
</div>
<ul class="helper-list">
<li>Use the action demos to see real Struts requests and results.</li>
<li>Use the guide pages to compare implementation patterns.</li>
<li>Use the JSON routes to explain API-style actions in class.</li>
</ul>
</section>
<section class="card">
<div class="eyebrow">Fast routes</div>
<h2>Best places to start</h2>
<div class="demo-links">
<a class="link-btn" href="user/form.jsp">User form</a>
<a class="link-btn" href="validation/form.jsp">Validation form</a>
<a class="link-btn" href="upload/index.jsp">Upload flow</a>
<a class="link-btn" href="api/users">JSON endpoint</a>
</div>
</section>
</aside>
<main class="content">
<section class="card">
<div class="eyebrow">Catalog</div>
<h2>Interactive demos and guides</h2>
<div class="grid" id="demoGrid">
<article class="demo-card" data-keywords="hello action request parameter basics">
<div class="tag-list">
<span class="tag">Action</span>
<span class="tag">Beginner</span>
</div>
<h3>Hello action</h3>
<p>Run a real Struts action, inject a request parameter, and inspect the rendered result page.</p>
<div class="demo-links">
<a class="link-btn" href="hello?name=Platform%20Team">Run demo</a>
<a class="link-btn" href="demo/hello/index.jsp">Read guide</a>
</div>
</article>
<article class="demo-card" data-keywords="login session form validation credentials">
<div class="tag-list">
<span class="tag">Form</span>
<span class="tag">Core flow</span>
</div>
<h3>Login flow</h3>
<p>Use demo credentials, see field validation, and land on a richer post-login dashboard.</p>
<div class="demo-links">
<a class="link-btn" href="user/login.jsp">Open login</a>
</div>
</article>
<article class="demo-card" data-keywords="user form submit profile">
<div class="tag-list">
<span class="tag">Action</span>
<span class="tag">Form submit</span>
</div>
<h3>User intake form</h3>
<p>Submit a small profile payload and see action-backed validation with a success summary.</p>
<div class="demo-links">
<a class="link-btn" href="user/form.jsp">Open form</a>
</div>
</article>
<article class="demo-card" data-keywords="validation field errors age email bio">
<div class="tag-list">
<span class="tag">Validation</span>
<span class="tag">Teaching</span>
</div>
<h3>Validation demo</h3>
<p>Test length, email, age, and text limits while keeping the page readable for explanation.</p>
<div class="demo-links">
<a class="link-btn" href="validation/form.jsp">Open validation</a>
</div>
</article>
<article class="demo-card" data-keywords="upload multipart metadata file">
<div class="tag-list">
<span class="tag">Upload</span>
<span class="tag">Safe demo</span>
</div>
<h3>Upload metadata demo</h3>
<p>Capture file metadata through Struts form binding without writing anything to disk.</p>
<div class="demo-links">
<a class="link-btn" href="upload/index.jsp">Open upload</a>
<a class="link-btn" href="demo/upload/index.jsp">Read guide</a>
</div>
</article>
<article class="demo-card" data-keywords="ajax json api rest users">
<div class="tag-list">
<span class="tag">JSON</span>
<span class="tag">API style</span>
</div>
<h3>AJAX and REST payloads</h3>
<p>Show how Struts2 can return JSON from actions for AJAX examples and lightweight REST-style demos.</p>
<div class="demo-links">
<a class="link-btn" href="ajax">Action JSON</a>
<a class="link-btn" href="api/users">REST JSON</a>
<a class="link-btn" href="demo/ajax/index.jsp">Read guide</a>
</div>
</article>
<article class="demo-card" data-keywords="model driven user bean object binding">
<div class="tag-list">
<span class="tag">Guide</span>
<span class="tag">Patterns</span>
</div>
<h3>Model binding guide</h3>
<p>Compare property-driven and model-driven input binding to explain how Struts builds action state.</p>
<div class="demo-links">
<a class="link-btn" href="demo/model/index.jsp">Open guide</a>
</div>
</article>
</div>
<div class="empty" id="emptyState" style="display: none; margin-top: 16px;">No demo matched the current search.</div>
</section>
<section class="card">
<div class="eyebrow">Learning pipeline</div>
<h2>Suggested order for the full demo</h2>
<div class="pipeline">
<div class="step">
<strong>1. Start with hello</strong>
<p>See the smallest action and result mapping first.</p>
</div>
<div class="step">
<strong>2. Move to forms</strong>
<p>Login and user intake show parameter binding in action.</p>
</div>
<div class="step">
<strong>3. Validate inputs</strong>
<p>Explain field errors, business rules, and success pages.</p>
</div>
<div class="step">
<strong>4. Expand to JSON</strong>
<p>Close the session with AJAX and REST-style payload demos.</p>
</div>
</div>
</section>
</main>
</div>
</div>
<div class="footer">
<p>Struts2 版本: 2.5.30 | Tomcat 9 | JDK 17</p>
<p>本学习平台包含完整的代码示例和配置文件</p>
</div>
<script>
const searchInput = document.getElementById('searchInput');
const cards = Array.from(document.querySelectorAll('.demo-card'));
const emptyState = document.getElementById('emptyState');
searchInput.addEventListener('input', () => {
const keyword = searchInput.value.trim().toLowerCase();
let visible = 0;
cards.forEach((card) => {
const match = !keyword || card.dataset.keywords.includes(keyword);
card.style.display = match ? 'block' : 'none';
if (match) {
visible += 1;
}
});
emptyState.style.display = visible ? 'none' : 'block';
});
</script>
</body>
</html>
</html>