java spring 使用GuideController實現信息的多步採集

使用GuideController控制器的目的

在開發中會出現，需要採集大量用戶信息來作爲數據分析，但是如果是一個單一的頁面讓用戶填寫十多行信息，會讓用戶體驗很差，採用嚮導控制器實現將衆多的信息分離就會使得用戶體驗好很多。
這也就是GuideController的使用目的之一。

項目結構

創建一個web項目，src下創建包Controller,以及User,分別對於控制器的和用戶的功能編寫。
在WEB-INF下lib包下創建配置文件applicationContext.xml用於Spring的配置。
然後需要一個主頁面index.jsp，需要一個結果頁面ok.jsp,還需要將原來一個頁面存放的信息拆分爲三個部分，onePage.jsp,twoPage.jsp,treePage.jsp。
這樣項目的結構就寫好了。

GuideController的編寫

package Controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.validation.BindException;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.AbstractWizardFormController;

import User.User;

public class GuideController extends AbstractWizardFormController {

	private String cancelView;	//取消時跳轉的頁面
	private String finishView;	//完成後跳轉的頁面
	
	public String getCancelView() 
	{
		return cancelView;
	}
	public void setCancelView(String cancelView) 
	{
		this.cancelView = cancelView;
	}
	public String getFinishView() 
	{
		return finishView;
	}
	public void setFinishView(String finishView)
	{
		this.finishView = finishView;
	}
	
	protected ModelAndView processFinish(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2,
			BindException arg3) throws Exception
	{
		User user=(User)arg2;
		return new ModelAndView(this.getFinishView(),"user",user);
	}
	
	protected ModelAndView processCannel(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2,
			BindException arg3) throws Exception
	{
		return new ModelAndView(this.getCancelView());
	}

}

定義兩個私有變量cancelView ，finishView用於將分頁填寫功能中的返回和下一步。

User的編寫

package User;

public class User
{
		private String userName;//用戶名
		private String pwd;// 密碼
		private String pwd1;// 確認密碼
		
		private String qq;// qq號碼
		private String mail;//電子郵箱
		private String tel;//電話
		private String addr;//地址
		
		private String name;//姓名
		private String age;//年齡
		private String sex;//性別
		private String high;//身高
		private String weight;//體重
		
		public String getPwd1() {
			return pwd1;
		}
		public void setPwd1(String pwd1) {
			this.pwd1 = pwd1;
		}

		public String getUserName() {
			return userName;
		}
		public void setUserName(String userName) {
			this.userName = userName;
		}
		public String getPwd() {
			return pwd;
		}
		public void setPwd(String pwd) {
			this.pwd = pwd;
		}
		public String getQq() {
			return qq;
		}
		public void setQq(String qq) {
			this.qq = qq;
		}
		public String getMail() {
			return mail;
		}
		public void setMail(String mail) {
			this.mail = mail;
		}
		public String getTel() {
			return tel;
		}
		public void setTel(String tel) {
			this.tel = tel;
		}
		public String getAddr() {
			return addr;
		}
		public void setAddr(String addr) {
			this.addr = addr;
		}
		public String getName() {
			return name;
		}
		public void setName(String name) {
			this.name = name;
		}
		public String getAge() {
			return age;
		}
		public void setAge(String age) {
			this.age = age;
		}
		public String getSex() {
			return sex;
		}
		public void setSex(String sex) {
			this.sex = sex;
		}
		public String getHigh() {
			return high;
		}
		public void setHigh(String high) {
			this.high = high;
		}
		public String getWeight() {
			return weight;
		}
		public void setWeight(String weight) {
			this.weight = weight;
		}
}

就是一些變量的set,get方法。

applicationContext.xml的編寫

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">

	<!-- 定義視圖分解器 -->
	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">

		<property name="viewClass">
			<value>org.springframework.web.servlet.view.InternalResourceView
			</value>
		</property>

		<!-- 設置前綴，即視圖所在的路徑 -->
		<property name="prefix" value="/" />
		<!-- 設置後綴，即視圖的擴展名 -->
		<property name="suffix" value=".jsp" />
	</bean>
	<bean name="user" class="User.User" />

	<bean name="/userReg.do" class="Controller.GuideController">
		<!-- 封裝表單的對象 -->
		<property name="commandClass" value="User.User" />
		<!-- 嚮導頁面 -->
		<property name="pages" value="onePage,twoPage,threePage" />
		<!-- 取消後轉向的視圖 -->
		<property name="cancelView" value="index" />
		<!-- 嚮導完成後轉向的視圖 -->
		<property name="finishView" value="ok" />
	</bean>
</beans>

在Spring MVC中都是將控制器如表單控制器，文件名映射控制器，參數映射控制器等作爲視圖View然後由前端控制器也就是調度器（web.xml文件中的）,來渲染爲jsp,html.php等顯示出來。
這裏也是一樣，將GuideController封裝爲userReg.do視圖，讓視圖解析器去解析爲所需要的模型。

web.xml的編寫

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	
	<!-- spring編碼過濾器 -->	
	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<!-- 編碼方式 -->
		<init-param>
			<param-name>encoding</param-name>
			<param-value>gbk</param-value>
		</init-param>
		<!-- 強行進行編碼轉換 -->
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>
	<!-- 過濾的url -->
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>*.do</url-pattern>
	</filter-mapping>
	
	
	<servlet>
		<servlet-name>dispatcherServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/applicationContext.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>dispatcherServlet</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	<login-config>
		<auth-method>BASIC</auth-method>
	</login-config>
</web-app>

就配置了字符過濾器和前端控制器。

index.jsp主頁面的編寫

<%@page contentType="text/html" pageEncoding="GBK"%>
<html>
<head>
<title></title>
<style type="text/css">
<!--
.STYLE1 {
	font-size: 12pt;
	color: #2B6A1B;
	font-weight: bold;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"></head>
<body>
<table align="center" width="1003" height="620">
  <tr>
    <td>
		<div style="position:relative; top:-30px; left:370px">
			<a href="userReg.do" class="STYLE1">進入用戶註冊頁面 >></a></div>
	</td>
  </tr>
</table>
</body>
</html>

沒啥好說的。

ok.jsp結果頁面

<%@page contentType="text/html" pageEncoding="GBK"%>
<%@page import="User.*" %> 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"><style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>
<body>
<table width="778" height="668" align="center" background="images/bj4.jpg">
  <tr>
    <td>
		<table style="position:relative; top:65px; left:60px">
		<% 
		User user = (User)request.getAttribute("user");
		%>
			<tr>
				<td height="22" colspan="2"><strong>登錄信息</strong></td>
			</tr>
			<tr>
				<td height="22">登錄賬號：</td>
				<td height="22"><%= user.getUserName() %></td>
			</tr>
			<tr>
				<td height="22">登錄密碼：</td>
				<td height="22"><%= user.getPwd() %></td>
			</tr>
			<tr>
				<td height="22" colspan="2"><strong>基本信息</strong></td>
			</tr>
			<tr>
				<td height="22">姓名：</td>
				<td height="22"><%= user.getName() %></td>
			</tr>
			<tr>
				<td height="22">年齡：</td>
				<td height="22"><%= user.getAge() %></td>
			</tr>
			<tr>
				<td height="22">性別：</td>
				<td height="22"><%= user.getSex() %></td>
			</tr>
			<tr>
				<td height="22">身高：</td>
				<td height="22"><%= user.getHigh() %></td>
			</tr>
			<tr>
				<td height="22">體重：</td>
				<td height="22"><%= user.getWeight() %></td>
			</tr>
			<tr>
				<td height="22" colspan="2"><strong>聯繫方式</strong></td>
			</tr>
			<tr>
				<td height="22">QQ號碼：</td>
				<td height="22"><%= user.getQq() %></td>
			</tr>
			<tr>
				<td height="22">電子郵箱：</td>
				<td height="22"><%= user.getMail() %></td>
			</tr>
			<tr>
				<td height="22">聯繫電話：</td>
				<td height="22"><%= user.getTel() %></td>
			</tr>
			<tr>
				<td height="22">通信地址：</td>
				<td height="22"><%= user.getAddr() %></td>
			</tr>
	  </table>
	</td>
  </tr>
</table>
</body>
</html>

這裏就是獲取user的屬性。

onePage.jsp的編寫

<%@page contentType="text/html" pageEncoding="GBK"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"><style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>
<body>
<form:form>
<table width="772" height="666" align="center">
  <tr>
    <td><table style="position:relative; top:-30px; left:150px" border="1" cellpadding="1" cellspacing="1">
        <tr>
          <td width="80" height="23">用戶名：</td>
          <td width="311" height="23">&nbsp;
            <form:input path="userName"/></td>
        </tr>
        <tr>
          <td height="23">密碼：</td>
          <td height="23">&nbsp;
            <form:password  path="pwd"/></td>
        </tr>
        <tr>
          <td height="23">確認密碼：</td>
          <td height="23">&nbsp;
            <form:password path="pwd1"/></td>
        </tr>
		<tr>
          <td height="23" colspan="2" align="center" valign="middle">
          <input type="submit" name="_cancel" value="返回" >&nbsp;&nbsp;
          <input type="submit" name="_target1" value="下一步" /></td>
        </tr>
      </table></td>
  </tr>
</table>
</form:form>
</body>
</html>

twoPage.jsp的編寫

<%@page contentType="text/html" pageEncoding="GBK"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<title>第二步</title>
</head>
<body>
<form:form>
<table width="778" height="668" align="center">
  <tr><td>
	<table border="1" cellpadding="1" cellspacing="1" style="position:relative; top:-10px; left:150px">
		<tr>
			<td width="60" height="23">姓名：</td>
			<td width="379" height="23">&nbsp;<form:input path="name"/></td>
		</tr>
		<tr>
			<td height="23">年齡：</td>
			<td height="23">&nbsp;<form:input path="age"/></td>
		</tr>
		<tr>
			<td height="23">性別：</td>
			<td height="23">&nbsp;<form:input path="sex"/></td>
		</tr>
		<tr>
			<td height="23">身高：</td>
			<td height="23">&nbsp;<form:input path="high"/></td>
		</tr>
		<tr>
			<td height="23">體重：</td>
			<td height="23">&nbsp;<form:input path="weight"/></td>
		</tr>
		<tr>
			<td height="23" colspan="2" align="center">
			<input type="submit" name="_target0" value="上一步">&nbsp;&nbsp;&nbsp;
			<input type="submit" name="_target2" value="下一步">
			</td>
		</tr>
	</table>
</td></tr></table>
</form:form>
</body>
</html>

treePage.jsp的編寫

<%@page contentType="text/html" pageEncoding="GBK"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"><style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>
<body>
<form:form>
  <table width="778" height="668" align="center">
    <tr>
      <td><table border="1" cellpadding="1" cellspacing="1" style="position:relative; top:-30px; left:150px">
          <tr>
            <td width="77" height="23">QQ號碼：</td>
			<td width="375" height="23">&nbsp;<form:input path="qq"/></td>
          </tr>
		  <tr>
            <td height="23">電子郵箱：</td>
			<td height="23">&nbsp;<form:input path="mail"/></td>
          </tr>
		  <tr>
            <td height="23">電話號碼：</td>
			<td height="23">&nbsp;<form:input path="tel"/></td>
          </tr>
		  <tr>
            <td height="23">通信地址：</td>
			<td height="23">&nbsp;<form:input path="addr"/></td>
          </tr>
		  <tr>
            <td height="23" colspan="2" align="center"> 
            <input type="submit" name="_target1" value="上一步" >&nbsp;&nbsp;
  			<input type="submit" name="_finish" value="確定" >
  			</td>
          </tr>
      </table></td>
    </tr>
  </table>
</form:form>
</body>
</html>

效果一覽