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

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

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&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) {}

初始化集合

那么此时怎样在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的方式记住了用户名信息

 记住用户名并且显示:

 

这篇关于MVC模式下的小试牛刀(附加案例过程详细实现步骤➕源代码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/587281

相关文章

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一:使用GROUP BY和HAVING子句方法二:仅返回重复值方法三:返回完整记录方法四:

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的