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（模型）的对应文件。
- 第二步：新建负责V（视图）的JSP文件
在文件夹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"> </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"> </td>
</tr>
<tr>
<td align="right">密 码：</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> <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项目，就是用户所看到的页面。
- 第三步：新建负责C（控制器）的Servlet
首先，要在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结果跳转到登录成功（失败）的页面。
- 第四步：修改web.xml文件，注册servlet并且建立action与servlet之间的映射。
前面说到，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。试着修改，看看会有什么效果？
- 第五步：新建M（模型）的user文件
首先，在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;
}
}
}
- 第六步：新建V（视图）中的另外几个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>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="https://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="https://199604.com">Go to 记忆角落</a>
<a class="old" href="login.jsp">首页</a>
</div>
</body>
</html>
- 第七步：跑项目，看效果
（1）输入账号：admin，密码：admin 将会跳转到页面如下：
（2）输入错误的账号或错误的密码，将会跳转到页面如下：
其他的功能你可以去尝试！
下面是整个MVC的代码还有素材
这是小菜鸟半小时的作品，就是一些效果那些老师没有要求所以我就简单的接收数据就OK了。这个MVC是无数据库版的，嗯尽情的喷我挑转页面没有CSS和HTML且都很垃圾！其实我真的挺垃圾的!好了我现在就洗洗睡了！晚安了我的基友们!