一個簡單的登陸網頁設計(JSP+MySQL+Tomcat)
All Rights Reserved!
前臺login.html和後臺verifylogin.jsp兩個頁面組成:
login.html內容:
<html>
<head>
<title>登入</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ch-cn">
</head>
<body>
<!-- Form 用來提取使用者填入並提交的資訊-->
<form method="post" name="frmLogin" action="verifylogin.jsp">
<h1 align="center">使用者登入</h1><br>
<div align="center">使用者名稱：
<input type="text" name="txtUserName" value="Your name"
onfocus="if(this.value=='Your name')this.value='';"><br>密碼：
<input type="password" name="txtPassword" value="Your password"
onfocus="if(this.value=='Your password')this.value='';"><br>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="Reset" value="重置"><br>
</div></form></body>
</html>
verifylogin.jsp內容:
<%@ page language="java" contentType="text/html;charset=gb2312"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登入</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<div align=center>
<%
//獲取使用者名稱
String sUserName = request.getParameter ( "txtUserName" );
//獲取密碼
String sPasswd = request.getParameter ( "txtPassword" );
//登記JDBC驅動程式
Class.forName ( "org.gjt.mm.mysql.Driver" ).newInstance ( );
//連線引數與Access不同
String url = "jdbc:mysql://localhost/LearnJSP";
//建立連線
Connection connection = DriverManager.getConnection ( url, "root",
"011124" );
//SQL語句
String sql = "select * from userinfo where username='" + sUserName
+ "' and userpwd = '" + sPasswd + "'";
Statement stmt = connection.createStatement ( );
ResultSet rs = stmt.executeQuery ( sql ); //返回查詢結果
//如果記錄集非空，表明有匹配的使用者名稱和密碼，登陸成功
if ( rs.next ( ) )
{
out.println ( "登入成功！" );
} else
//否則登入失敗
{
out.println ( "使用者名稱不存在或密碼錯誤！" );
}
rs.close ( );
stmt.close ( );
connection.close ( );
%>
</body>
</html>
下面為客戶端新增程式碼驗證功能:
<html>
<head>
<title>登入</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ch-cn">
</head>
<body>
<!-- Form 用來提取使用者填入並提交的資訊-->
<form method="post" name="frmLogin" action="verifylogin.jsp">
<h1 align="center">使用者登入</h1><br>
<div align="center">使用者名稱：
<input type="text" name="txtUserName" value="Your name"
onfocus="if(this.value=='Your name')this.value='';"><br>密碼：
<input type="password" name="txtPassword" value="Your password"
onfocus="if(this.value=='Your password')this.value='';"><br>
<input type="submit" name="Submit" value="提交" onClick="validateLogin();" >
<input type="reset" name="Reset" value="重置"><br>
</div>
</form>
<!-- javaScript 函式 validateLogin(),用來驗證使用者名稱和密碼是否為空 -->
<script language="javaScript">
function validateLogin()
{
var sUserName = document.frmLogin.txtUserName.value;
var sPassword = document.frmLogin.txtPassword.value;
if( sUserName=="" )
{
alert("請輸入使用者名稱！");
return false;
}
if( sPassword=="" )
{
alert("請輸入密碼！");
return false;
}
}
</script>
</body>
</html>
為伺服器端新增程式碼驗證功能:
<%@ page language="java" contentType="text/html;charset=gb2312"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登入</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="zieckey,jsp">
<meta http-equiv="description" content="Test JSP using MySQL">
</head>
<body>
<div align=center>
<%
//獲取使用者名稱
String sUserName = request.getParameter ( "txtUserName" );
if ( sUserName == "" || sUserName == null || sUserName.length()>20 )
{
try
{
response.sendRedirect ( "login.html" );
} catch ( Exception e )
{
}
}
//獲取密碼
String sPasswd = request.getParameter ( "txtPassword" );
if ( sPasswd == "" || sPasswd == null || sPasswd.length()>20 )
{
try
{
response.sendRedirect ( "login.html" );
} catch ( Exception e )
{
}
}
//登記JDBC驅動程式
Class.forName ( "org.gjt.mm.mysql.Driver" ).newInstance ( );
//連線引數與Access不同
String url = "jdbc:mysql://localhost/LearnJSP";
//建立連線
Connection connection = DriverManager.getConnection ( url, "root",
"011124" );
//SQL語句
String sql = "select * from userinfo where username='" + sUserName
+ "' and userpwd = '" + sPasswd + "'";
Statement stmt = connection.createStatement ( );
ResultSet rs = stmt.executeQuery ( sql ); //返回查詢結果
//如果記錄集非空，表明有匹配的使用者名稱和密碼，登陸成功
if ( rs.next ( ) )
{
//登入成功後將sUserName設定為session變數的UserName
//這樣在後面就可以通過 session.getAttribute("UserName") 來獲取使用者名稱，
//同時這樣還可以作為使用者登入與否的判斷依據
session.setAttribute ( "UserName", sUserName );
out.print ( "登入成功！" );
out.print ( session.getAttribute ( "UserName" ) + " 歡迎您！" );
} else
//否則登入失敗
{
out.println ( "使用者名稱不存在或密碼錯誤！" );
}
rs.close ( );
stmt.close ( );
connection.close ( );
%>
</body>
</html>
資料庫中所有表的欄位長度的設計標準是應該是足夠用,但不浪費儲存空間.
我們可以發現,上面資料庫中欄位限制在20個字元以內,那麼程式中也應該作一個限制,
否則可能給網站出現嚴重的問題.
將上面原始碼修改如下:
.....
<input type="text" name="txtUserName" value="Your name"
size="20" maxlength="20"
onfocus="if(this.value=='Your name')this.value='';"><br>密碼：
<input type="password" name="txtPassword" value="Your password"
size="20" maxlength="20"
onfocus="if(this.value=='Your password')this.value='';"><br>
.....
.....
if ( sUserName == "" || sUserName == null || sUserName.length()>20 )
....
if ( sPasswd == "" || sPasswd == null || sPasswd.length()>20 )
......
這樣問題就徹底解決了.