首先讲一下这个登录界面可实现的功能:
1.基本界面有了;
2.具有容错性,如果什么都不输入,直接点确定,会提示错误;
3.连接了数据库,建了表,可以实现注册,以及登录;
4.能够正常登陆进去;
5.如果登录的账号密码不正确,会提示重新登录。
下面讲讲具体怎么实现?
首先我们要理清思路:
1.登录界面输入用户的ID和口令;
2.然后点击确定按钮,我们先要在客户端对文本框中的东西进行验证;
3.如果格式正确,则提交到控制器进行验证,如果不存在这个用户或者密码不正确都会提示重新登录,验证正确的话,则进入登录成功的界面,否则进入登录失败的界面;
4.如果文本框的内容格式不正确,那么光标会自动停在出错的文本框里。
那么第一步,我们首先创建数据库:
在数据库应用软件中创建我们需要的数据库,并且建一个我们需要用的表。
如下图所示:
第二步,创建登录界面:
先用HTML的知识写出了基本显示,然后在提交表单之前,会先用javascript写的方法对表单元素进行验证,使其具有正确的格式;当格式正确时,才会把表单元素里的标签提交到下一个页面里。
代码如下:
<%@ page contentType="text/html; charset=gb2312"%> <script language="JavaScript"> function isValidate(form){ //得到用户输入的用户名和密码 userid=form.userid.value; userpass=form.userpass.value; //接下来先验证用户名 //如果用户名的长度小于六 if(userid.length<6){ alert("用户名的长度小于六。"); form.userid.focus(); return false; } //如果用户名的长度大于8 if(userid.length>8){ alert("用户名的长度大于八。"); form.userid.focus(); return false; } //接下来验证口令 //如果密码的长度小于六 if(userpass.length<6){ alert("密码的长度小于六。"); form.userpass.focus(); return false; } //如果密码的长度大于8 if(userpass.length>8){ alert("密码的长度大于八。"); form.userpass.focus(); return false; } //密码与用户名不能相等 if(userpass==username){ alert("密码与用户名不能相等"); form.userpass.focus; return false; } } </script> <html> <head> <title>登录界面</title> </head> <body> <h2 align="center">登录界面</h2> <form name=form1 action="login" method="post" onsubmit="return isValidate(form1)"> <table align="center"> <tr> <td>用户ID:</td> <td><input type="text" name="userid" >6~8位</td> </tr> <tr> <td>口令:</td> <td><input type="password" name="userpass" >6~8位,且不能与用户ID相同</td> </tr> <tr> <td><input type="reset" value="重置"></td> <td><input type="submit" value="确定"></td> </tr> </table> </form> <table align="center"> <tr> <td><input type="button" value="点击注册用户" onclick="window.location.href='register.jsp'" /></td> </tr> </table> </body> </html>
第三步:编写连接数据库,以及对表单元素的验证。
由于JSP主要用于显示,所以我又再写了一个servlet用于对输入的信息进行处理;
首先写一个方法,从数据库中查找登录界面中输入的用户名的密码,如果有,则返回正确的密码,
否则 ,返回null;
然后重写doget方法,对登录进行响应,如果输入的密码与从数据库中返回的密码相同,那么转到登录成功后的界面,如果登录失败,那么则提示用户重新登录。
具体代码如下:
package servlets; import java.io.*; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import java.util.ArrayList; import javax.servlet.*; import javax.servlet.http.*; import bean.*; public class LoginServlet extends HttpServlet { //该方法用户验证用户名和密码 public int check(String userid,String userpass) { String URL="jdbc:mysql://127.0.0.1:3306/bookstore"; String NAME="root"; String PASS="*********"; String SQL="select userpass from userinfo where userid='"+userid+"'"; try { //加载驱动 Class.forName("com.mysql.jdbc.Driver"); //连接对象 Connection con=DriverManager.getConnection(URL, NAME, PASS); //语句对象 Statement stmt=con.createStatement(); ResultSet rs=stmt.executeQuery(SQL); //得到该用户名的密码 String tmpPass=""; if(rs.next()) { tmpPass=rs.getString(1); } //关闭对象,释放资源 rs.close(); stmt.close(); con.close(); //判断密码是否正确 if(tmpPass.equals(userpass)) { return 1; } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return 0; } /* (non-Javadoc) * @see javax.servlet.http.HttpServlet#service(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse) */ @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //获取用户的用户名和口令 request.setCharacterEncoding("utf-8"); String userid=request.getParameter("userid"); String userpass=request.getParameter("userpass"); int result=check(userid,userpass); //要转向的文件 String forward; //如果登录成功,就把用户名写入session中,并且转向success.jsp, //否则转向failure.jsp if(result==1){ forward="manager.jsp"; } else forward="login_failure.jsp"; RequestDispatcher dispatcher=request.getRequestDispatcher(forward); //完成跳转 dispatcher.forward(request,response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request,response); } }
至此,登录这个功能也就算是实现了。
下面是结果截图:
输入的格式不正确时:
出错的情况下:
登录成功时: