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");
}
}