forked from admin/struts2-demo
552 lines
20 KiB
Plaintext
552 lines
20 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Struts2 全栈学习平台</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;
|
|
}
|
|
body {
|
|
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
|
min-height: 100vh;
|
|
color: var(--dark);
|
|
}
|
|
.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;
|
|
}
|
|
.header-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
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;
|
|
}
|
|
.hero h1 {
|
|
font-size: 3em;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
|
}
|
|
.hero p {
|
|
font-size: 1.3em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
gap: 15px;
|
|
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;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5em;
|
|
margin-right: 15px;
|
|
}
|
|
.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);
|
|
}
|
|
|
|
.card p {
|
|
color: #666;
|
|
line-height: 1.7;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8em;
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.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;
|
|
}
|
|
.btn:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
margin: 15px 0;
|
|
}
|
|
.feature-list li {
|
|
padding: 8px 0;
|
|
padding-left: 25px;
|
|
position: relative;
|
|
}
|
|
.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 {
|
|
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; }
|
|
}
|
|
</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>
|
|
<h3 style="margin: 15px 0;">struts.xml 基础配置</h3>
|
|
<div class="code-preview">
|
|
<span class="comment"><?xml version="1.0"?></span>
|
|
<span class="keyword"><struts></span>
|
|
<span class="comment"><!-- 开发模式 --></span>
|
|
<span class="keyword"><constant</span> name=<span class="string">"struts.devMode"</span> value=<span class="string">"true"</span><span class="keyword">/></span>
|
|
|
|
<span class="comment"><!-- 包定义 --></span>
|
|
<span class="keyword"><package</span> name=<span class="string">"default"</span> namespace=<span class="string">"/"</span> extends=<span class="string">"struts-default"</span><span class="keyword">></span>
|
|
|
|
<span class="keyword"><action</span> name=<span class="string">"hello"</span> class=<span class="string">"com.demo.HelloAction"</span><span class="keyword">></span>
|
|
<span class="keyword"><result>/hello.jsp</result></span>
|
|
<span class="keyword"></action></span>
|
|
|
|
<span class="keyword"></package></span>
|
|
<span class="keyword"></struts></span>
|
|
</div>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>Struts2 版本: 2.5.30 | Tomcat 9 | JDK 17</p>
|
|
<p>本学习平台包含完整的代码示例和配置文件</p>
|
|
</div>
|
|
</body>
|
|
</html> |