MVC框架——基于java web简单开发 – 记忆角落

MVC框架——基于java web简单开发

/ 9评 / 0

MVC框架——基于java web简单开发(作业)

我的JSP作业要求:

练习要求如下:
1.按照*.bmp做好客户端login.jsp文件
2.在客户端login.jsp文件中用javascript实现登陆验证,要求非空字符,非空对象等验证。
3.在服务器端口checkLogin.jsp文件中进行分类执行
1)学生用户:用户名为:本人姓名,密码为:本人学号,登陆成功后用response跳转到student.jsp页,输出个人信息。提醒:1.session应用;2.注意中文乱码处理。
2)管理员用户:用户名为:admin,密码为:admin,登陆成功后用jsp:forward跳转到student.jsp页,输出目前有多少人登陆服务器页面。提醒:application应用。
3)来宾账户:用户名为:guest,密码为:guest,登陆成功后输出“我来逛一圈,马上走!”。用超级链接跳转到客户端页。


MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用于组织代码用一种业务逻辑和数据显示分离的方法。

哎呀,这些对我这个新手只能百度吧。

闲话少说了,下面开始手把手记录一下如何搭建MVC框架,作为例子,展示的是一个最(超级)简单的登录流程。

创建项目的工具我推荐MyEclipse,毕竟MyEclipse可以加载强大的插件,缺点就是吃资源->创建项目完毕之后,我们可以立刻启动项目。

启动项目完毕之后,MyEclipse自带的浏览器会向我们展示这么一个简单到不能再简单的页面

看到项目的文件结构,不难在WebRoot文件夹下找到名为index.jsp这一文件。浏览器所展示的页面,就是此文件经过处理过后的结果。

点开之后,修改<body></body>之间的内容,例如改成This is My MVC project.。重新启动项目后,告诉我你看到了什么。

好了,解决完页面来源问题之后,接下来就是解答为什么会展示这么一个页面的问题了。我们点WebRoot文件夹节点,再点击WEB-INF文件夹节点,找到web.xml文件并且双击打开,然后看看里面的内容

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">


 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>

看到第7行的代码中的index.jsp,是不是觉得似曾相识呢?没错,它就是我们刚才一直在讨论的那个页面。这里设置的就是项目启动后浏览器展示的第一个页面,以后我们可以试着再WebRoot目录下添加一个HTML文件或JSP文件,然后将这里的index.jsp改成所添加的文件名,重新启动项目,你就会发现哪里就改成你的默认首页页面。web.xml文件,用处还不止一点,因为我自己也不怎么懂!哈哈哈

前面已经创建完项目了,那么下面一个步骤就是逐一新建在MVC框架中负责V(视图)、C(控制器)、M(模型)的对应文件。

在文件夹Web-Root下新建名为login.jsp的JSP文件,代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="404.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>统一身份认证平台</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="login.css" type="text/css" rel="stylesheet">
	<script type="text/javascript">
	function checkLoginForm() {
	var username = document.getElementById("username");
    var password = document.getElementById("password");
    if(username.value == "" || password.value == "") {
        alert("用户名或密码不能为空");
        return false;
    }
}

	 function toUpperCase(obj)  
	 {  
	 obj.value = obj.value.toLowerCase();
	 }  
	function resetLogin(){
	var username = document.getElementById("username");
    var password = document.getElementById("password");
    if(username.value!=null || username.value!="") {
        username.value="";
    }
    if(password.value!=null || password.value!="") {
        password.value="";
    }
}
	</script>
  </head>
  
<body>
	<div id="pagebody">
		<div id="loginbox">
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tbody>
				<tr>
					<td><img src="imgs/login-top.gif" width="262" height="34"></td>
				</tr>
				<tr>
					<td>		
					<form id="fm1" name="fm1" action="MyServlet/checkLogin" method="post" onsubmit="return checkLoginForm()">
					<div class="box" id="login">
					<table border="0" cellspacing="0" cellpadding="0" width="92%" align="center">
					<tbody>
					<tr>
						<td colspan="2">&nbsp; </td>
					</tr>
					<tr>
						<td align="right">用户名:</td>
						<td>
						<input id="username" name="username" class="username" type="text" placeholder="请输入你的账号" size="25" onkeyup="toUpperCase(this)" />		
						</td>
					</tr>
					<tr>
						<td colspan="2">&nbsp; </td>
					</tr>
					<tr>
						<td align="right">密&nbsp;&nbsp;码:</td>
						<td>
						<input id="password" name="password" class="password" type="password" placeholder="请输入你的密码" size="25" onkeyup="toUpperCase(this)" />
						</td>
					</tr>
					<tr>
						<td colspan="2">
						<table border="0" cellspacing="6" cellpadding="5" width="100%">
							<tbody>
								<tr>
									<td align="right"><input alt="[按钮]" src="imgs/login-buttom.gif" type="image" name="imageField" /></td>
									<td>
										<a href="login.jsp"><img border="0" src="imgs/login-button2.gif" width="93" height="30" onclick="resetLogin()"></a>	
									</td>
								</tr>
							</tbody>
						</table>
						</td>
					</tr>
		
				<tr>
				<td height="25" valign="bottom" colspan="2" align="left" style="padding-left:30px;"><a target="_blank" href="LoginFailed.jsp">
				<font color="#ff0000"><strong>疑难问题解答</strong></font>
				</a>&nbsp; &nbsp; <a target="_blank" href="LoginFailed.jsp">忘记密码?</a>
				<br>
				<a target="_blank" href="LoginFailed.jsp">关于身份认证</a>
				</td>
				</tr>
				<tr>
					<td colspan="2"><!--  <div align="center"><img border="0" src="imgs/line.gif" width="227" height="2"></div>*/-->
						<div class="box-1"></div>
					</td>
				</tr>
				<tr>
				<td colspan="2"  class="xx"><img border="0" src="imgs/quan.gif" width="18" height="15">河源职业技术学院信息中心</td>
				</tr>
				</tbody>
				</table>
				</div>
				</form>
				</td>
				</tr>
				<tr>
				<td><img src="imgs/login-foot.gif" width="262" height="10"></td>
				</tr>
				</tbody>
			</table>
		</div>
		<div id="info">
			<ul>
				<li>这是校园的内部门户站点。您可以登录校园信息服务综合平台,通过同一个账户名/密码。
					<font color="#ff0000">学生帐号为学号,初始密码为身份证号后六位或888888;教工帐号为新六位工号,初始密码为身份证号后六位。如果您的身份证号最后一位是字母,请尝试用大写的字母登录(具体情况以人事档案中大小写为准)。
					</font>
				访问校园网的各种网络应用系统和信息资源。 
				</li>
				<li>统一身份认证是当用户进入信息门户系统时对用户的统一认证,教职工和学生只用一个帐号,登录一次门户,就可以进入所有有权限访问的应用系统,不必重复登录。
				</li>
				<li>如有问题请联系:3800078</li>
				<li>网络报障电话:3800202</li>
			</ul>
		</div>
	</div>
</body>
</html>

提交的表单,action为"MyServlet/checkLogin",发出请求是post,具体请看代码

下面是login.css代码:

@charset "utf-8";

body {
	font:12px Tahoma;
	margin:0px;
	background:#eaeaea;
} 
a:link,a:visited {
	font-size:12px;
	text-decoration:none;
	color:#000;
}
.xx{
	font-size:12px;
	padding-left: 10px;
}
a:hover{
	color: #3399cc;
	text-decoration: underline;
}

.en{
	font-family:Verdana;
	font-size:10px;
}

a.yellowlink:link,a.yellowlink:visited,.yellow {
	color: #ff6600;
}
a.yellowlink:hover{
	color: #3399cc;
	text-decoration: underline;
}
.username,.password{
	width:176px;
	font-size:14px;
	height:20px;
	line-height: 20px;
}
.input{
	border: 1px solid #cccccc;
	height: 18px;
	padding: 3px 2px 0px 2px;
	font: 12px Verdana;
}

#pagebody {
	width:1024px;
	height: 550px;
   margin:0px auto;
	background: url(imgs/bg.jpg) top no-repeat;
	background-color: #fff;
}

#loginbox {
	position: relative;
	overflow:hidden; 
	float:left;
	clear:left;
	top:265px;
	left: 60px;
	width:262px; 
	background: url(../imgs/login-bg.gif) repeat-y;
	border:10px solid #f0ffff;
}
.box-1{
	border:1px solid #f0ffff;
	padding-top: 10px;
}

#info {
position: relative;
right:80px;
top: 245px;
 width:560px; 
 float:right;
 overflow:hidden;
 padding-top:28px;
 clear:right;

}

#info ul {
margin: 5px 5px 10px 20px;
list-style:url(../imgs/icon.gif)  disc;
}

#info  ul li{
	font:14px/22px sans-serif; 
	padding: 2px;
	list-style-image:url(../imgs/star.png);
	}


#Footer {
   margin:0px auto;
	display: block;
	width: 1024px;
	height:80px;
	background: #ffffff url(../imgs/footer.jpg)  repeat-x;
	background-color: #fff;
	color: #666;
}
#footer tr td {
background:#FFFFFF;
}

这个文件的文件名login.jsp。(建议初学者做完这个步骤之后先运行一遍项目,看看效果如何,再看看有没有出错的地方)

如果运行的效果如下图,那应该就没什么问题了。

所谓的V(视图),通俗地来讲,就是用户所看到的内容。具体到这个Java web项目,就是用户所看到的页面。

首先,要在src目录下新建一个包,包名为MyServlet然后,再在该包下新建一个servlet文件,名为checkLogin,代码如下:

package MyServlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import Uers.user;

public class checkLogin extends HttpServlet {
	
	public checkLogin(){
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			doPost(request,response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		boolean s=false;
		boolean a=false;
		boolean g=false;
		request.setCharacterEncoding("utf-8");
		user user = new user();
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		
		s=user.student(username, password);//使用模型对账号和密码进行验证,返回一个boolean类型的对象
		a=user.admin(username, password);
		g=user.guest(username, password);
		
			if(s){  //如果验证结果为真,跳转至登录成功页面
            response.sendRedirect("../student.jsp");
            HttpSession session = request.getSession();
            session.setAttribute("username",request.getParameter("username"));
            session.setAttribute("password",request.getParameter("password"));
		     }else if(a){  //如果验证结果为真,跳转至登录成功页面
            response.sendRedirect("../admin.jsp");
            HttpSession session = request.getSession();
            session.setAttribute("username",request.getParameter("username"));
		     }else if(g){  //如果验证结果为真,跳转至登录成功页面
            response.sendRedirect("../guest.jsp");
		     }else{
		 		   // response.sendRedirect("../LoginFailed.jsp");
		    	 response.sendRedirect("../404.jsp");
		 		     }
		     
	}

	/**
	 * Initialization of the servlet. <br>
	 *
	 * @throws ServletException if an error occurs
	 */
	public void init() throws ServletException {
		// Put your code here
	}

}

控制器(C)的作用,就是对流程的控制,接收视图传来的参数,交由模型进行处理,再根据处理的结果决定下一步的操作。具体到本项目,servlet接收jsp传来的参数username和password,交由user处理,根据返回的boolean结果跳转到登录成功(失败)的页面。

前面说到,MyServlet.checkLogin会处理提交的请求,那么,为什么checkLogin会接收到这个请求呢?因为,我事先修改了web.xml文件,在里面添加了相应的代码。web.xml的完整代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <servlet>
  <description>This is the description of my J2EE component</description>
  <display-name>This is the display name of my J2EE component</display-name>
  <servlet-name>login</servlet-name>
  <servlet-class>MyServlet.login</servlet-class>
 </servlet>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>checkLogin</servlet-name>
    <servlet-class>MyServlet.checkLogin</servlet-class>
  </servlet>

 <servlet-mapping>
  <servlet-name>login</servlet-name>
  <url-pattern>/MyServlet/login</url-pattern>
 </servlet-mapping>
  <servlet-mapping>
    <servlet-name>checkLogin</servlet-name>
    <url-pattern>/MyServlet/checkLogin</url-pattern>
  </servlet-mapping>
 <welcome-file-list>
  <welcome-file>login.jsp</welcome-file>
 </welcome-file-list>
 <login-config>
  <auth-method>BASIC</auth-method>
 </login-config>
</web-app>

看到关于action的那一行XML代码,是否想到了什么呢?没错,就是jsp表单中所定义的action。试着修改,看看会有什么效果?

首先,在src文件下新建包,包名为Uers。然后在该包下新建class文件,名为user。

为了让读者,尤其是初学者更快地理解MVC,而不是将精力耗费在理解user以及数据库操作上面,我将user进行了尽可能的简化。代码如下:

package Uers;

public class user {
	public boolean student(String username,String password){
		if(username.equals("郭良俊")&&password.equals("2015122297")){//判断用户名以及密码是否与设定相符
			return true;
	}else {
		 return false;
	}
	}	
	
	public boolean admin(String username,String password){
		if(username.equals("admin")&&password.equals("admin")){//判断用户名以及密码是否与设定相符
			return true;
	}else {
		 return false;
	}
	}
	
	public boolean guest(String username,String password){
		if(username.equals("guest")&&password.equals("guest")){//判断用户名以及密码是否与设定相符
			return true;
	}else {
		 return false;
	}
	}
}

代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="404.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'admin.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <!-- JSP声明 -->  
  <%! int i;  
  %>  
  <!-- 将i值自加后放入application的变量内 -->  
  <%application.setAttribute("counter",String.valueOf(++i));%>   
  <%--String username = (String)session.getAttribute("username"); --%>
  <%-- <%=session.getAttribute("username") %>欢迎回来!</p>--%>
  <p>利用EL表达式:${sessionScope.username}欢迎回来!</p>
  <p>目前有<%=application.getAttribute("counter") %>人登陆服务器</p>
  <jsp:forward page="student.jsp" />
  </body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="404.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'guest.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
   <h2>我来逛一圈,马上走!</h2>
   <a href="login.jsp">点击回到首页</a>
  </body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="404.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'LoginFailed.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <h2>登录失败!请确认账号密码</h2>
    <p>学生用户:用户名为:本人姓名,密码为:本人学号</p>
    <p>管理员用户:用户名为:admin,密码为:admin</p>
    <p>来宾账户:用户名为:guest,密码为:guest</p>
    <a href="login.jsp">点击回到首页</a>
  </body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="404.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'student.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <%
   String username =(String)session.getAttribute("username");
   String password =(String)session.getAttribute("password");
     %>
     <%-- 下面是stundent的任务--%>
	<p>我叫:<%=username %></p>
	<p>我的学号:<%=password %></p>
	<%-- 下面是admin的任务--%>
	 <%=session.getAttribute("username") %>欢迎回来!</p>
	<p>利用EL表达式:${sessionScope.username}欢迎回来!</p>
	<p>目前有<%=application.getAttribute("counter") %>人登陆服务器</p>
	<p>利用EL表达式:目前有${applicationScope.counter} 人登陆服务器</p>
	<a href="login.jsp">首页</a>
  </body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isErrorPage="true"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>这不是404页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="css/style.css" type="text/css" rel="stylesheet">
	<script type="text/javascript">
	var num=30;
	function redirect(){
		num--;
		document.getElementById("num").innerHTML=num;
		if(num<0){
			document.getElementById("num").innerHTML=0;
			//location.href="http://199604.com";
			document.location="login.jsp";
			}
		}
	setInterval("redirect()", 1000);
	</script>
  </head>
  
  <body>
    <div class="whole">
	<img src="imgs/back.jpg" />
    <div class="mask"></div>
</div>
<div class="b">
		<p>
			登录失败!<br />
			如有疑问请咨询管理员<br />
			I<br />
			v<br />
			我一直问我自己我以后能做什么。<br />
			事实上我根本不需要,我只需要静静等待着。<br />
			因为,生活,一半是回忆、一半时继续。<br />
			
            <span id="num"></span>秒后自动跳转到主页
		</p>
		<a class="new" href="http://199604.com">Go to 记忆角落</a>
      <a class="old" href="login.jsp">首页</a>
	</div>
  </body>
</html>

 

(1)输入账号:admin,密码:admin 将会跳转到页面如下:

(2)输入错误的账号或错误的密码,将会跳转到页面如下:

其他的功能你可以去尝试!

下面是整个MVC的代码还有素材

点击下载


这是小菜鸟半小时的作品,就是一些效果那些老师没有要求所以我就简单的接收数据就OK了。这个MVC是无数据库版的,嗯尽情的喷我挑转页面没有CSS和HTML且都很垃圾!其实我真的挺垃圾的!好了我现在就洗洗睡了!晚安了我的基友们!

9条回应:“MVC框架——基于java web简单开发”

  1. 叶蕾说道:

    棒棒哒?( ‘ω’ )?

  2. 广告已经屏蔽说道:

    装作看得懂的样子来评论下

  3. 大雄说道:

    又长又臭-

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注