首先讲一下这个登录界面可实现的功能:
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);
}
}
至此,登录这个功能也就算是实现了。
下面是结果截图:
输入的格式不正确时:
出错的情况下:
登录成功时: