jsp model1模式制作简易去哪儿网校招界面（四）

时间：2014-09-08 09:39:17 阅读：430 评论：0 收藏：0 [点我收藏+]

根据韩顺平老师讲解的内容熟悉model1模式。

model1模式是由许多相互独立的jsp文件和java Bean（不是必须的）组成，然后这些jsp从HttpRequest中获得所需数据，进行相应业务逻辑处理，然后将结果通过Response返回前端浏览器。

model1发展过程中分为两类：
1、model1（纯jsp技术，不带任何java Bean）

2、model1（jsp+java Bean）

model1模式的缺点：
1、表现层和业务逻辑层混合在一起---乱！！！
2、在开发过程中，不利于多人协同开发。
3、不利于后期维护。
model1模式的优点：
1、简单，开发速度比较快；
2、比较适合开发小的项目。

我们使用model1模式中的纯jsp技术开发一个简单的用户登录系统（暂时不加数据库）。
主要为了学习：
1、熟悉jsp页面间跳转；（下面两项以后研究）
2、jsp如何去操作数据库；

3、jsp如何显示数据/如何分页

主要涉及到三个页面：

verify.jsp

welcome.jsp

业务逻辑：

如果输入的用户名是dahuang，密码是123，则成功跳转到welcome.jsp页面，否则，则返回到login.jsp。

login.jsp页面代码如下：

<%@ page language="java" contentType="text/html; charset=gbk"
	pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>qunar recruitment</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	/*background-image: url(../../CampusApply/images/bg2.jpg);*/
	background-repeat: repeat-x;
}

body,td,th {
	font-size: 12px;
}

/* green button*/
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f),
		to(#4e7d0e));
	background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',
		endColorstr='#4e7d0e');
}

.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28),
		to(#436b0c));
	background: -moz-linear-gradient(top, #6b9d28, #436b0c);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',
		endColorstr='#436b0c');
}

.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e),
		to(#7db72f));
	background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',
		endColorstr='#7db72f');
}
-->
</style>

</head>
<body>
	<style>
.inhalt {
	position: absolute;
	margin: -280px 0px 0px -300px;
	top: 50%;
	left: 50%;
	text-align: left;
	padding: 0px;
	overflow: auto;
}
</style>

	<div style="width: 640px; height: 315px; border: 1px solid #ccc;"
		class="inhalt">
		<div
			style="height: 50px; font-family: 微软雅黑; font-weight: bold; font-size: 32px; text-align: center; margin-top: 10px; margin-bottom: 20px; color: #458B00;">
			<span>2015去哪儿校园招聘职位申请</span>
		</div>
		<div
			style="position: relative; margin: -20px 0px 0px -5px; width: 645px; height: 34px; background: url(images/header_repeat_x.png) left top repeat-x;">
			<h3>
				<div
					style="position: relative; float: left; margin-left: 280px; margin-top: 4px;">
					<font face="微软雅黑" size="2" color="#ffffff">登录界面</font>
				</div>
			</h3>
		</div>
		<form name="form1" action="verify.jsp" method="get">
			<ul>
				<li>用户名：<input id="txtUserName" name="txtUserName" type="text"
					maxlength="20" size="20" />
				</li>
				<br>
				<li> 密 码：<input id="txtPwd" name="txtPwd"
					type="password" maxlength="20" size="20" />
				</li>
			</ul>
			<div
				style="position: relative; float: left; margin-left: 30px; margin-top: 20px;">
				<input class="button green" type="submit" value="登 陆">
			</div>
			<div
				style="position: relative; float: left; margin-left: 80px; margin-top: 20px;">
				<input class="button green" type="reset" value="重置">
			</div>
		</form>
		<div
			style="float: right; margin-top: 3px; margin-right: 5px; overflow: hidden; zoom: 1;">
			<img align="right" alt="去哪儿logo" src="images/qunaer.jpg" width="180"
				height="125">
		</div>
	</div>
</body>
</html>

verify.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=gbk"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
</head>
<body>
	<%
		//接收用户名和密码，完成对用户名和密码的验证
		String username = request.getParameter("txtUserName");
		String password = request.getParameter("txtPwd");
		//简单验证
		if (username.equals("dahuang") && password.equals("123")) {
			//如果用户名和密码合法，则跳转至欢迎界面
			//如何将从login.jsp得到的数据传递给下一个页面：1、cookie，2、session,3、response.sendRedirect
			response.sendRedirect("welcome.jsp?user=" + username);
		} else {
			response.sendRedirect("login.jsp");
		}
	%>

</body>
</html>

welcome.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=gbk"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	/*background-image: url(../../CampusApply/images/bg2.jpg);*/
	background-repeat: repeat-x;
}

body,td,th {
	font-size: 12px;
}

/* green button*/
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f),
		to(#4e7d0e));
	background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',
		endColorstr='#4e7d0e');
}

.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28),
		to(#436b0c));
	background: -moz-linear-gradient(top, #6b9d28, #436b0c);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',
		endColorstr='#436b0c');
}

.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e),
		to(#7db72f));
	background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',
		endColorstr='#7db72f');
}
-->
</style>
</head>
<body>

	<style>
.inhalt {
	position: absolute;
	margin: -280px 0px 0px -300px;
	top: 50%;
	left: 50%;
	text-align: left;
	padding: 0px;
	overflow: auto;
}
</style>

	<div style="width: 640px; height: 315px; border: 1px solid #ccc;"
		class="inhalt">
		<div
			style="height: 50px; font-family: 微软雅黑; font-weight: bold; font-size: 32px; text-align: center; margin-top: 10px; margin-bottom: 20px; color: #458B00;">
			<span>2015去哪儿校园招聘职位申请</span>
		</div>
		<div
			style="position: relative; margin: -20px 0px 0px -5px; width: 645px; height: 34px; background: url(images/header_repeat_x.png) left top repeat-x;">
			<h3>
				<div
					style="position: relative; float: left; margin-left: 280px; margin-top: 4px;">
					<font face="微软雅黑" size="2" color="#ffffff">欢迎界面</font>
				</div>
			</h3>
		</div>
		<!--  传递一个字符串用 response.sendRedirect即可-->
		<%String str = new String(request.getParameter("user").getBytes("ISO-8859-1"),"gbk"); %> 
		<div
			style="position: relative; float: left; padding-left: 40px; padding-top: 40px; width: 555px; height: 100px;">
			<font face="微软雅黑" size="3" color="#458B00"> <%=str%>:<br>
				        恭喜登陆成功！！！ 
		</div>
		<div
			style="position: relative; float: left; margin-left: 30px; margin-top: 20px;">
			<input class="button green" type="button" value="退出"
				onclick="location='login.jsp'">
		</div>
	</div>
</body>
</html>

显示效果：

登陆界面如下：

bubuko.com,布布扣