本章我们将会开发基于Struts2框架的登录程序.我们当前的程序不能通过数据库验证用户.相反我们是通过硬编码的形式在Action中验证的(用户名: Admin 密码: 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="doLogin" method="POST"> <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"/>生成
当程序执行时产生了如下的HTML代码 :
<html> <head> <title>Struts 2 Login Application!</title> <link href="/Struts2tutorial/css/main.css" rel="stylesheet" type="text/css"/> </head> <body> <form id="doLogin" name="doLogin" οnsubmit="return true;" action="/Struts2tutorial/roseindia/doLogin.action" method="POST"> <table class="wwFormTable"> <tr> <td colspan="2"> Login </td> </tr> <tr> <td class="tdLabel"><label for="doLogin_username" class="label"> Login name:</label> </td> <td><input type="text" name="username" value="" id="doLogin_username"/> </td> </tr> <tr> <td class="tdLabel"><label for="doLogin_password" class="label"> Password:</label></td> <td><input type="password" name="password" id="doLogin_password"/> </td> </tr> <tr> <td colspan="2"><div align="center"><input type="submit" id="doLogin_0" value="Login"/> </div></td> </tr> </table></form> </body> </html> |
通过观察上面生成的HTML代码,你会发现Struts2自动生成HTML元素的form, html table, label.这是Struts2与Struts1相比的另一个杰出的特性.
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> |
2. 创建Action类
现在让我们创建Action类来处理登录请求.在Struts2中不一定非要实现Action接口,任何含有execute()方法的POJO都可以当作Action使用.Struts2提供了一个基础的ActionSupport类来实现常用的接口.在我们的Action类中(Login.java)我们实现了ActionSupport接口.我们的"Login.java"存放在webapps/Struts2tutorial/WEB-INF/src/java/net/roseindia" 这就是Login.java这个Action类的代码 :
package net.roseindia; import com.opensymphony.xwork2.ActionSupport; import java.util.Date;
/** * <p> Validate a user login. </p> */ public class Login extends ActionSupport {
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; } }
// ---- Username property ----
/** * <p>Field to store User username.</p> * <p/> */ private String username = null;
/** * <p>Provide User username.</p> * * @return Returns the User username. */ public String getUsername() { return username; }
/** * <p>Store new User username</p> * * @param value The username to set. */ public void setUsername(String value) { username = value; }
// ---- Username property ----
/** * <p>Field to store User password.</p> * <p/> */ private String password = null;
/** * <p>Provide User password.</p> * * @return Returns the User password. */ public String getPassword() { return password; }
/** * <p>Store new User password</p> * * @param value The password to set. */ public void setPassword(String value) { password = value; }
} |
3. 配置Action映射(在struts.xml文件中)
现在我们将要在struts.xml中创建Action映射.这就是添加到struts.xml中的代码 :
<action name="showLogin"> <result>/pages/login.jsp</result> </action>
<action name="doLogin" class="net.roseindia.Login"> <result name="input">/pages/login.jsp</result> <result name="error">/pages/login.jsp</result> <result>/pages/loginsuccess.jsp</result> </action> |
在上面的映射中,Action "showLogin"用来显示登录页面,"doLogin"则校验了用户使用的Action类(Login.java).
4. CSS文件(main.css)
这个css文件用来增强login表单的显示效果.main.css文件存放在"/webapps/Struts2tutorial/css" directory.
这就是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; } |
在下一章中我们将会学习如何在login程序中添加验证