jsp 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如何显示数据/如何分页
主要涉及到三个页面：
login.jsp
verify.jsp
welcome.jsp
业务逻辑：
login.jsp为登陆页面，用户需要输入用户名和密码，进入verify.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>
显示效果：
登陆界面如下：
登陆成功界面如下：
