实验二jsp登录、验证页面的制作
一、目的
1、掌握jsp登录页面的几种常用处理技术
2、掌握jsp验证码的生成技术
3、掌握js验证页面的制作
二、内容
请参考附加材料
三、步骤
略,请对照附加材料练习
四、问题
1、登录时,如果后台在验证时发生问题,该如何处理?
2、如果需要记录用户登录日记,你将采用何种技术?
3、如何生成弹出的用户登录界面?
4、验证码的作用是什么?简要说明验证码生成的一般步骤?
5、页面验证一般在哪一端进行?何种情形下验证需要在服务器上进行?
附件1:jsp登录、验证页面技术
一、静态登录界面的设计
首先是用户登录页面login.htm,代码如下:
系统登录 |
将登录用户输入的信息提交到login.jsp页面进行处理,这里为了方便,不执行数据库的访问操作,直接使用s2098作为登录用户名和密码,但在实际中是要从数据库中读取的,该jsp页面代码实现如下:
<%@ page contentType="text/html;charset=GB2312"%>
<%
if(request.getParameter("uid").equals("s2098")&&request.getParameter("upwd").equals("s2098")) {
session.setAttribute("login","ok");
session.setMaxInactiveInterval(-1);
%>
<%
}else{
out.println("用户名或密码输入错误!");
}
%>
如果登录成功,则设定login的值为ok,提交到下一步验证页面,则进入main.jsp页面,否则,如果输入的用户名和密码不合法就打印错误信息,main.jsp页面代码如下:
<%@ page contentType="text/html;charset=GB2312"%>
<%@ include file="checkvalid.jsp" %>
~WELCOME TO MY HOMEPAGE~
<%@ page contentType="text/html;charset=GB2312"%>
<%@ include file="checkvalid.jsp" %>
~WELCOME TO MY HOMEPAGE~
这个页面使用<% @ include file="checkvalid.jsp" %>包含了一个jsp页面checkvalid.jsp为了验证输入信息的合法性:
<%
if(session.getAttribute("login")==null||!session.getAttribute("login").equals("ok")){ response.sendRedirect("login.htm");
}
%>
如果输入信息有误,则回到登录页面,重新输入登录信息。
二、后台数据库验证技术
包括前台login.html和后台verifylogin.jsp两个页面组成:
login.html内容:
verifylogin.jsp内容:
<%@ page language="java" contentType="text/html;charset=gb2312"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<%
//获取用户名
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 ( );
%>
下面为客户端添加代码验证功能:
function validateLogin()
{
var sUserName = document.frmLogin.txtUserName.value;
var sPassword = document.frmLogin.txtPassword.value;
if( sUserName=="" )
{
alert("请输入用户名!");
return false;
}
if( sPassword=="" )
{
alert("请输入密码!");
return false;
}
}
为服务器端添加代码验证功能:
<%@ page language="java" contentType="text/html;charset=gb2312" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<%
//获取用户名
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 ( );
%>
数据库中所有表的字段长度的设计标准是应该是足够用,但不浪费存储空间.
可以发现,上面数据库中字段限制在20个字符以内,那么程序中也应该作一个限制, 否则可能给网站出现严重的问题.
将上面源码修改如下:
.....
size="20" maxlength="20"
onfocus="if(this.value=='Y our name')this.value='';">
密码:
size="20" maxlength="20"
onfocus="if(this.value=='Y our password')this.value='';">
.....
.....
if ( sUserName == "" || sUserName == null || sUserName.length()>20 )
....
if ( sPasswd == "" || sPasswd == null || sPasswd.length()>20 )
......
三、javabean验证技术
login.html页面的实现代码如下:
在login.html的请求的页面login.jsp中输入以下代码:
<%@ include file="../includebean.jsp" %>
<%@ page import="java.io.*" %>
<% request.setCharacterEncoding("GBK");%>
<%
if( employeeMgr.logIn(request.getParameter("emp_id"),request.getParameter("password"))== false){
out.print("登录失败!");
%>
<% }
else{
session.setAttribute("userid",request.getParameter("emp_id"));
%>
<%
}
includebean.jsp文件的内容如下:
<%@ page contentType="text/html; charset=GBK" %>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.dbmgr.*" %>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.basic.*" %>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.degreemgr.*" %>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.departmentmgr.*" %>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.employeemgr.*" %>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.resultmgr.*" %>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.util.*"%>
<%@ page import="https://www.doczj.com/doc/882019953.html,soft.attendance.workinstmgr.*"%>
<%@ page import="java.util.*" %>
<%
degreeMgr.create(); %>
<% departmentMgr.create(); %>
<% employeeMgr.create(); %>
<% resultMgr.create(); %>
<% workinstMgr.create(); %>
说明:除了上述常用的技术外,还有许多的技术,譬如使用读取xml进行验证,加密解密验证等等。用户登录验证的技术五花八门,希望在平时的学习过程将这些技术记录下来,以到需要时可以参考。
附件2:JSP彩色验证码
生成有4个随机数字和杂乱背景的图片,数字和背景颜色会改变,服务器端刷新(用history.go(-1)也会变)
产生验证码图片的文件image.jsp
<%@ page contentType="image/jpeg" import="java.awt.*,
java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
Color getRandColor(int fc,int bc){//给定范围获得随机颜色
Random random = new Random();
if(fc>255) fc=255;
if(bc>255) bc=255;
int r=fc+random.nextInt(bc-fc);
int g=fc+random.nextInt(bc-fc);
int b=fc+random.nextInt(bc-fc);
return new Color(r,g,b);
}
%>
<%
//设置页面不缓存
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
// 在内存中创建图象
int width=60, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 获取图形上下文
Graphics g = image.getGraphics();
//生成随机类
Random random = new Random();
// 设定背景色
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);
//设定字体
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
//画边框
//g.setColor(new Color());
//g.drawRect(0,0,width-1,height-1);
// 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++)
{
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
// 取随机产生的认证码(4位数字)
String sRand="";
for (int i=0;i<4;i++){
String rand=String.valueOf(random.nextInt(10));
sRand+=rand;
// 将认证码显示到图象中
g.setColor(new
Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); //调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成
g.drawString(rand,13*i+6,16);
}
// 将认证码存入SESSION
session.setAttribute("rand",sRand);
// 图象生效
g.dispose();
// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
%>
使用验证码图片的文件a.jsp
<%@ page contentType="text/html;charset=gb2312" %>