springMVC框架

目录

一.什么是MVC

二.什么是springmvc框架

三.为什么要使用springmvc框架

四.如何使用springmvc框架

(1)创建一个mavan-web工程

(2)引入springmvc依赖

(3)注册DispatcherServlet到web.xml文件上

(4)创建springmvc的配置文件

(5)创建一个controller类

五.springMVC运行流程

六. 如何在controller接受请求的参数

(1)接受少量的参

(2)接受大量的参

 七.处理静态资源

 八.如何把controller数据返回到网页并回显

 九.如何使用重定向跳转

十.springmvc返回json数据

(1)如何返回json数据

(2)在controller返回的数据类型变成javabean对象

 十一.springMVC全局异常处理

(1)创建一个异常类

(2)保证springmvc能够扫描到该类

 十二.springmvc拦截器

(1)创建一个类,并实现HandlerInterceptor

(2) 把该类注册到springmvc配置文件上

十二.文件上传到本地服务器

(1)因为文件上传的依赖

(2) 创建一个页面

(3)在springmvc配置文件中上传解析器

(4)创建upload01接口方法

十三.elementui+vue+axios完成文件上传

(1)页面布局

 (2)后台接口

  十四.上传到oss阿里云的服务器

(1)创建bucket容器

  (2)申请阿里云的密钥

 十五. 普通的文件上传到OSS文件服务器

(1)引入阿里云的OSS依赖

(2)代码的书写

(3) elementui 异步上传OSS服务器

(4)后端工具

(5) controller接口

十六.保存用户信息和头像

(1)前端的布局

(2)后台代码


一.什么是MVC

MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图饼图来表示。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。 

模型-视图-控制器(MVC)是Xerox PARC在二十世纪八十年代为编程语言Smalltalk-80发明的一种软件设计模式,已被广泛使用。后来被推荐为Oracle旗下Sun公司Java EE平台的设计模式,并且受到越来越多的使用ColdFusionPHP的开发者的欢迎。模型-视图-控制器模式是一个有用的工具箱,它有很多好处,但也有一些缺点。

二.什么是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);
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值