目录
(3)注册DispatcherServlet到web.xml文件上
(2)在controller返回的数据类型变成javabean对象
(1)创建一个类,并实现HandlerInterceptor
一.什么是MVC
MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。
模型-视图-控制器(MVC)是Xerox PARC在二十世纪八十年代为编程语言Smalltalk-80发明的一种软件设计模式,已被广泛使用。后来被推荐为Oracle旗下Sun公司Java EE平台的设计模式,并且受到越来越多的使用ColdFusion和PHP的开发者的欢迎。模型-视图-控制器模式是一个有用的工具箱,它有很多好处,但也有一些缺点。
二.什么是springmvc框架
SpringMVC就是一个Spring内置的MVC框架。 MVC框架,它解决WEB开发中常见的问题 (参数接收、文件上传、表单验证、国际化等等),而且使用简单,与Spring无缝集成。 支持 RESTful风格的URL请求。
三.为什么要使用springmvc框架
基于请求驱动指的就是使用请求-响应模型,框架的目的就是帮助我们简化开发,SpringMVC也是要简化我们日常Web开发。
四.如何使用springmvc框架
(1)创建一个mavan-web工程
用原来的web.xml文件替换现在的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>
(2)引入springmvc依赖
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.15.RELEASE</version>
</dependency>
</dependencies>
(3)注册DispatcherServlet到web.xml文件上
<servlet>
<servlet-name>DispactherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>DispactherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
(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.ykq.controller"/>
</beans>
(5)创建一个controller类
@Controller
public class HelloController {
@RequestMapping(value = "/hello01")
public String hello01(){
System.out.println("=======");
return "hello01.jsp";
}
}
五.springMVC运行流程
1. 客户端发生请求http://localhost:8080/springmvc01/hello01
2. 来到tomcat服务器。
3. springmvc的前端控制器DipatcherServlet接受所有的请求。
4. 查看你的请求地址和哪个@RequestMaping匹配。
5. 执行对应的方法。方法会返回一个字符串。springmvc把该字符串解析为要转发的网页。
6. 把该字符串经过视图解析器拼接。
7. 拿到拼接的地址,找到对应的网页。
8. 渲染该网页给客户
六. 如何在controller接受请求的参数
(1)接受少量的参
(2)接受大量的参
封装一个实体类来接受这些参数
七.处理静态资源
无法加载图片: 原因:springmvc的前端控制器DispatcherSerlvet也把静态资源拦截器。放行静态资源
八.如何把controller数据返回到网页并回显
九.如何使用重定向跳转
@RequestMapping("list5")
public String list5(){
System.out.println("===========");
return "redirect:list.jsp";
}
十.springmvc返回json数据
(1)如何返回json数据
内置一个jar. jackson的jar包
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.2.2</version>
</dependency>
(2)在controller返回的数据类型变成javabean对象
十一.springMVC全局异常处理
(1)创建一个异常类
@ControllerAdvice //表示该为类controller的异常处理类
public class MyExceptinHandle {
@ExceptionHandler(value = RuntimeException.class)
public String error(){
return "error.jsp";
}
@ExceptionHandler(value = Exception.class)
public String error2(){
return "error2.jsp";
}
}
(2)保证springmvc能够扫描到该类
十二.springmvc拦截器
(1)创建一个类,并实现HandlerInterceptor
public class MyInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
System.out.println("经过了该拦截器");
return true;
}
}
(2) 把该类注册到springmvc配置文件上
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**"/>
<!--exclude-mapping:设置不经过该拦截的路径-->
<mvc:exclude-mapping path="/login"/>
<mvc:exclude-mapping path="/css/**"/>
<mvc:exclude-mapping path="/js/**"/>
<mvc:exclude-mapping path="/imgs/**"/>
<bean class="com.wyb.interceptor.LoginInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>
十二.文件上传到本地服务器
(1)因为文件上传的依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
(2) 创建一个页面
<%--
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"/>
<input type="submit" value="提交"/>
</form>
(3)在springmvc配置文件中上传解析器
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--这里的单位为字节10M*1024K*1024-->
<property name="maxUploadSize" value="10485760"/>
</bean>
(4)创建upload01接口方法
@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 "";
}
十三.elementui+vue+axios完成文件上传
(1)页面布局
(2)后台接口
十四.上传到oss阿里云的服务器
(1)创建bucket容器
(2)申请阿里云的密钥
十五. 普通的文件上传到OSS文件服务器
(1)引入阿里云的OSS依赖
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
(2)代码的书写
@Controller
public class Test {
@RequestMapping("upload03")
public String upload03(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名称
String bucketName = "qy151wyb";
//你上传到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();
// 上传文件。
ossClient.putObject(bucketName,objectName,inputStream);
} catch (Exception oe) {
}
finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
String url="https://"+bucketName+"."+endpoint+"/"+objectName;
request.setAttribute("imgurl",url);
return "success.jsp";
}
}
(3) elementui 异步上传OSS服务器
<%--
Created by IntelliJ IDEA.
User: wyb
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="/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>
(4)后端工具
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 = "LTAI78XQAZq2s5Rv";
String accessKeySecret = "qdyZxR0x4LoUpTVbuyvCGdcrhEyw7H";
// 填写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;
}
}
(5) controller接口
@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;
}
十六.保存用户信息和头像
(1)前端的布局
<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">
<el-form label-width="80px" :model="userForm">
<el-form-item label="头像:">
<el-upload
class="avatar-uploader"
action="/uploadAvatar"
: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>
</el-form-item>
<el-form-item label="账号:">
<el-input v-model="userForm.name"></el-input>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="userForm.pwd"></el-input>
</el-form-item>
<el-form-item label="地址:">
<el-input v-model="userForm.address"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
userForm:{},
imageUrl:""
},
methods:{
handleAvatarSuccess(result,file){
this.imageUrl=result.data;
//为表单对象添加头像地址的属性
this.userForm.avatarUrl=this.imageUrl;
},
//提交
onSubmit(){
axios.post("/addUser",this.userForm).then(function(result){
});
},
//上传前触发的方法
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>
(2)后台代码
@Controller
public class UserController {
@RequestMapping("uploadAvatar")
@ResponseBody
public CommonResult uploadAvatar(MultipartFile file) {
try {
String avatar = OSSUtils.upload(file);
return new CommonResult(2000, "上传成功", avatar);
} catch (Exception e) {
e.printStackTrace();
}
return new CommonResult(5000, "上传失败", null);
}
@RequestMapping("/addUser")
@ResponseBody
public CommonResult addUser(@RequestBody User user){
System.out.println(user);
return new CommonResult(2000,"成功",null);
}
}