MVC模式下的小试牛刀（附加案例过程详细实现步骤➕源代码）

本文主要是介绍MVC模式下的小试牛刀（附加案例过程详细实现步骤➕源代码），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

MVC概述

SUN公司推出了两种Web应用程序的开发模式，一种是JSP+JavaBean模式，一种是Servlet+JSP+JavaBean模式

MVC的开发流程

案例： 💁🏼💁🏼点击链接下载完整源码💁🏼💁🏼

案例描述：案例为一个使用MVC框架的登录注册页面，我们没有引入数据库，所以这些登录注册信息由集合List来进行存储，点击注册，信息保存到集合中。注册成功会跳转到登录页面。当登录成功跳转成功页面，登录失败，返回到登录页面，同时引入一个记住密码的功能。

案例演示：

登陆界面

注册界面

登录失败界面

注册相同名称时

使用注册信息登录成功界面

直接访问成功界面

代码准备：

原始代码准备

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LoginPage</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body><div class="login"><div class="header"><h1><a href="./login.jsp">Login</a> <a href="./regist.jsp">egister</a></h1></div><form action="" method="post"><table><tr><td class="td1">Username</td><td><input type="text" class="input1" name="username"></td></tr><tr><td class="td1">Password</td><td><input type="password" class="input1" name="password"></td></tr><tr><td class="td1" colspan="2"><input type="checkbox" name="remember" value="true" checked="checked"> Remember Name</td></tr><tr><td colspan="2"><div class="btn-red"><input type="submit" value="登录" id="login-btn"></div></td></tr></table></form></div>
</body>
</html>

regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RegistPage</title>
<link rel="stylesheet" href="./css/reg.css">
</head>
<body><div class="reg"><div class="header"><h1><a href="./login.jsp">Login</a> <a href="./regist.jsp">Register</a></h1></div><form action="/reg_login/RegistServlet" method="post"><table><tr><td class="td1">Username</td><td><input type="text" class="input1" name="username"></td></tr><tr><td class="td1">Password</td><td><input type="password" class="input1" name="password"></td></tr><tr><td class="td1">Nickname</td><td><input type="text" class="input1" name="nickname"></td></tr><tr><td class="td1">Gender</td><td><input type="radio" name="sex" value="male">male<input type="radio" name="sex" value="female">female</td></tr><tr><td class="td1">Upload avatar</td><td><input type="file" id="photo" name="upload"></td></tr><tr><td class="td1">Hobby</td><td><label> <input type="checkbox" name="hobby" value="dance">Dance<input type="checkbox" name="hobby" value="sing">SingSong<input type="checkbox" name="hobby" value="computer">Computer <input type="checkbox" name="hobby" value="music">Music</label></td></tr><tr><td colspan="2"><div class="btn-red"><input type="submit" value="注册" id="reg-btn"></div></td></tr></table></form></div>
</body>
</html>

success.jsp

<%@page import="com.kilig.domain.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SuccessPage</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body><div class="login"><div class="header"><h1>Successfully logged in :)</h1></div><div class="content"><table align="center"><tr><td align="center"><img src="/reg_login/img/pic01.jpg" /></td></tr><tr><td align="center">Welcome xxx, Successfully logged in !!！</td></tr></table></div></div>	
</body>
</html>

 *{margin:0px;padding:0px;}a{text-decoration: none;}ul{list-style: none;}body{background:rgba(238,238,238,0.5);position:relative;font-family: 微软雅黑;background-color: lightblue;}.login{width:450px;height:380px;background: white;position:absolute;top:50%;left:50%;margin-left:-225px;/*margin-top:-225px;*/margin-top:100px;padding:5px 15px;}.login>.header{width:100%;padding:10px 0px;border-bottom: 1px solid #ccc;overflow: hidden;}.login>.header>h1{font-size:18px;font-weight: normal;float:left;}.login>.header>h1>a{padding:5px;margin-left:10px;color:black;}.login>.header>h1>a:first-child{margin-left:50px;color:#2C689B;}.div1{width: 100px;}.login>form{margin-top:30px;padding:0 50px;}.input1{width:250px;height:40;line-height: 40px;padding-left: 5px;border:1px solid #d0d6d9;background: #F9F9F9;}.td1{height: 40px;width: 100px;}table{padding: 0px;margin:0px;}td{padding:5px; margin:10px;}.login>form>div>p{width:350px;height:25px;line-height: 25px;font-size: 12px;}.login>form>div.idcode>input{width:150px;margin-right:30px;float: left}.login>form>div.idcode>span{float:right;width:80px;height:30px;margin-top:10px;border:1px solid #ccc;}.login>form>div.idcode>a{float: right;color: black;font-size: 12px;margin-top:25px;margin-left: 5px;}.clear{clear:both;}.login>form>.autoLogin{margin-top:20px;font-size:14px;line-height:15px;color:#999;height: 15px;}.login>form>.autoLogin>label>input{margin-right:5px;}.login>form>.autoLogin>label{float:left;}.login>form>.autoLogin>a{float:right;color:#666;font-size:14px;}.btn-red{margin:20px 0px;}#login-btn{width:100%;height:50px;background:#2C689B;border-color:#2C689B;text-align: center;line-height:50px;color:#fff;font-size: 17px;}#login-btn:hover{cursor:pointer;}

reg.css

 *{margin:0px;padding:0px;}a{text-decoration: none;}ul{list-style: none;}body{background:rgba(238,238,238,0.5);position:relative;font-family: 微软雅黑;background-color: lightblue;}.input1{width:250px;height:40;line-height: 40px;padding-left: 5px;border:1px solid #d0d6d9;background: #F9F9F9;}.td1{height: 40px;width: 100px;}table{padding: 0px;margin:0px;}td{padding:5px; margin:10px;}.reg{width:450px;height:450px;background: white;position:absolute;top:50%;left:50%;margin-left:-225px;/*margin-top:-225px;*/margin-top:100px;padding:5px 15px;}.reg>.header{width:100%;padding:10px 0px;border-bottom: 1px solid #ccc;overflow: hidden;}.reg>.header>h1{font-size:18px;font-weight: normal;float:left;}.reg>.header>h1>a{padding:5px;margin-left:10px;color:black;}.reg>.header>h1>a:first-child{margin-left:50px;}.reg>.header>h1>a:last-child{color:#2C689B;}.reg>form{margin-top:30px;padding:0 50px;}.reg>form>div>input{width:350px;height:40;line-height: 40px;padding-left: 5px;border:1px solid #d0d6d9;background: #F9F9F9;}.reg>form>div>p{width:350px;height:25px;line-height: 25px;font-size: 12px;}.reg>form>div.idcode>input{width:150px;margin-right:30px;float: left}.reg>form>div.idcode>span{float:right;width:80px;height:30px;margin-top:10px;border:1px solid #ccc;}.reg>form>div.idcode>a{float: right;color: black;font-size: 12px;margin-top:25px;margin-left: 5px;}.clear{clear:both;}.btn-red{margin:20px 0px;}#reg-btn{width:100%;height:50px;background:#2C689B;border-color:#2C689B;text-align: center;line-height:50px;color:#fff;font-size: 17px;}#reg-btn:hover{cursor:pointer;}

创建实体类User.java

package com.kilig.domain;
/*** 用户实体类* @author kilig**/
public class User {private String username;private String password;private String nickname;private String sex;private String hobby;private String path;//图片路径//get&setpublic String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getNickname() {return nickname;}public void setNickname(String nickname) {this.nickname = nickname;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public String getHobby() {return hobby;}public void setHobby(String hobby) {this.hobby = hobby;}public String getPath() {return path;}public void setPath(String path) {this.path = path;}}

实体类保存的信息，就是用户注册所需要保存的信息，那么当很多用户都去注册信息，我们就需要将这些用户存储起来。此时就需要集合，而集合在很多地方都需要，因此它是有作用范围的（整个Web应用），因此我们将集合放在ServeletContext域内

数据接收的流程：

// 定义一个Map集合用于保存接收到的数据:
Map<String,String> map = new HashMap<String,String>();
// 1.创建一个磁盘文件项工厂对象
DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
// 2.创建一个核心解析类
ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
// 3.解析request请求，返回的是List集合，List集合中存放的是FileItem对象
List<FileItem> list = servletFileUpload.parseRequest(request);
// 4.遍历集合，获得每个FileItem，判断是表单项还是文件上传项
for (FileItem fileItem : list) {}