电子相册系统（四）用户登录

1. 功能说明

1)        当用户未登录时，系统显示用户需要登录的界面。主要显示用户名的输入框和密码输入框。或者用户也可以点击注册进入在线注册。如图所示：

2)        当用户登录后，那么显示的信息就要发生改，要显示的信息是“XX已经登录成功，下面是您的相册”，并且右上角要显示“增加相片”。如图所示：

2. 构思实现

按照普通的做法，我们可能要准备两个xx.html的页面，来分别显示不同的显示的页面。但是这样的话，网站的整体性能就不会很好，也没有实现异步调用的功能。在这个系统中，我们主要用到了Ajax的技术来实现异步的实现，所以我们只要一个xx.html的页面，让用户从登录到进入登录后的页面，中间不会有跳转的感觉。这样的话，我们就需要借助div的标签来调制。也就是说，通过div的id值来后台控制是否实现显示。

3. 具体实现

1)        在html页面中分别设计两个<div/>,其中一个<div/>的id为“noLogin”，另一个id为” hasLogin”。

<!-- 没有登录显示下面div元素 -->
<div id="noLogin">
<!-- 这里是注册/登录的表格 -->
<table width="100%" border="0" cellspacing="0">
<tr>
	<td width="38%">用户名：
		<input id="user" type="text" name="user" /></td>
	<td width="38%">密  码：
		<input id="pass" type="text" name="pass" /></td>
	<td width="24%">我还没有注册，请让我<a href="javascript:void(0);"
		οnclick="changeRegist();">注册</a></td>
</tr>
<tr>
	<td colspan="5">
	<div id="loginDiv" align="center">
	<input id="login" type="button" οnclick="proLogin();" value="登录" />
	<input id="resetLogin" type="button" οnclick="reset();" value="重设" />
	</div>
	<div id="registDiv" align="center" style="display:none">
	<a href="javascript:void(0)" οnclick="validateName();">验证用户名是否可用</a>
	<input id="regist" type="button" οnclick="regist();" value="注册" />
	<input id="resetRegist" type="button" οnclick="reset();" value="重设" />
	</div>
	</td>
</tr>
</table>
</div>	
<!-- 已经登录显示下面div元素 -->
<div id="hasLogin" align="center" style="display:none">
	<!-- 您已经登录成功，下面是您的相册，您也可以 -->
	<div align="right"><a href="javascript:void(0);" οnclick="openUpload();">增加相片</a></div>
	         
</div>

2)        写个业务逻辑的类，如登录的类：ProLoginServlet.java。这个类需要继承HttpServlet.这个主要上服务器访问时的响应事件处理。这里我们就要去实现继承类的service的方法，通过这个方法来处理登录后客户端需要显示的信息。

 @WebServlet(urlPatterns="/proLogin")
public class ProLoginServlet extends BaseServlet
{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		String name = request.getParameter("user");
		String pass = request.getParameter("pass");
		response.setContentType("text/javascript;charset=gbk");
		//获取输出流
		PrintWriter out = response.getWriter();
		try
		{
			// 清空id为user、pass输入框的内容
						out.println("$('#user,#pass').val('');");
						if (name != null && pass != null && as.userLogin(name , pass))
						{
							HttpSession session = request.getSession(true);
							session.setAttribute("curUser" , name);
							out.println("alert('您已经登录成功！')");
							out.println("$('#noLogin').hide(500)");
							out.println("$('#hasLogin').show(500)");
							out.println("$('#change1').show(500)");
							// 调用获取相片列表的方法
							out.println("onLoadHandler();");
						}
						else
						{
							out.println("alert('您输入的用户名、密码不符，请重试！')");
						}
		}
		catch (AlbumException e)
		{
			out.println("alert('" + e.getMessage() + "请更新用户名、密码重试！')");
		}
	}
	
}

3)   这里可能有些读者对于@WebServlet(urlPatterns="/proLogin")

这句话有点迷惑。这个调用的走访是在用户添加信息后按登录按钮，那么就会去调用javaScript中的proLogin()的方法，调用这个方法就会调用后台的ProLoginServlet类了。

// 处理用户登录的函数
function proLogin()
{
	// 获取user、pass两个文本框的值
	var user = $.trim($("#user").val());
	var pass = $.trim($("#pass").val());
	if (user == null || user == "" 
		|| pass == null|| pass =="")
	{
		alert("必须先输入用户名和密码才能登录");
		return false;
	}
	else
	{
		// 向proLogin发送异步、POST请求
		$.post("proLogin", $('#user,#pass').serializeArray()
			, null , "script");
	}
}