Jsp账户登录的实现

1.设计教师与学生不同登录界面

2.验证码随机生成

3.提交后分别转向教师页面和学生页面进行判断用户名和密码的正确性

如图所示的页面结构：

首先，登录做好页面的背景图片：

然后开始编程，我在这里设定的用户名和密码都是特定的，比较简单的方法：

<%@ page contentType="text/html;charset=gbk"%>
<%@ page language="java" import="java.sql.*" errorPage=""%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户登录</title>

<style type="text/css">
table {
	background-image: url(1.png);
	width: 443px;
	height: 317px;
	margin: 0 auto;
}
</style>

<script language="javascript">
	function loadimage() {
		document.getElementById("randImage").src = "image.jsp?" + Math.random();
	}
</script>
</head>

<body>
	<table border="0" cellpadding="0" cellspacing="0">

		<form action="validate.jsp" method="post" name="loginForm">
			<tr height="70">
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td width="118" height="25" valign="middle" align="left"><input
					type="text" name="id" size="15" ></td>
			</tr>

			<tr>
				<td>&nbsp;</td>
				<td width="118" height="25" valign="middle" align="left"><input
					type="password" name="password" size="15"></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td width="118" height="25" valign="middle" align="left"><input
					type="text" name="rand" size="15"></td>
			</tr>
			<tr>
				<td width="138" valign="middle" align="right"><img
					alt="code..." name="randImage" id="randImage" src="image.jsp"
					width="60" height="20" border="1" align="absmiddle">&nbsp;&nbsp;</td>
				<td height="36" align="left" valign="middle"><a
					href="javascript:loadimage();"><font class=pt95>看不清点我</font></a></td>
			</tr>
			<tr>
				<td width="118" height="22" valign="middle" align="right"><input
					type="radio" name="radio" value="1" />部门 <input type="radio"
					name="radio" value="2" />教师 &nbsp;</td>
				<td width="118" height="22" valign="middle" align="left"><input
					type="radio" name="radio" value="3" />学生 <input type="radio"
					name="radio" value="4" />访客</td>
			</tr>
			<tr>
				<td height="36" align="right" valign="middle"><input
					type="submit" name="login" value="登录">&nbsp;&nbsp;</td>
				<td height="36" align="left" valign="middle"><input
					type="reset" value="重 置"></td>
			</tr>
		</form>
	</table>
</body>
</html>

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(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);
	}
	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());
%>

validate.jsp页面：验证教师和学生不同用户登录时的用户名和密码以及验证码的正确性

<%@ page contentType="text/html; charset=utf-8" language="java"
	import="java.sql.*" errorPage=""%>
<%
	String rand = (String) session.getAttribute("rand");
	String input = request.getParameter("rand");
	String login = request.getParameter("radio");
	String name = request.getParameter("id");
	String password = request.getParameter("password");
	if (login != null) {
		if (login.equals("1")) {
			out.print("部门");
		}
		if (login.equals("2")) {
			if (name.equals("teacher")) {
				if (password.equals("teacher")) {
					if (rand.equals(input)) {
						out.print("验证码通过！");
						out.print("教师登录");
					} else {
						out.print("<script>alert('请输入正确的验证码！');location.href='login.jsp';</script>");
					}
				} else {
					out.print("<script>alert('请输入正确的密码！');location.href='login.jsp';</script>");
				}
			}else{
				out.print("<script>alert('请输入正确的用户！');location.href='login.jsp';</script>");
			}
		}
		if (login.equals("3")) {
			if (name.equals("yeting")) {
				if (password.equals("yeting")) {
					if (rand.equals(input)) {
						out.print("验证码通过！");
						out.print("学生登录");
					} else {
						out.print("<script>alert('请输入正确的验证码！');location.href='login.jsp';</script>");
					}
				} else {
					out.print("<script>alert('请输入正确的密码！');location.href='login.jsp';</script>");
				}
			}else{
				out.print("<script>alert('请输入正确的用户！');location.href='login.jsp';</script>");
			}
		}
		if (login.equals("4")) {
			out.print("访客");
		}
	}
%>

完成结果：

代码上传至附件中。

Jsp账户登录的实现

猜你喜欢