SpringMVC合集

已于 2022-06-13 08:53:00 修改
阅读量927 收藏
点赞数
分类专栏： java学习 springMvc 文章标签： mvc java
于 2022-06-12 22:27:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51747082/article/details/125249579
版权
本文详细介绍了SpringMVC框架，从概念、特点到实际应用，包括HelloWorld、请求参数处理、数据返回、异常处理、拦截器和文件上传。特别讨论了如何配置web.xml、处理乱码问题、返回JSON数据、全局异常处理以及使用阿里云OSS进行文件上传。
摘要由CSDN通过智能技术生成

目录

一、SpringMVC简介

1、什么是MVC

2、什么是SpringMVC

3、SpringMVC的特点

二、HelloWorld

1.创建maven工程

2.配置web.xml

3.创建springMVC.xml文件进行配置

 4.创建一个Controller类

三、SpringMVC获取请求参数

1.通过控制器方法的形参获取请求参数

2.通过表单大量获取参数

3.发现接受的参数值乱码:---只能添加过滤器

4.接受的参数含有日期类型

5. 处理静态资源

四、controller数据返回到网页并回显

1.定向跳转

2. springmvc返回json数据

（1）内置了一个jar. jackson的jar包

(2) 在controller返回的数据类型 @ResponseBody 作用:把java对象转换为json对象

五. springmvc的全局异常处理类

1、基于配置的异常处理

2、基于注解的异常处理

3. 保证springmvc能够扫描到该类。

六、springmvc拦截器

 1. 把该类注册到springmvc配置文件上。

2、拦截器的三个抽象方法

3、多个拦截器的执行顺序

七、文件上传

1.文件上传的依赖。

2.在springmvc中配置文件上传解析器

3.本地上传

（1）创建一个页面

（2）创建接口方式

4.elementui+vue+axios完成文件上传

(2)后台的接口

5.上传到OSS文件服务器

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

（2）上传文件流

（3）前端

（4）OSSutil类

（5）后端

一、SpringMVC简介

1、什么是MVC

MVC是一种软件架构的思想，将软件按照模型、视图、控制器来划分

M：Model，模型层，指工程中的JavaBean，作用是处理数据

JavaBean分为两类：

  • 一类称为实体类Bean：专门存储业务数据的，如 Student、User 等

  • 一类称为业务处理 Bean：指 Service 或 Dao 对象，专门用于处理业务逻辑和数据访问。

V：View，视图层，指工程中的html或jsp等页面，作用是与用户进行交互，展示数据

C：Controller，控制层，指工程中的servlet，作用是接收请求和响应浏览器

MVC的工作流程：用户通过视图层发送请求到服务器，在服务器中请求被Controller接收，Controller调用相应的Model层处理请求，处理完毕将结果返回到Controller，Controller再根据请求处理的结果找到相应的View视图，渲染数据后最终响应给浏览器

2、什么是SpringMVC

SpringMVC是Spring的一个后续产品，是Spring的一个子项目

SpringMVC 是 Spring 为表述层开发提供的一整套完备的解决方案。在表述层框架历经 Strust、WebWork、Strust2 等诸多产品的历代更迭之后，目前业界普遍选择了 SpringMVC 作为 Java EE 项目表述层开发的首选方案。

注：三层架构分为表述层（或表示层）、业务逻辑层、数据访问层，表述层表示前台页面和后台servlet

3、SpringMVC的特点

  • Spring 家族原生产品，与 IOC 容器等基础设施无缝对接

  • 基于原生的Servlet，通过了功能强大的前端控制器DispatcherServlet，对请求和响应进行统一处理

  • 表述层各细分领域需要解决的问题全方位覆盖，提供全面解决方案

  • 代码清新简洁，大幅度提升开发效率

  • 内部组件化程度高，可插拔式组件即插即用，想要什么功能配置相应组件即可

  • 性能卓著，尤其适合现代大型、超大型互联网项目要求

二、HelloWorld

1.创建maven工程

  • 添加web模块

  • 引入依赖

 <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>
    <!--springmvc-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.15.RELEASE</version>
    </dependency>

    <!--jackson依赖-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.2.2</version>
    </dependency>

    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.24</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
      <groupId>com.aliyun.oss</groupId>
      <artifactId>aliyun-sdk-oss</artifactId>
      <version>3.10.2</version>
    </dependency>

由于 Maven 的传递性，我们不必将所有需要的包全部配置依赖，而是配置最顶端的依赖，其他靠传递性导入。

2.配置web.xml

注册DispatcherServlet到web.xml文件。tomcat启动时会加载servlet

<?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">


  <!--编码过滤器-->
  <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>
  
 <!--默认DispactherServlet加载的springmvc配置文件:WEB-INF/[servlet-name]-servlet.xml
        能不能你指定加载的配置文件呢:可以。
    -->
  <!--dispatcherServlet-->
  <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>
</web-app>

3.创建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.gjh.controller"/>
    <mvc:annotation-driven/>
    <mvc:default-servlet-handler/>

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--这里的单位为字节10M*1024K*1024-->
        <property name="maxUploadSize" value="10485760"/>
    </bean>

</beans>

 4.创建一个Controller类

        创建一个类，在类上加上@Controller  并且在方法上加上@RequestMapping注解

@Controller //该注解标记该类为处理层类---类似@WebServlet
public class HelloController {

    @RequestMapping(value = "/hello01") //把请求路径映射到该方法上。
    public String hello01(){
        System.out.println("业务处理");

        return "hello01.jsp"; //响应一个页面
    }
}

三、SpringMVC获取请求参数

1.通过控制器方法的形参获取请求参数

<a th:href="@{/hello01(username='admin',password=123456)}">测试获取请求参数-->/hello01</a><br>
@RequestMapping("/hello01")
public String testParam(String username, String password){
    System.out.println("username:"+username+",password:"+password);
    return "success";
}

2.通过表单大量获取参数

<form th:action="@{/hello01}" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    性别：<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br>
    年龄：<input type="text" name="age"><br>
    邮箱：<input type="text" name="email"><br>
    <input type="submit">
</form>
@RequestMapping("/hello01")
public String testPOJO(User user){
    System.out.println(user);
    return "success";
}
//最终结果-->User{id=null, username='张三', password='123', age=23, sex='男', email='123@qq.com'}

3.发现接受的参数值乱码:---只能添加过滤器

<filter>
    <filter-name>CharacterEncodingFilter</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>
    <init-param>
        <param-name>forceResponseEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

MVC提供了一个编码过滤器

SpringMVC中处理编码的过滤器一定要配置到其他过滤器之前，否则无效

4.接受的参数含有日期类型

在时间类型的属性上添加一个注解:@DateTimeFormat(pattern = "yyyy-MM-dd")

    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date birthday;

在springmvc配置文件上开启注解驱动

 <!--开启注解驱动-->
    <mvc:annotation-driven/>

5. 处理静态资源

无法加载图片: 原因:springmvc的前端控制器DispatcherSerlvet也把静态资源拦截器。

放行静态资源

    <!--放行静态资源:哪些资源为静态资源。css img js html-->
    <mvc:default-servlet-handler/>

四、controller数据返回到网页并回显

1.定向跳转

@Controller
public class HelloController01 {
    @RequestMapping("/list")
    public String list(HttpServletRequest request){
          System.out.println("!!!!!!!!!!!!!!!!!");
        return "list.jsp"; //转发
    }
}

2. springmvc返回json数据

异步请求时，ajax请求时返回json数据

（1）内置了一个jar. jackson的jar包

 <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.2.2</version>
    </dependency>

(2) 在controller返回的数据类型 @ResponseBody 作用:把java对象转换为json对象

    @RequestMapping("json01")
    @ResponseBody 
    public List<Student> json01(){ 
         //这里返回的类型为java对象。 之前都是返回字符串
        List<Student> list=new ArrayList<Student>();
        list.add(new Student(1,"aaaa","111111",new Date()));
        list.add(new Student(2,"bbbb","222222",new Date()));
        list.add(new Student(3,"cccc","333333",new Date()));
        list.add(new Student(4,"dddd","444444",new Date()));
        return list; //当中json
    }

五. springmvc的全局异常处理类

1、基于配置的异常处理

SpringMVC提供了一个处理控制器方法执行过程中所出现的异常的接口：HandlerExceptionResolver

HandlerExceptionResolver接口的实现类有：DefaultHandlerExceptionResolver和SimpleMappingExceptionResolver

SpringMVC提供了自定义的异常处理器SimpleMappingExceptionResolver，使用方式：

<bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
    <property name="exceptionMappings">
        <props>
        	<!--
        		properties的键表示处理器方法执行过程中出现的异常
        		properties的值表示若出现指定异常时，设置一个新的视图名称，跳转到指定页面
        	-->
            <prop key="java.lang.ArithmeticException">error</prop>
        </props>
    </property>
    <!--
    	exceptionAttribute属性设置一个属性名，将出现的异常信息在请求域中进行共享
    -->
    <property name="exceptionAttribute" value="ex"></property>
</bean>

2、基于注解的异常处理

//@ControllerAdvice将当前类标识为异常处理的组件
@ControllerAdvice
public class ExceptionController {

    //@ExceptionHandler用于设置所标识方法处理的异常
    @ExceptionHandler(ArithmeticException.class)
    //ex表示当前请求处理中出现的异常对象
    public String handleArithmeticException(Exception ex, Model model){
        model.addAttribute("ex", ex);
        return "error";
    }

}
@ControllerAdvice //表示该为类controller的异常处理类
public class MyExceptinHandle {

     @ExceptionHandler(value = RuntimeException.class) //当发生RuntimeException就会触发该方法
     public String error(){
         return "error.jsp";
     }

    @ExceptionHandler(value = Exception.class) //当发生Exception就会触发该方法
    public String error2(){
        return "error2.jsp";
    }
}

3. 保证springmvc能够扫描到该类。

<context:component-scan base-package="com.gjh.controller"/>

六、springmvc拦截器

SpringMVC中的拦截器用于拦截控制器方法的执行

SpringMVC中的拦截器需要实现HandlerInterceptor

SpringMVC的拦截器必须在SpringMVC的配置文件中进行配置：

 1. 把该类注册到springmvc配置文件上。

<!--拦截器的配置-->
    <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>

以上配置方式可以通过ref或bean标签设置拦截器，通过mvc:mapping设置需要拦截的请求，通过mvc:exclude-mapping设置需要排除的请求，即不需要拦截的请求

2、拦截器的三个抽象方法

SpringMVC中的拦截器有三个抽象方法：

preHandle：控制器方法执行之前执行preHandle()，其boolean类型的返回值表示是否拦截或放行，返回true为放行，即调用控制器方法；返回false表示拦截，即不调用控制器方法

postHandle：控制器方法执行之后执行postHandle()

afterComplation：处理完视图和模型数据，渲染视图完毕之后执行afterComplation()

3、多个拦截器的执行顺序

a>若每个拦截器的preHandle()都返回true

此时多个拦截器的执行顺序和拦截器在SpringMVC的配置文件的配置顺序有关：

preHandle()会按照配置的顺序执行，而postHandle()和afterComplation()会按照配置的反序执行

b>若某个拦截器的preHandle()返回了false

preHandle()返回false和它之前的拦截器的preHandle()都会执行，postHandle()都不执行，返回false的拦截器之前的拦截器的afterComplation()会执行

七、文件上传

1.文件上传的依赖。

    <!--文件上传的依赖-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>

2.在springmvc中配置文件上传解析器

   <!--
     id的名称必须叫multipartResolver
     -->
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
          <!--这里的单位为字节10M*1024K*1024-->
          <property name="maxUploadSize" value="10485760"/>
     </bean>

3.本地上传

（1）创建一个页面

<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>

（2）创建接口方式

    //注意: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 "";
    }

4.elementui+vue+axios完成文件上传

（1）创建一个页面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/6/10
  Time: 13:52
  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">
    <el-upload
            class="avatar-uploader"
            action="sc01"
            :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>
<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>

<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 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.gjh.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@Controller
public class UserController {
    @RequestMapping("sc01")
    @ResponseBody
    public Map upload02(MultipartFile file, HttpServletRequest request) {
        try {
            String path = request.getSession().getServletContext().getRealPath("upload");

            File file1 = new File(path);
            if (!file1.exists()) {
                file1.mkdirs();

            }
            System.out.println(path);
            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/springMVC09/upload/"+filename);
            return map;
        }catch (Exception e){
            e.printStackTrace();
        }
        Map map=new HashMap();
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }
}

注意本地地址根据自己的地址进行修改

5.上传到OSS文件服务器

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

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>

（2）上传文件流

@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 = " ";
        String accessKeySecret = " ";
        // 填写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";
    }

（3）前端

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/6/11
  Time: 13:49
  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>
<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>
<div id="app">
    <el-form  label-width="80px" :model="formLabelAlign">
        <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="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
            <el-input v-model="formLabelAlign.password"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
            <el-input v-model="formLabelAlign.address"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">立即创建</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            formLabelAlign:{},
            imageUrl:"",
        },
        methods:{
            submitForm() {
                axios.post("addUser",this.formLabelAlign).then(function (res){

                })
            },
            resetForm(formLabelAlign) {
                this.$refs[formLabelAlign].resetFields();
            },


            handleAvatarSuccess(result,file){
                this.imageUrl=result.data;
                //为表单对象添加头像地址的属性
                this.formLabelAlign.avatarUrl=this.imageUrl;
            },
            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>

（4）OSSutil类

package com.gjh.until;

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 OSSutil {
    public static String upload(MultipartFile file){
// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "你自己的";
        String accessKeySecret = "你自己的";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "你自己的";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        String objectName = fileName(file);
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        try {
            InputStream inputStream = file.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception ce) {
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url = "http://" +bucketName +"." +endpoint+"/" +objectName;
        return url;
    }
    private static String fileName(MultipartFile file){
        Calendar calendar = Calendar.getInstance();
        String name = calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+calendar.get(Calendar.DATE)+"/"+
                UUID.randomUUID().toString().replace("-", "") +
                file.getOriginalFilename();
        return name;
    }
}

（5）后端

package com.gjh.controller;

import com.gjh.entity.User;
import com.gjh.until.CommonResult;
import com.gjh.until.OSSutil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class Usercontroller {
    @RequestMapping("uploadAvatar")
    @ResponseBody
    public CommonResult uploadAvatar(MultipartFile file){
        try {
            String avatar = OSSutil.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);
    }


}

Hu_下笔
关注
专栏目录
springmvc思维导图
07-25
springmvc的概念、springmvc的运行原理（前端控制器、处理器映射器、处理器适配器、处理器、视图解析器）、同步请求的方式（ModelAndView、String、无返回值、默认的绑定值）、异步请求的注解、请求参数的封装（简单...
springMVC学习
03-11
SpringMVC 学习指南 SpringMVC 是 Spring 框架中的一个 web 组件，它提供了丰富的功能来构建稳健的 web 应用。 SpringMVC 的核心思想是基于每个逻辑和功能是高可配置的架构和设计的。下面是 SpringMVC 的学习指南：...
SpringMVC基础
05-15
SpringMVC基础 SpringMVC是基于MVC设计理念的优秀WEB框架，是目前最主流的MVC框架之一。SpringMVC通过一套注解，可以让普通的JAVA类成为controller控制器，无需继承Servlet，实现了控制层和Servlet之间的解耦。...
SpringMVC 基础知识
12-20
【SpringMVC基础知识详解】 SpringMVC是Spring框架的一个核心模块，主要负责处理Web应用程序的请求和响应。它遵循Model-View-Controller（MVC）设计模式，将业务逻辑、数据处理和用户界面分离，提高了代码的可维护...
HashMap为什么线程不安全？
rnnf_yyds的博客
11-03 522
HashMap底层是基于数组 + 链表（在 Java 8 以后，当链表长度超过一定阈值时会转换为红黑树）的数据结构。在多线程环境下，当多个线程同时对HashMap进行put操作时，可下面这种情况：假设两个线程 A 和 B 同时执行put操作，它们计算出的插入位置相同（假设为index线程 A 先获取到了当前index位置的节点，在它还没来得及将新节点插入链表（或树）时，线程 B 也获取到了这个位置的节点。
[自用，更新自day5]瑞吉外卖代码及笔记
lapiii的博客
11-01 1022
当使用ThreadLocal维护变量时，ThreadLocal为每个使用该变量的线程提供独立的变量副本，所以每一个线程都可以独立地改变自己的副本，而不会影响其它线程所对应的副本。Mybatis Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。因为在分页查询的Dish的records(菜品记录中)，只有这个菜品所属的categoryId，但是我们需要分页的时候展示的是菜品名字。
spring循环依赖解决方式
qq_36400213的博客
11-04 597
字段注入和setter注入则提供了更多的灵活性，但需要更谨慎地管理对象的状态。方法注入和注解注入则适用于特定的场景。在Spring框架中，依赖注入（Dependency Injection，DI）是一种实现控制反转（Inversion of Control，IoC）的机制，用于将对象的依赖关系自动注入到对象中。这种方式不如构造器注入严格，但比字段注入更灵活，因为它可以在不创建新实例的情况下改变对象的依赖。这种方式是推荐的，因为它可以保证对象在创建时就处于完全初始化的状态，并且可以使得bean不可变。
SpringSession源码分析
lkr_lkr的博客
11-01 392
默认对常规Session的理解和使用，如何使用Set-Cookie。
【Java知识】Java基础-对象排序的实现
wendao76的专栏
11-04 209
方法，并且需要提供一个比较器（Comparator）来定义对象的排序逻辑。这些示例展示了如何在Java中对对象进行排序，无论是使用列表还是数组，都可以灵活地使用比较器来定义排序规则。在Java中，对象的排序通常涉及到使用。
苍穹外卖Bug集合
最新发布
a1241436267的博客
11-05 311
以上报错是因为maven和jdk版本不符合，需要将jdk改成17，mavne改成3.9.9。
JavaScript的第十一天
全栈学习ing
10-31 763
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
Java学习Day54：初遇萍萍(权限控制)
weixin_51721783的博客
10-29 1298
web.xml：在health_backend工程的web.xml文件中配置用于整合Spring Security框架的过滤器DelegatingFilterProxy。
大数据新视界 -- 大数据大厂之 Impala 性能优化：解锁大数据分析的速度密码（上）（1/30）
【青云交】荣登原力全国前三，作者周榜前四，苏州均榜首，全网领军人物前列。
11-03 906
本文围绕 Impala 性能优化展开，阐述其对大数据分析效率和企业决策的关键意义，剖析数据规模与复杂度、查询优化等挑战。介绍数据存储（分区、压缩）和查询（索引、语句重塑）优化策略，并通过电商和金融案例展示效果。对比 Impala 与 Hive、Spark SQL 的优劣，强调 Impala 在 OLAP 查询的优势。还介绍了可视化工具对优化的助力。鼓励读者分享 Impala 使用中的优化经验，同时预告下一篇将深入探讨数据存储分区相关内容。
Qt自定义控件：汽车速度表
weixin_44788175的博客
11-02 313
从外到内进行绘制，初始化画布，画渐变色外圈，画刻度，写刻度文字，画指针，画扇形，画内圈渐变色，画黑色内圈，写当前值。这里难点使用正弦和余弦计算绘制刻度字。
JAVA学习-练习试用Java实现“数组排序”
weixin_69763181的博客
11-03 247
这个程序首先导入了'java.util.Arrays'和'java.util.Scanner'，然后定义了一个'main'方法。程序使用'Scanner'类来读取用户的输入，并将其分割成一个字符串数组。然后，它将字符串数组转换成整数数组，并使用'Arrays.sort'方法对整数数组进行排序。以下是一个Java程序，它使用内置的'Arrays.sort'方法对用户输入的整数数组进行排序。编写一个Java程序，对用户输入的整数数组进行排序（可以使用内置的Arrays.sort方法，也可以自己实现排序算法）。
第九天: 深入探索C语言中的动态内存管理
qq_57484399的博客
10-31 363
简单来说，就是C语言没有直接提供给我们的数据类型，但是C语言给我们留了一个后门，允许我们用一些特殊的关键字来定义自己的数据类型。枚举类型允许我们定义一组相关的常量，这些常量就是枚举类型的取值。听起来有点绕？我给你举个例子。比如说，我们要表示一周的七天，我们可以用字符串来表示，但处理起来比较麻烦。用整数表示就简单多了，星期一是1，星期二是2，以此类推。这样的变量就可以定义为枚举类型，它的取值范围就是1到7。首先，我们用struct关键字来定义一个结构体。
数组排序简介-归并排序（Merge Sort）
Runing_WoNiu的博客
10-31 287
采用经典的分治策略，先递归地将当前数组平均分成两半，然后将有序数组两两合并，最终合并成一个有序数组。
SpringBoot整合minio服务
weixin_74261199的博客
11-01 434
这里我选用的是JDK1.8 + SpringBoot2.3.12.RELEASE。
深入理解SpringMvc框架
"本次讲解的主题是SpringMvc，它是一个用于构建Web应用程序的Java框架，尤其在企业级开发中广泛使用。课程将深入讲解SpringMvc的核心概念和技术，帮助开发者提升技能水平。课程涉及到的关键库包括了SpringMvc的相关...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值