目录
3.3在web.xml文件中注册DispatcherServlet
3.4创建我们的springmvc指定配置文件(springmvc.xml)
8.2在controller返回的数据类型变成javabean对象。
10.1 创建一个类并实现 HanglerInterecptor
1.mvc简介
MVC是一种软件架构的思想,将软件按照模型、视图、控制器来划分M: Model,模型层,指工程中的JavaBean,作用是处理数据
JavaBean分为两类:
一类称为实体类Bean:专门存储业务数据的,如StudentlT user等
一类称为业务处理Bean:指Service或 Dao对象,专门用于处理业务逻辑和数据访问
V: View,视图层,指工程中的html或jsp等页面,作用是与用户进行交互,展示数据
c: Controller,控制层,指工程中的servlet,作用是接收请求和响应浏览器
MVC的工作流程:
用户通过视图层发送请求到服务器,在服务器中请求被Controller接收,Controller调用相应的Model层处理请求,处理完毕将结果返回到Controller,Controller再根据请求处理的结果找到相应的View视图,渲染数据后最终响应给浏览器
2.spring Mvc简介
springMVC它是spring框架的一个分支 ,在 Spring MVC 框架中,Controller 替换 Servlet 来担负控制器的职责,用于接收请求,调用相应的 Model 进行处理,处理器完成业务处理后返回处理结果。Controller 调用相应的 View 并对处理结果进行视图渲染,最终客户端得到响应信息
3.使用spring Mvc
3.1创建一个mavn-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>
3.2引入spring Mvc的依赖
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.15.RELEASE</version>
</dependency>
</dependencies>
3.3在web.xml文件中注册DispatcherServlet
<?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">
<!--默认DispactherServlet加载的springmvc配置文件:
WEB-INF/[servlet-name]-servlet.xml
-->
<servlet>
<servlet-name>DispactherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--指定加载配置文件-->
<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-app>
3.4创建我们的springmvc指定配置文件(springmvc.xml)
<?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"
xmlns:mvc="http://www.springframework.org/schema/mvc"
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 http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--包扫描-->
<context:component-scan base-package="com.tym.controller"/>
<!--开启注解驱动-->
<mvc:annotation-driven/>
<!--放行静态资源-->
<mvc:default-servlet-handler/>
</beans>
注意:如果是默认的则在 WEB-INF下建DisparcherServlet-servlet.xml
3.5创建controller类
@Controller //该注解标记该类为处理层类
public class HelloController {
@RequestMapping(value = "/hello01") //把请求路径映射到该方法上
public String hello01(){
System.out.println("hello");
return "hello01.jsp"; //响应一个页面
}
}
4.controller层如何接收参数
4.1接收少量参数
只需要给定方法的参数,参数必须要求和请求的参数名称一致
4.2接收大量参数(封装一个实体类来接收)
4.3接受日期类型的参数
(1)在时间类型的属性上添加一个注解:@DateTimeFormat(pattern = "yyyy-MM-dd")
(2)在springmvc配置文件上开启注解驱动
<!--开启注解驱动-->
<mvc:annotation-driven/>
4.4发现接受的参数值乱码:只能添加过滤器
(1)自己创建编码过滤器. jdk1.8一定要重写init和destory方法 1.9以后可以不写
(2)springmvc提供了一个编码过滤器.
在web.xml中注册过滤器:
<filter>
<filter-name>encodingfilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<!--指定编码类型-->
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingfilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
5 .处理静态资源
哪些资源为静态资源:css img js html
springmvc的前端控制器DispatcherSerlvet也把静态资源拦截器要放行静态资源 。
<!--放行静态资源-->
<mvc:default-servlet-handler/>
6.如何把controller数据返回到网页并回显
(1)之前我们讲解servlet时,如何把数据保存并可以在网页上获取该数据。
request: 作用范围: 同一个请求内有效。setAttribute(key,value)
session:作用范围: 同一个会话有效,只要会话不关闭会一直有效。setAttribute(key,value)
网页如何获取保存的数据呢:可以使用EL表达式。${scope.key}
(2)在springmvc中如何保存数据到网页上
同一个请求:
@RequestMapping(value = "test1")
public String test1(HttpServletRequest request){
Student student = new Student(1,"张三",1,"郑州",new Date());
//保存到request中 同一个请求
request.setAttribute("s",student);
return "succeed.jsp";//请求转发
}
@RequestMapping(value = "/test3")
public String test3(Model model){
Student student2 = new Student(3,"张三",1,"郑州",new Date());
//可以保存到model中,同一个请求 和request是一样
model.addAttribute("s2",student2);
return "succeed.jsp";
}
同一个会话:
@Controller
@SessionAttributes(value= {"s1"})//设置model的key在session范围
public class StudentController {
@RequestMapping(value = "test2")
public String test2(Model model){
Student student1 = new Student(2,"张三",1,"郑州",new Date());
model.addAttribute("s1",student1);
return "succeed.jsp";
}
}
7.如何使用重定向跳转
在方法的返回字符串的内容时加上redirect:
8.springmvc返回json数据
8.1引入 jackson的jar包
<!--jackson依赖 可以把java对象转换为json对象-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.2.2</version>
</dependency>
8.2在controller返回的数据类型变成javabean对象。
@Controller
public class Student02Controller {
@RequestMapping(value = "test")
//把java对象转换为json对象
@ResponseBody
public List<Student> test(){
List<Student> list = new ArrayList<Student>();
list.add(new Student(1,"张三",1,"郑州",new Date()));
list.add(new Student(2,"张三",1,"郑州",new Date()));
list.add(new Student(3,"张三",1,"郑州",new Date()));
return list;
}
}
8.3解决json数据显示的为毫秒
@DateTimeFormat(pattern = "yyyy-MM-dd")
@JsonFormat(pattern = "yyyy-MM-dd")//转为json格式日期
private Date csDate;
9.springmvc的全局异常处理类
9.1创建一个异常类
//表示该为类controller的异常处理类
@ControllerAdvice
public class MyException {
//当发生Exception就会触发该方法
@ExceptionHandler(value =Exception.class)
@ResponseBody
public Map error(){
Map m =new HashMap();
m.put("msg","错误");
m.put("code",5000);
return m;
}
}
9.2保证springmvc能够扫描到该类。
//包扫描
<context:component-scan base-package="com.tym.controller,com.tym.handler"/>
10.springmvc拦截器
10.1 创建一个类并实现 HanglerInterecptor
public class MyInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
System.out.println("经过了该拦截器");
//true:表示放行 false:不放行
return true;
}
}
10.2把该类注册到springmvc配置文件上
<mvc:interceptors>
<mvc:interceptor>
<!--mapping:哪些路径需要经过拦截器
/**: 表示n层路径
/*:表示一层路径
-->
<mvc:mapping path="/**"/>
<!--exclude-mapping:设置不经过该拦截的路径-->
<mvc:exclude-mapping path="/test"/>
<!--bean表示你自定义的拦截器类路径-->
<bean class="com.tym.interceptor.MyInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>
11.文件上传到本地服务器
11.1普通上传
(1)引文件上传的依赖。
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
(2)创建一个页面
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/6/9
Time: 19:47
To change this template use File | Settings | File Templates.
--%>
<%@ 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="upload2" enctype="multipart/form-data">
<input type="file" name="myFile"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
(3)在springmvc中配置文件上传解析器
<!--
id的名称必须叫multipartResolver
-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--这里的单位为字节10M*1024K*1024-->
<property name="maxUploadSize" value="10485760"/>
</bean>
(3)创建upload2接口方法
@RequestMapping(value = "/upload2")
//注意:MultipartFile 参数名必须和<input type="file" name="myfile"/>中name属性相同
public String upload2(MultipartFile myFile,HttpServletRequest request)throws Exception{
//得到本地服务目录的地址
String path = request.getSession().getServletContext().getRealPath("upload");
System.out.println(path);
//判断该目录是否存在
File file = new File(path);
if (!file.exists()){
file.mkdirs();
}
//设置上传后的文件名称
String fileName =UUID.randomUUID().toString().replace("-","")+
myFile.getOriginalFilename();
File file1 = new File(path+"/"+fileName);
//把myfile转移到目标目录下
myFile.transferTo(file1);
return "";
}
11.2elementui+vue+axios完成文件上传
(1) 页面布局
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/6/9
Time: 15:51
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>
<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>
</head>
<body>
<div id="app">
<el-upload
class="avatar-uploader"
<%--action:文件上传的路径--%>
action="/upload1"
: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>
<script>
var vm=new Vue({
el:"#app",
data:{
imageUrl:"",
},
methods:{
//上传成功后触发的方法
handleAvatarSuccess(res, file) {
this.imageUrl = res.data;
},
//上传前触发的方法
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
},
})
</script>
</body>
</html>
(2)后台接口
@Controller
public class UpLoadController {
@RequestMapping(value = "/upload1")
@ResponseBody
public Map upload1(MultipartFile file, HttpServletRequest request){
try {
//获取上传到服务器的文件夹路径
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 file2 = new File(path+"/"+fileName);
file.transferTo(file2);
Map map = new HashMap();
map.put("code",2000);
map.put("msg","上传成功");
//通过访问服务器地址来访问图片.
map.put("data","http://localhost:8080/upload/"+fileName);
return map;
} catch (IOException e) {
e.printStackTrace();
}
Map map = new HashMap();
map.put("code",5000);
map.put("msg","上传失败");
map.put("data",null);
return map;
}
}
12.上传到oss阿里云的服务器
上传到本地服务器的缺点: 如果搭建集群,导致文件无法在集群中共享。 它的解决方法就是把文件专门上传到一个文件服务器上,这些tomcat服务器都操作同一个文件服务器。
首先注册阿里云账号----->创建bucket----->创建密钥Accesskey
12.1普通文件上传
(1)引入阿里云的OSS依赖
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
(2)创建页面
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/6/9
Time: 19:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form method="post" action="upload2" enctype="multipart/form-data">
<input type="file" name="myFile"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
(3)后台接口(阿里云首页找到产品-->产品下的对象储存OSS-->产品文档--->SDK示例--->java---->上传文件--->简单上传---->上传文件流)
package com.tym.controller;
import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;
@Controller
public class myController {
@RequestMapping(value = "/upload2")
public String upload2(MultipartFile myFile, HttpServletRequest request){
// Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
String endpoint = "oss-cn-hangzhou.aliyuncs.com";
// 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
String accessKeyId = "";//密钥账号
String accessKeySecret = "";//密钥密码
// 填写Bucket名称,例如examplebucket。
String bucketName = "tym-1";
// 填写Object完整路径,完整路径中不能包含Bucket名称,例如exampledir/exampleobject.txt。
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();
// 填写本地文件的完整路径,例如D:\\localpath\\examplefile.txt。
// 如果未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件流。
//String filePath= "C:\\Users\\Administrator\\Pictures\\图片\\01.jpg";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
try {
InputStream inputStream =myFile.getInputStream();
// 创建PutObject请求。
ossClient.putObject(bucketName, objectName, inputStream);
} catch (Exception e) {
e.printStackTrace();
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
String url="http://"+bucketName+"."+endpoint+"/"+objectName;
request.setAttribute("imgUrl",url);
return "succeed.jsp";
}
}
12.2elementui 异步上传OSS服务器
(1)前端页面
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/6/9
Time: 15:51
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>
<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>
</head>
<body>
<div id="app">
<el-upload
class="avatar-uploader"
action="/upload"
: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>
<script>
var vm=new Vue({
el:"#app",
data:{
imageUrl:"",
},
methods:{
handleAvatarSuccess(res, file) {
this.imageUrl = res.data;
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
},
})
</script>
</body>
</html>
(2)封装工具类
package com.tym.utility;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;
import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;
public class OssUtility {
public static String upload(MultipartFile myFile){
// Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
String endpoint = "oss-cn-hangzhou.aliyuncs.com";
// 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
String accessKeyId = "LTAI5tAeCGCG9Q8eMrj1ZDgH";
String accessKeySecret = "KPfDa2uqKIFcZs5nDXx6r3k6oPN4lD";
// 填写Bucket名称,例如examplebucket。
String bucketName = "tym-1";
// 填写Object完整路径,完整路径中不能包含Bucket名称,例如exampledir/exampleobject.txt。
String objectName =fileName(myFile);
// 填写本地文件的完整路径,例如D:\\localpath\\examplefile.txt。
// 如果未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件流。
//String filePath= "C:\\Users\\Administrator\\Pictures\\图片\\01.jpg";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
try {
InputStream inputStream =myFile.getInputStream();
// 创建PutObject请求。
ossClient.putObject(bucketName, objectName, inputStream);
} catch (Exception e) {
e.printStackTrace();
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
String url="http://"+bucketName+"."+endpoint+"/"+objectName;
return url;
}
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;
}
}
(3)后端接口(直接调用工具类)
package com.tym.controller;
import com.tym.utility.CommonResult;
import com.tym.utility.OssUtility;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
@RestController
public class eleController {
@RequestMapping(value = "/upload")
public CommonResult upload(MultipartFile file){
try {
String upload = OssUtility.upload(file);
CommonResult commonResult = new CommonResult(2000,"上传成功",upload);
return commonResult;
} catch (Exception e) {
e.printStackTrace();
}
CommonResult commonResult = new CommonResult(5000,"上传失败",null);
return commonResult;
}
}
13.小知识
@RestController:等价于 @COntroller+@ResponseBody该注解下所有的方法都是返回json数据
@RequestMapping: 把请求路径映射到响应的方法上。@RequestParam(value = "u"):设置你接受的请求参数名。查询参数
@RequestMapping(value = "/",method = RequestMethod.POST)
method:表示该接口接受的请求方式不设置可以接受任意请求方式。
@GetMapping("addUser"):表示只接受get提交方式的请求@RequestBody:把请求的json数据转换为java对象,从前端到后端
@ResponseBody:把java转换为json数据 , 从后端转前端