MVC框架——基于java web简单开发 發布於 3 年前 (2016年11月18日) – 3006 次检阅
- 2020 年 4 月 9 日
- 筆記
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="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且都很垃圾！其实我真的挺垃圾的!好了我现在就洗洗睡了！晚安了我的基友们!
