86 lines
3.3 KiB
Plaintext
86 lines
3.3 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
<%@ taglib prefix="s" uri="/struts-tags" %>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>计算器 - Struts2 表单示例</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
|
|
h1 { color: #e74c3c; }
|
|
.form-group { margin: 15px 0; }
|
|
label { display: inline-block; width: 100px; }
|
|
input, select { padding: 8px; font-size: 14px; }
|
|
button { background: #3498db; color: white; padding: 10px 20px; border: none; cursor: pointer; }
|
|
button:hover { background: #2980b9; }
|
|
.result { background: #2ecc71; color: white; padding: 15px; margin: 20px 0; border-radius: 5px; }
|
|
.error { color: #e74c3c; font-size: 12px; }
|
|
.tip { background: #f9f9f9; padding: 15px; border-left: 4px solid #3498db; margin: 20px 0; }
|
|
.quickbar { background:#fff7e6; padding:12px; border-left:4px solid #fa8c16; margin:20px 0; border-radius:6px; }
|
|
.quickbar button { margin-right:8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔢 计算器 - Struts2 表单示例</h1>
|
|
|
|
<s:if test="result != null">
|
|
<div class="result">
|
|
计算结果: <s:property value="num1"/>
|
|
<s:property value="operator"/>
|
|
<s:property value="num2"/>
|
|
= <s:property value="result"/>
|
|
</div>
|
|
</s:if>
|
|
|
|
<div class="quickbar">
|
|
<strong>快速实验：</strong>
|
|
<button type="button" onclick="fillExample(12, '+', 8)">填入正确示例</button>
|
|
<button type="button" onclick="fillExample(12, '/', 0)">填入除零错误</button>
|
|
<button type="button" onclick="fillExample('', '*', '')">填入校验错误</button>
|
|
</div>
|
|
|
|
<s:form action="calc_execute" method="post">
|
|
<div class="form-group">
|
|
<label>数字 1:</label>
|
|
<s:textfield name="num1" placeholder="输入第一个数字"/>
|
|
<s:fielderror fieldName="num1" cssClass="error"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>运算符:</label>
|
|
<s:select name="operator" list="{'+', '-', '*', '/'}" headerKey="" headerValue="选择运算符"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>数字 2:</label>
|
|
<s:textfield name="num2" placeholder="输入第二个数字"/>
|
|
<s:fielderror fieldName="num2" cssClass="error"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<button type="submit">计算</button>
|
|
</div>
|
|
</s:form>
|
|
|
|
<div class="tip">
|
|
<strong>学习点:</strong>
|
|
<ul>
|
|
<li><code>name</code> 属性对应 Action 的 setter 方法</li>
|
|
<li><code><s:fielderror></code> 显示验证错误</li>
|
|
<li><code>validate()</code> 方法进行数据验证</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p><a href="learn">← 返回学习中心</a></p>
|
|
|
|
<script>
|
|
function fillExample(n1, op, n2) {
|
|
const fields = document.querySelectorAll('input[type="text"]');
|
|
const select = document.querySelector('select');
|
|
if (fields[0]) fields[0].value = n1;
|
|
if (select) select.value = op;
|
|
if (fields[1]) fields[1].value = n2;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|