目录
4.1创建一个maven-web工程，并替换web.xml文件的内容
4.5根据扫描包的地址，创建相应的包并在包中创建controller类
8.2使用Model保存数据在页面使用el表达式获取（作用域与request相同）
8.4使用@SessionAttributes注解将Model的作用域变为session
1.概念
Spring MVC属于SpringFrameWork的后续产品，已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构，从而在使用Spring进行WEB开发时，可以选择使用Spring的Spring MVC框架或集成其他MVC开发框架，如Struts1(现在一般不用)，Struts 2(一般老项目使用)等等。
2.作用
springMVC它是spring框架的一个分支，该springMVC框架主要完成的功能是:==接收浏览器的请求响应，对数据进行处理，然后返回页面进行显示== 可以把它理解为和Servlet干的工作是一样的。
3.原理
4.使用Springmvc框架
4.1创建一个maven-web工程，并替换web.xml文件的内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
</web-app>原因：原来的配置文件版本过低，建议使用4.0版本
4.2引入springmvn所依赖的jar包
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.15.RELEASE</version>
</dependency>
</dependencies>4.3将DpatcherServlet注册到配置文件中
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>DispactherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--默认DispactherServlet加载的springmvc配置文件:WEB-INF/[servlet-name]-servlet.xml
我们可以指定加载配置文件
-->
<init-param>
<param-name>contextConfigLocation</param-name>
<!--classpath:表示编译后的路径-->
<param-value>classpath:springmvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>DispactherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app4.4创建springmvc配置文件
将包扫描的配置写在其中
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
<!--包扫描-->
<context:component-scan base-package="com.pgx.controller"/>
</beans>4.5根据扫描包的地址，创建相应的包并在包中创建controller类
@Controller //该注解标记该类为处理层类---类似@WebServlet
public class HelloController {
@RequestMapping(value = "/hello01") //把请求路径映射到该方法上。
public String hello01(){
System.out.println("业务处理");
return "hello01.jsp"; //响应一个页面
}
}4.6启动服务器并访问映射路径，得到相应的页面和结果
http://localhost:8080/sprinmvc02_war/hello5.springmvc的运行流程
* 1. 客户端发生请求http://localhost:8080/sprinmvc02_war/hello
* 2. 来到tomcat服务器。
* 3. springmvc的前端控制器DipatcherServlet接受所有的请求。
* 4. 查看你的请求地址和哪个@RequestMaping匹配。
* 5. 执行对应的方法。方法会返回一个字符串。springmvc把该字符串解析为要转发的网页。
* 6. 把该字符串经过视图解析器拼接。
* 7. 拿到拼接的地址，找到对应的网页。
* 8. 渲染该网页给客户
6.传递和接受参数的方法
6.1传递和接收少量的参数
6.1.2传递和接收大量参数（例如表单提交的一些数据）
特殊参数：日期类，springmvc框架不会帮我们直接解析
处理方式：
1）.为日期类加入日期处理类的注解
2）.在springmvc配置中启动注解驱动
问题：接受参数时将其打印如果传递的是中文会出现中文乱码问题
解决方法：添加编码过滤器（可以自定义，也可以使用该框架自带的），这里使用自带的过滤器
1）.直接将过滤器注册到web.xml配置文件中即可。
7.处理静态资源（例如 css,img,html等等）
问题：当我们在页面上引入图片时，其实也是一种请求，会被DispatcherSerlvet拦截，并且无法找到对应的@RequestMaping配置路径，所以无法放行。
解决：在springmvc配置文件中设置放行即可
8.将controller层的数据在页面回显的方式
8.1使用request保存数据并在页面使用el表达式获取
@RequestMapping(value = "list01")
public String list01(HttpServletRequest request){
Student student = new Student("张三",0,new Date());
request.setAttribute("stu",student);
return "msg.jsp";
}8.2使用Model保存数据在页面使用el表达式获取（作用域与request相同）
@RequestMapping(value = "list02")
public String list02(Model model){
Student student = new Student("李四",0,new Date());
model.addAttribute("stu",student);
return "msg.jsp";
}8.3使用session保存数据在页面使用el表达式获取
@RequestMapping(value = "list03")
public String list03(HttpSession session){
Student student = new Student("李四",0,new Date());
session.setAttribute("stu",student);
return "msg.jsp";
}8.4使用@SessionAttributes注解将Model的作用域变为session
9.使用重定向跳转
@RequestMapping("list5")
public String list5(){
System.out.println("!!!!!!!!!!!!!!!!!");
return "redirect:list.jsp"; //当springmvc看到你返回的字符串钟含有redirect:时 它认为你要进行重定向跳转
}10.springmvc返回json数据
10.1导入所依赖的jar包
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.2.2</version>
</dependency>10.2加入ResponseBody注解
@Controller
//将java对象转为json对象的注解
@ResponseBody
public class controller02 {
@RequestMapping(value = "list05")
public List<Student> list05(){
List<Student> list = new ArrayList<Student>();
list.add(new Student("张三",1,new Date()));
list.add(new Student("李四",0,new Date()));
list.add(new Student("王五",0,new Date()));
return list;
}
}结果：
发现：返回的日期对象为是1970年至填写的日期之间的毫秒数，将其转为yyyy-MM-dd格式
加入Jsonformat注解
11.springmvc全局异常处理类
11.1作用
当controller发生异常，则有全局异常类来处理并执行相应的处理方法。
11.2使用
1).创建一个异常处理类
//标记为异常处理类
@ControllerAdvice
public class MyExceptionHandler {
//标记异常类型
@ExceptionHandler(value = Exception.class)
public String exception(){
return "error.jsp";
}
}2).保证springmvc.xml中扫描包能够扫描到该类
3).如果是ajax请求时出现异常，返回json数据(这里使用Map容器)
//标记为异常处理类
@ControllerAdvice
@ResponseBody
public class MyExceptionHandler {
//标记异常类型
@ExceptionHandler(value = Exception.class)
public Map exception(){
Map map = new HashMap();
map.put("code",5000);
map.put("msg","出错了");
map.put("data",null);
return map;
}
}12.springmvc拦截器
拦截器只会拦截controller层的资源路径
12.1使用
1).创建一个类，并实现HandlerInterceptor接口并重写接口的preHandle方法
public class MyInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//该方法中可写放行的条件
//表示放行，返回false表示拦截
return true;
}
}2).将拦截器注册到springmvc.xml配置文件中
<!--拦截器的配置-->
<mvc:interceptors>
<mvc:interceptor>
<!--mapping:哪些路径需要经过拦截器
/**: 表示n层路径
/*:表示一层路径
-->
<mvc:mapping path="/**"/>
<!--exclude-mapping:设置不经过该拦截的路径-->
<mvc:exclude-mapping path="/list2"/>
<mvc:exclude-mapping path="/list3"/>
<!--bean表示你自定义的拦截器类路径-->
<bean class="com.ykq.interceptor.MyInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>13.文件上传到本地服务器
13.1导入文件上传所依赖的jar包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>13.2创建一个表单提交页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%--
method: 提交方式 文件上传必须为post提交。
enctype:默认application/x-www-form-urlencoded 表示提交表单数据
multipart/form-data:可以包含文件数据
input的类型必须为file类型，而且必须有name属性
--%>
<form method="post" action="upload01" enctype="multipart/form-data">
<input type="file" name="myfile"/>
</form>
</body>
</html>13.3.在springmvc中配置文件解析器
<!--
id的名称必须叫multipartResolver
-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--这里的单位为字节10M*1024K*1024-->
<property name="maxUploadSize" value="10485760"/>
</bean>13.4在controller层编写文件上传的实现接口
//注意:MultipartFile 参数名必须和<input type="file" name="myfile"/>中name属性相同
@RequestMapping("/upload01")
public String upload01(MultipartFile myfile, HttpServletRequest request) throws Exception{
//(1)得到本地服务目录的地址
String path = request.getSession().getServletContext().getRealPath("upload");
//(2)判断该目录是否存在
File file=new File(path);
if(!file.exists()){
file.mkdirs();
}
//(3)//把myfile保存到本地服务中某个文件夹下。
//生成文件名
String filename= UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
File target=new File(path+"/"+filename);
myfile.transferTo(target); //把myfile转移到目标目录下
return "";
}14.使用elementui+Vue完成文件上传
14.1页面布局
<%--
Created by IntelliJ IDEA.
User: ykq
Date: 2022/6/9
Time: 15:53
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/qs.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="app">
<%--action：文件上传的路径--%>
<el-upload
class="avatar-uploader"
action="/upload02"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
imageUrl:"",
},
methods:{
//上传成功后触发的方法
handleAvatarSuccess(res, file) {
this.imageUrl=res.data;
},
//上传前触发的方法
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
})
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
</html>14.2后端接口
@RequestMapping("/upload02")
@ResponseBody
public Map upload02(MultipartFile file, HttpServletRequest request) {
try {
//1.获取上传到服务器的文件夹路径
String path = request.getSession().getServletContext().getRealPath("upload");
File file1 = new File(path);
//判断指定的目录是否存在
if (!file1.exists()) {
file1.mkdirs();
}
//设置上传后的文件名称
String filename = UUID.randomUUID().toString().replace("-", "") + file.getOriginalFilename();
File target = new File(path+"/"+filename);
file.transferTo(target);
Map map=new HashMap();
map.put("code",2000);
map.put("msg","上传成功");
//通过访问服务器地址来访问图片.
map.put("data","http://localhost:8080/upload/"+filename);
return map;
}catch (Exception e){
e.printStackTrace();
}
Map map=new HashMap();
map.put("code",5000);
map.put("msg","上传失败");
return map;
}15.普通文件上传到阿里OSS服务器中
1).从OSS服务端拿到使用Java上传的代码（结合自己的账户信息修改），创建测试类进行测试
@RequestMapping("/upload03")
public String upload03(MultipartFile myfile,HttpServletRequest request){
// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
String endpoint = "oss-cn-hangzhou.aliyuncs.com";
//LTAI78XQAZq2s5Rv
//qdyZxR0x4LoUpTVbuyvCGdcrhEyw7H
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
String accessKeyId = "LTAI78XQAZq2s5Rv";
String accessKeySecret = "qdyZxR0x4LoUpTVbuyvCGdcrhEyw7H";
// 填写Bucket名称，例如examplebucket。
String bucketName = "qy151";
//你上传到oss后的名字 会根据日期帮你创建文件夹。
Calendar calendar=Calendar.getInstance();
String objectName =calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+
calendar.get(Calendar.DATE)+"/"+UUID.randomUUID().toString().replace("-","")+
myfile.getOriginalFilename();
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
try {
InputStream inputStream =myfile.getInputStream();
// 创建PutObject请求。
ossClient.putObject(bucketName, objectName, inputStream);
} catch (Exception oe) {
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
//https://qy151.oss-cn-hangzhou.aliyuncs.com/2022/6/10/20d3d7e6b5bb455cb548675501f7270fgdnj.jpg
String url="https://"+bucketName+"."+endpoint+"/"+objectName;
request.setAttribute("imgUrl",url);
return "success.jsp";
}2).将该方法封装到一个工具类中。
public class OSSUtils {
public static String upload(MultipartFile myfile){
// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
String endpoint = "oss-cn-hangzhou.aliyuncs.com";
//LTAI78XQAZq2s5Rv
//qdyZxR0x4LoUpTVbuyvCGdcrhEyw7H
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
String accessKeyId = "****";
String accessKeySecret = "*****";
// 填写Bucket名称，例如examplebucket。
String bucketName = "qy151";
//你上传到oss后的名字 会根据日期帮你创建文件夹。
String objectName =fileName(myfile);
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
try {
InputStream inputStream =myfile.getInputStream();
// 创建PutObject请求。
ossClient.putObject(bucketName, objectName, inputStream);
} catch (Exception oe) {
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
//https://qy151.oss-cn-hangzhou.aliyuncs.com/2022/6/10/20d3d7e6b5bb455cb548675501f7270fgdnj.jpg
String url="https://"+bucketName+"."+endpoint+"/"+objectName;
return url;
}
//获取上传到oss后的名字
private static String fileName(MultipartFile myfile){
Calendar calendar=Calendar.getInstance();
String name=calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+
calendar.get(Calendar.DATE)+"/"+ UUID.randomUUID().toString().replace("-","")+
myfile.getOriginalFilename();
return name;
}
}16.使用elementui+Vue发送异步请求上传文件
16.1页面布局
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/qs.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="app">
<%--action：文件上传的路径--%>
<el-upload
class="avatar-uploader"
action="/upload04"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
imageUrl:"",
},
methods:{
//上传成功后触发的方法
handleAvatarSuccess(res, file) {
this.imageUrl=res.data;
},
//上传前触发的方法
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
})
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
</html>16.2.后端接口
@RequestMapping("/upload04")
@ResponseBody
public Map upload04(MultipartFile file) {
try {
//调用封装到工具类中文件上传的方法，返回文件地址
String url = OSSUtils.upload(file);
Map map = new HashMap();
map.put("code", 2000);
map.put("msg", "上传成功");
map.put("data", url);
return map;
} catch (Exception e) {
e.printStackTrace();
}
HashMap map = new HashMap();
map.put("code", 5000);
map.put("msg", "上传失败");
return map;
}
2780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
