MVC概述
SUN公司推出了两种Web应用程序的开发模式，一种是JSP+JavaBean模式，一种是Servlet+JSP+JavaBean模式
MVC的开发流程
案例： 💁🏼💁🏼点击链接下载完整源码💁🏼💁🏼
案例描述：案例为一个使用MVC框架的登录注册页面，我们没有引入数据库，所以这些登录注册信息由集合List来进行存储，点击注册，信息保存到集合中。注册成功会跳转到登录页面。当登录成功跳转成功页面，登录失败，返回到登录页面，同时引入一个记住密码的功能。
案例演示：
登陆界面
注册界面
登录失败界面
注册相同名称时
使用注册信息登录成功界面
直接访问成功界面
代码准备：
原始代码准备
login.jsp
<%@ 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>login.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;
}
.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&set
public 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) {}
初始化集合
那么此时怎样在Servlet服务启动时创建呢？我们需要在web.xml进行配置
加入这个，此时服务器启动时，就会创建该Servlet实例，实例内的Init方法就会执行，此时list就会被创建到ServletContext中了
文件上传要素的介绍：
- 表单必须是post提交方式
- 表单中必须有文件上传项，文件上传项必须有name属性和值
- 表单的enctype属性必须设置为multipart/form-data
运行测试时，我们随便注册可一组字符信息，可以发现我们的服务器返回了我们的数据，我们提交表单的接受功能是可以使用的
复选框数据的接收
此外，除了有文件上传和用户名密码等的默认信息外，还有复选框数据的接收。
运行，注册。在控制台我们看一看！
封装数据完成基本的注册
分析我们可以看到，我们接受数据是一个for循环，第一次为name，第二次则变成password，name此时我们可以先将数据存起来，然后当进行使用时在取出来。观察for循环可以看到，name-value的形式特别附和键值对。因此我们使用Map来进行存数据
运行之后我们可以观察到，我们的数据确实被存储到了map集合中，接下来我们就需要将这些数据封装到user对象中
实现过程：
测试试一试看看我们的list集合： (我们注册了两个用户)
提交我们可以发现两个数据都存入到了list集合中了！！：
文件上传
用户选的的图片，也需要我们上传到服务器中
如果两个用户双穿同一个名称的问题怎么解决？ 引入UUID
完善上传
运行看一看
上传完成后，我们需要去tomecat的本地服务器去看，而不是在eclipse来看。因为我们的项目是发布到服务器中的。
此外我们发现我们注册完之后是一个空白页，那么我们怎样去使他跳转到登陆页呢？
重新登陆可以看到：我们的页面自动跳转到了登陆页面
用户名校验
对于已经注册过的用户。我们就不可以让她从新注册了。
同时我们需要将错误报告信息显示到页面上：
登陆功能的实现
编写LoginServlet
在Login.jsp页面编写显示信息
测试：当我们输入错误的username或者password时
登陆成功后
那么我们怎样在成功页面显示我们的名字和我么你上传的图片呢？
可以看到，这是我们的图片路径
那么此时如果我们想直接访问success.jsp
记住我
那么我们可以借用Cokkie的功能，让浏览器记住我们的登陆用户
我么你打开开发者模式进行检查：
然后我们推出页面，重新进入。我们虽然没有登录，但是浏览器已经利用cookie的方式记住了用户名信息
记住用户名并且显示：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
