在本章我們將會在Action類中使用Annotation來驗證login程序。我們這個login程序還沒有使用數據庫來驗證用戶。相反的我們在Action類中使用硬編碼的形式來驗證login name和passwords(User: Admin and Password: Admin)
程序是如何工作的 :
1. 顯示登錄頁面等待輸入
2. 用戶輸入用戶名和密碼後點擊"Login"按鈕
3. 在Action類中用戶校驗得到了執行,如果用戶在name/password字段輸入Admin/Admin,那麼將會顯示成功頁面.否則頁面顯示錯誤信息.
開發本程序的步驟 :
這是些簡單的創建登錄頁面的步驟 :
1.創建登錄頁面
程序的用戶界面由登錄表單(login.jsp)和成功消息頁面(loginsuccess.jsp)組成.
login.jsp用來向用戶顯示登錄頁面.在我們的程序中它存放在"webapps/Struts2tutorial/pages/",這就是login.jsp的代碼 :
- <%@ taglib prefix="s" uri="/struts-tags" %>
- <html>
- <head>
- <title>Struts 2 Login Application!</title>
- <link href="<s:url value="/css/main.css"/>" rel="stylesheet" type="text/css"/>
- </head>
- <body>
- <s:form action="AnnotationAction" method="POST" validate="true">
- <tr>
- <td colspan="2">
- Login
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <s:actionerror />
- <s:fielderror />
- </td>
- </tr>
- <s:textfield name="username" label="Login name"/>
- <s:password name="password" label="Password"/>
- <s:submit value="Login" align="center"/>
- </s:form>
- </body>
- </html>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>Struts 2 Login Application!</title>
<link href="<s:url value="/css/main.css"/>" rel="stylesheet" type="text/css"/>
</head>
<body>
<s:form action="AnnotationAction" method="POST" validate="true">
<tr>
<td colspan="2">
Login
</td>
</tr>
<tr>
<td colspan="2">
<s:actionerror />
<s:fielderror />
</td>
</tr>
<s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
<s:submit value="Login" align="center"/>
</s:form>
</body>
</html>
代碼 <s:actionerror />
<s:fielderror />
用來顯示Action和字段校驗的錯誤
代碼 <s:form action="doLogin" method="POST">爲程序生成了HTML表單
代碼 <s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
生成了Login Name和Password字段.
提交按鈕由代碼<s:submit value="Login" align="center"/>生成
loginsuccess.jsp頁面顯示的是當用戶驗證成功後的登錄成功信息.這就是loginsuccess.jsp文件的代碼 :
- <html>
- <head>
- <title>Login Success</title>
- </head>
- <body>
- <p align="center"><font color="#000080" size="5">Login Successful</font></p>
- </body>
- </html>
<html>
<head>
<title>Login Success</title>
</head>
<body>
<p align="center"><font color="#000080" size="5">Login Successful</font></p>
</body>
</html>
2.創建Action類(使用Annotation來驗證表單輸入)
現在讓我們創建Action類來處理登錄請求。Struts2提供了一個基礎類ActionSupport來實現常用的接口。在我們的Action類中(AnnotationAction.java)我們繼承了ActionSupport 類並且引入了com.opensymphony.xwork2.validator.annotations包.
爲了驗證login程序我們可以在JSP或者Action類中添加JavaScript,但是struts2提供了另一種很簡單的方法來驗證你的表單字段,那就是在Action類中使用annotation。
有兩個annotation是必須的 :
1. @Validation註釋告訴struts2該類中的Action可能需要驗證。
2. @RequiredStringValidator註釋用來使文本輸入保留一個奇值。
剩下的都交由框架來處理了。
我們的"AnnotationAction"類存放在"webapps/struts2tutorial/WEB-INF/src/java/net/roseindia" 目錄。這就是AnnotationAction.java的代碼 :
- package net.roseindia;
- import com.opensymphony.xwork2.ActionSupport;
- import com.opensymphony.xwork2.validator.annotations.*;
- @Validation
- public class AnnotationAction extends ActionSupport {
- private String username = null;
- private String password = null;
- @RequiredStringValidator(message="Supply name")
- public String getUsername() {
- return username;
- }
- public void setUsername(String value) {
- username = value;
- }
- @RequiredStringValidator(message="Supply password")
- public String getPassword() {
- return password;
- }
- public void setPassword(String value) {
- password = value;
- }
- public String execute() throws Exception {
- System.out.println("Validating login");
- if(!getUsername().equals("Admin") || !getPassword().equals("Admin")){
- addActionError("Invalid user name or password! Please try again!");
- return ERROR;
- }
- else{
- return SUCCESS;
- }
- }
- }
package net.roseindia;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.validator.annotations.*;
@Validation
public class AnnotationAction extends ActionSupport {
private String username = null;
private String password = null;
@RequiredStringValidator(message="Supply name")
public String getUsername() {
return username;
}
public void setUsername(String value) {
username = value;
}
@RequiredStringValidator(message="Supply password")
public String getPassword() {
return password;
}
public void setPassword(String value) {
password = value;
}
public String execute() throws Exception {
System.out.println("Validating login");
if(!getUsername().equals("Admin") || !getPassword().equals("Admin")){
addActionError("Invalid user name or password! Please try again!");
return ERROR;
}
else{
return SUCCESS;
}
}
}
1).配置Action映射(在struts.xml中)
現在我們在struts.xml中創建Action映射. 這就是添加到struts.xml的代碼 :
- <action name="LoginAnnotation">
- <result>/pages/log-in.jsp</result>
- </action>
- <action name="AnnotationAction" class="net.roseindia.AnnotationAction">
- <result name="input">/pages/log-in.jsp</result>
- <result name="error">/pages/log-in.jsp</result>
- <result>/pages/loginsuccess.jsp</result>
- </action>
在上面的映射中,Action "LoginAnnotation"用來顯示登錄頁面,而"AnnotationAction"校驗了用戶使用的Action類(AnnotationAction.java)。
2). CSS文件(main.css)
該css文件用來增強login表單的顯示效果。main.css存放在"/webapps/struts2tutorial/css"目錄。
這就是main.css的代碼 :
- @CHARSET "UTF-8";
- body {
- font: 12px verdana, arial, helvetica, sans-serif;
- background-color:#FFFFFF;
- }
- table.wwFormTable {
- font: 12px verdana, arial, helvetica, sans-serif;
- border-width: 1px;
- border-color: #030;
- border-style: solid;
- color: #242;
- background-color: #ada;
- width: 30%;
- margin-left:35%;
- margin-right:35%;
- margin-top:15%;
- }
- table.wwFormTable th {
- }
- table.wwFormTable tr td {
- background-color: #dfd;
- margin: 5px;
- padding: 5px;
- }
- .tdLabel {
- /*
- border-width: 1px;
- border-color: #afa;
- border-style: solid;
- */
- font-weight: bold;
- align: top;
- }
- .label {
- }
- .errorMessage {
- color: red;
- font-size: 0.8em;
- }
- #headerDiv {
- border-style: solid;
- border-width: 1px 1px 0px;
- border-color: black;
- padding: 5px;
- background-color: #7a7;
- /* height: 22px; */
- height: 1.8em;
- /* margin-bottom: 12px; */
- }
- #buttonBar {
- border-width: 0px 1px 1px;
- border-style: solid;
- border-color: black;
- color: white;
- margin-bottom: 12px;
- background-color: #7a7;
- height: 1.6em;
- padding: 5px;
- }
- #appName {
- color: white;
- font-size: 1.8em;
- }
- #pageTitle {
- font-size: 1.4em;
- color: #dfd;
- clear: none;
- }
- #appName, #pageTitle {
- float: right;
- }
- #menuContainer {
- float: left;
- }
- #brandingContainer {
- float: right:
- text-align: right;
- }
@CHARSET "UTF-8";
body {
font: 12px verdana, arial, helvetica, sans-serif;
background-color:#FFFFFF;
}
table.wwFormTable {
font: 12px verdana, arial, helvetica, sans-serif;
border-width: 1px;
border-color: #030;
border-style: solid;
color: #242;
background-color: #ada;
width: 30%;
margin-left:35%;
margin-right:35%;
margin-top:15%;
}
table.wwFormTable th {
}
table.wwFormTable tr td {
background-color: #dfd;
margin: 5px;
padding: 5px;
}
.tdLabel {
/*
border-width: 1px;
border-color: #afa;
border-style: solid;
*/
font-weight: bold;
align: top;
}
.label {
}
.errorMessage {
color: red;
font-size: 0.8em;
}
#headerDiv {
border-style: solid;
border-width: 1px 1px 0px;
border-color: black;
padding: 5px;
background-color: #7a7;
/* height: 22px; */
height: 1.8em;
/* margin-bottom: 12px; */
}
#buttonBar {
border-width: 0px 1px 1px;
border-style: solid;
border-color: black;
color: white;
margin-bottom: 12px;
background-color: #7a7;
height: 1.6em;
padding: 5px;
}
#appName {
color: white;
font-size: 1.8em;
}
#pageTitle {
font-size: 1.4em;
color: #dfd;
clear: none;
}
#appName, #pageTitle {
float: right;
}
#menuContainer {
float: left;
}
#brandingContainer {
float: right:
text-align: right;
}
編譯程序 :
爲了編譯程序我們進入"/webapps/struts2tutorial/WEB-INF/src"目錄(用cmd)並鍵入ant命令。Ant工具會爲你編譯程序的。
在index.html中添加鏈接
最後我們在index.html中添加鏈接來訪問login表單
- <ul>
- <li><a href="roseindia/LoginAnnotation.action">Action Annotation Example</a></li>
- </ul>
<ul>
<li><a href="roseindia/LoginAnnotation.action">Action Annotation Example</a></li>
</ul>
輸出
如果不輸入任何字段就點擊Login按鈕,你會得到這樣的輸出頁面 :
如果你輸入了正確的信息並點擊Login按鈕,你會收到這樣的信息 :
如果你輸入了錯誤的信息並點擊Login按鈕,你會得到這樣的信息 :
如果你只輸入"Login name"字段而不輸入剩下的字段就點擊了Login按鈕,你會得到這樣的頁面 :