275 lines
12 KiB
Plaintext
275 lines
12 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||
<%@ taglib prefix="s" uri="/struts-tags" %>
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Session 登录实验 - Struts2 学习实验台</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
font-family: "Aptos", "Segoe UI", "Microsoft YaHei", sans-serif;
|
||
background: linear-gradient(135deg, #122c63 0%, #1464c7 52%, #4db5ff 100%);
|
||
}
|
||
.shell {
|
||
width: min(1120px, 100%);
|
||
display: grid;
|
||
grid-template-columns: 1fr 430px;
|
||
gap: 18px;
|
||
}
|
||
.panel {
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 28px;
|
||
padding: 28px;
|
||
box-shadow: 0 24px 60px rgba(0,0,0,0.22);
|
||
}
|
||
.top-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
.eyebrow {
|
||
font-size: 12px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: #1464c7;
|
||
font-weight: 800;
|
||
}
|
||
h1, h2 { margin: 10px 0 12px; }
|
||
p { margin: 0; color: #566a80; line-height: 1.85; }
|
||
.btn-ghost, .link-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 10px 14px;
|
||
border-radius: 999px;
|
||
border: 1px solid #d7e5f7;
|
||
background: #ffffff;
|
||
color: #1464c7;
|
||
text-decoration: none;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.note {
|
||
margin-top: 18px;
|
||
padding: 16px;
|
||
border-radius: 18px;
|
||
background: #edf5ff;
|
||
border: 1px solid #d7e5f7;
|
||
}
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin-top: 18px;
|
||
}
|
||
.stat {
|
||
padding: 14px;
|
||
border-radius: 18px;
|
||
border: 1px solid #d7e5f7;
|
||
background: #f8fbff;
|
||
}
|
||
.stat strong { display: block; margin-bottom: 6px; }
|
||
.field {
|
||
margin-bottom: 16px;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 700;
|
||
color: #1f3650;
|
||
}
|
||
input {
|
||
width: 100%;
|
||
padding: 13px 14px;
|
||
border-radius: 14px;
|
||
border: 1px solid #d6e1ed;
|
||
font: inherit;
|
||
}
|
||
button.submit-btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
border: 0;
|
||
border-radius: 14px;
|
||
background: linear-gradient(135deg, #1464c7, #3d8ef6);
|
||
color: white;
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
}
|
||
.error {
|
||
color: #c53d3d;
|
||
font-size: 13px;
|
||
margin-top: 6px;
|
||
}
|
||
.action-error {
|
||
margin: 0 0 16px;
|
||
padding: 14px;
|
||
border-radius: 14px;
|
||
background: #fff1f1;
|
||
color: #b63a3a;
|
||
border: 1px solid #f1c4c4;
|
||
}
|
||
.links {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin-top: 18px;
|
||
}
|
||
@media (max-width: 860px) {
|
||
.shell { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shell">
|
||
<section class="panel">
|
||
<div class="top-actions">
|
||
<div class="eyebrow" id="leftEyebrow">Session 登录章节</div>
|
||
<button class="btn-ghost" type="button" id="languageBtn">EN</button>
|
||
</div>
|
||
<h1 id="leftTitle">用最经典的 Struts2 Session 登录，把后续实验页保护起来</h1>
|
||
<p id="leftText">这个页面不只是演示登录表单，而是把 Action 校验、写入 Session、拦截器校验和登录后仪表盘串成一个完整章节，适合你系统掌握老项目最常见的鉴权思路。</p>
|
||
|
||
<div class="note">
|
||
<strong id="credentialTitle">演示账号</strong>
|
||
<p id="credentialBody" style="margin-top: 8px;">用户名：<code>admin</code><br/>密码：<code>123456</code></p>
|
||
</div>
|
||
|
||
<div class="stats">
|
||
<div class="stat">
|
||
<strong id="statOneTitle">这一页讲什么</strong>
|
||
<span id="statOneText">Action 校验、错误回显、Session 写入、登录后跳转。</span>
|
||
</div>
|
||
<div class="stat">
|
||
<strong id="statTwoTitle">下一步看什么</strong>
|
||
<span id="statTwoText">登录成功后会先回到学习门户，再进入仪表盘、用户表单、校验页和上传页。</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="links">
|
||
<a class="link-btn" href="../index.action" id="backPortalLink">返回门户</a>
|
||
<s:if test="#session.demoUser != null">
|
||
<a class="link-btn" href="../index.action" id="dashboardLink">进入学习门户</a>
|
||
<a class="link-btn" href="../logout.action" id="logoutLink">退出登录</a>
|
||
</s:if>
|
||
<s:else>
|
||
<a class="link-btn" href="../hello.action?name=Team" id="helloLink">运行 Hello Action</a>
|
||
</s:else>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="eyebrow" id="formEyebrow">登录表单</div>
|
||
<h2 id="formTitle">输入演示账号</h2>
|
||
|
||
<s:if test="#session.demoUser != null">
|
||
<div class="note">
|
||
<strong id="loggedInTitle">当前已登录</strong>
|
||
<p id="loggedInText" style="margin-top: 8px;">你已经拥有可访问的 Session，可以先进入学习门户总览全部模块，也可以退出后重新体验登录过程。</p>
|
||
</div>
|
||
<div class="links">
|
||
<a class="link-btn" href="../index.action" id="loggedInDashboardLink">打开学习门户</a>
|
||
<a class="link-btn" href="../logout.action" id="loggedInLogoutLink">退出后重试</a>
|
||
</div>
|
||
</s:if>
|
||
<s:else>
|
||
<s:if test="hasActionErrors()">
|
||
<div class="action-error"><s:actionerror/></div>
|
||
</s:if>
|
||
|
||
<s:form action="login" method="post" namespace="/">
|
||
<div class="field">
|
||
<label for="username" id="usernameLabel">用户名</label>
|
||
<s:textfield id="username" name="username" placeholder="admin"/>
|
||
<div class="error"><s:fielderror fieldName="username"/></div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="password" id="passwordLabel">密码</label>
|
||
<s:password id="password" name="password" placeholder="123456" showPassword="true"/>
|
||
<div class="error"><s:fielderror fieldName="password"/></div>
|
||
</div>
|
||
|
||
<button class="submit-btn" type="submit" id="submitBtn">写入 Session 并进入学习门户</button>
|
||
</s:form>
|
||
</s:else>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="../assets/struts-lab.js"></script>
|
||
<script>
|
||
strutsLab.mount({
|
||
messages: {
|
||
zh: {
|
||
pageTitle: "Session 登录实验 - Struts2 学习实验台",
|
||
text: {
|
||
leftEyebrow: "Session 登录章节",
|
||
leftTitle: "用最经典的 Struts2 Session 登录，把后续实验页保护起来",
|
||
leftText: "这个页面不只是演示登录表单，而是把 Action 校验、写入 Session、拦截器校验和登录后仪表盘串成一个完整章节，适合你系统掌握老项目最常见的鉴权思路。",
|
||
credentialTitle: "演示账号",
|
||
statOneTitle: "这一页讲什么",
|
||
statOneText: "Action 校验、错误回显、Session 写入、登录后跳转。",
|
||
statTwoTitle: "下一步看什么",
|
||
statTwoText: "登录成功后会先回到学习门户，再进入仪表盘、用户表单、校验页和上传页。",
|
||
backPortalLink: "返回门户",
|
||
dashboardLink: "进入学习门户",
|
||
logoutLink: "退出登录",
|
||
formEyebrow: "登录表单",
|
||
formTitle: "输入演示账号",
|
||
loggedInTitle: "当前已登录",
|
||
loggedInText: "你已经拥有可访问的 Session，可以先进入学习门户总览全部模块，也可以退出后重新体验登录过程。",
|
||
loggedInDashboardLink: "打开学习门户",
|
||
loggedInLogoutLink: "退出后重试",
|
||
helloLink: "运行 Hello Action",
|
||
usernameLabel: "用户名",
|
||
passwordLabel: "密码",
|
||
submitBtn: "写入 Session 并进入学习门户"
|
||
},
|
||
html: {
|
||
credentialBody: "用户名：<code>admin</code><br/>密码：<code>123456</code>"
|
||
}
|
||
},
|
||
en: {
|
||
pageTitle: "Session Login Lab - Struts2 Learning Lab",
|
||
text: {
|
||
leftEyebrow: "Session login chapter",
|
||
leftTitle: "Use the classic Struts2 session login pattern to protect later lab pages",
|
||
leftText: "This page is not just a login form. It connects action validation, session writes, interceptor checks, and a post-login dashboard into one complete learning chapter.",
|
||
credentialTitle: "Demo credentials",
|
||
statOneTitle: "What this page teaches",
|
||
statOneText: "Action validation, error echoing, session writes, and post-login routing.",
|
||
statTwoTitle: "What to open next",
|
||
statTwoText: "After login, return to the learning portal first, then continue to the dashboard, user form, validation page, and upload page.",
|
||
backPortalLink: "Back to portal",
|
||
dashboardLink: "Open learning portal",
|
||
logoutLink: "Log out",
|
||
formEyebrow: "Login form",
|
||
formTitle: "Enter the demo account",
|
||
loggedInTitle: "Already logged in",
|
||
loggedInText: "A valid session already exists. Open the learning portal for the full overview or log out and replay the login flow.",
|
||
loggedInDashboardLink: "Open learning portal",
|
||
loggedInLogoutLink: "Log out and retry",
|
||
helloLink: "Run hello action",
|
||
usernameLabel: "Username",
|
||
passwordLabel: "Password",
|
||
submitBtn: "Write session and enter learning portal"
|
||
},
|
||
html: {
|
||
credentialBody: "Username: <code>admin</code><br/>Password: <code>123456</code>"
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|