网站地图
【www.lexiangwang.net--网页设计】
JSP网权威发布JSP网站制作： 一个简单的登陆网页设计，更多JSP网站制作相关信息请访问JSP网。【导语】考试资料网准备了《JSP网站制作： 一个简单的登陆网页设计》，供大家参考!
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 )
......
这样问题就彻底解决了.