首页 > 代码库 > jsp model1模式 制作简易去哪儿网校招界面(四)
jsp model1模式 制作简易去哪儿网校招界面(四)
根据韩顺平老师讲解的内容熟悉model1模式。
1、model1(纯jsp技术,不带任何java Bean)
1、表现层和业务逻辑层混合在一起---乱!!!
2、在开发过程中,不利于多人协同开发。
3、不利于后期维护。
model1模式的优点:
1、简单,开发速度比较快;
2、比较适合开发小的项目。
我们使用model1模式中的纯jsp技术开发一个简单的用户登录系统(暂时不加数据库)。
主要为了学习:
1、熟悉jsp页面间跳转;(下面两项以后研究)
2、jsp如何去操作数据库;
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=http://www.mamicode.com/"登 陆">>
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=http://www.mamicode.com/"退出">
显示效果:登陆界面如下:
登陆成功界面如下:
jsp model1模式 制作简易去哪儿网校招界面(四)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。