Spingmvc框架

1.什么是MVC？

mvc就是一套访问后台并作出回显的架构

springMVC它是spring框架的一个分支，该springMVC框架主要完成的功 能是:接收浏览器的请求响应，对数据进行处理，然后返回页面进行显示 可以把它理解为和Servlet干的工作是一样的。

2.什么是SpringMVC框架。

3.为什么要使用springMVC框架?

4.如何使用SpringMVC框架?

创建一个maven-web工程。

4.1创建项目的时候选中Even web 导入jar包 名字是

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-webmvc</artifactId>
  <version>5.2.15.RELEASE</version>
</dependency>

注意: 用原来的web.xml文件替换现在的web.xml文件 因为这个项目的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) 注册DispatcherServlet到web.xml文件上 

<!--就像过滤器一样，每个请求都会经过这    /代表拦截所有的请求  comcat启动时-->
<servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <!--这里的位置springmvc文件表示编译后的路径-->
        <param-value>classpath:springmvc.xml</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>DispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

创建我们的springmvc配置文件

 在创建的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"
       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.hxc"/>
    <!--时间的特殊自解-->
    <mvc:annotation-driven/>
    <!--放行静态资源例如   css  js  img-->
    <mvc:default-servlet-handler/>
    <!--拦截器的配置-->
    <mvc:interceptors><!--可以配置多个拦截器，写多个类-->
        <mvc:interceptor>
            <mvc:mapping path="/**"/><!--拦截所有-->
            <!--放行哪些路径-->
            <mvc:exclude-mapping path="/add2"/><!--这里的/必须加-->
            <mvc:exclude-mapping path="/add3"/>
            <!--自定义的拦截器路径-->
            <bean class="com.hxc.interceptor.MyInterceptor"></bean>
        </mvc:interceptor>
    </mvc:interceptors>
</beans>

5.springmvc框架的流程？

6.springmvc如何接受参数。

在方法的（）中的声明接收的变量类型

7.springmvc如何把数据响应到页面。

0608 使用的项目名0607test2

8. 如何把controller文件下的类中的方法中数据返回到网页并回显。

在方法的（）获取一个HttpSession session

或HttpServletRequest request Model 这里的Medel的作用范围默认HttpServletRequest request 可以把Model的范围改为session 使用方法为 这里的注解加在con注释下

@SessionAttributes(value = {"s4"})//只有叫s4的保存到Model中的才会保存到session中，使用的范围是session

重定向跳转

在方法的返回字符串的内容时加上redirect:

return "redirect:list.jsp"; //当springmvc看到你返回的字符串钟含有redirect:时 它认为你要进行重定向跳转

9. 返回json数据。

返回json数据需要引入新的jar包

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

接口的返回类型为对象类型

在接口前写入注解 @ResponseBody //这个注解的作用是把java对象转换为json对象

这样spring框架会自动把返回的对象转换为json对象（在转换之前把对象放入到util包下的实体类中，这样返回的对象应是util的类，这样写更规范）

10. 全局异常处理类。

6. springmvc的全局异常处理类

全局异常处理类的作用: 当controller发生异常，则有全局异常类来处理并执行相应的处理方法。

(1)如何使用全局异常处理类

[1] 创建一个异常类: @ControllerAdvice注解

写一个跳转的jsp页面

@ControllerAdvice //表示该为类controller的异常处理类

    @ExceptionHandler(value = Exception.class) //当发生Exception就会触发该方法

    public String error2(){

        return "error2.jsp";

    }

}

[2] 保证springmvc能够扫描到该类。这个异常处理类

11. 拦截器。

拦截器拦截的是con控制层的接口，不会拦截jsp页面

如何使用拦截器:

（1）创建一个类，并实现HandlerInterceptor

进入继承的接口重写里面需要返回布尔值的方法

        return true;//true:表示拦截器放行 false：不放行

把该类注册到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>

注意：这里的网页乱问题的解决方法是在xml中配置文件

<!--解决网页输入的值乱码问题-->
<filter>
    <filter-name>enco</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name><!--这里的encoding-->
        <param-value>utf-8</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>enco</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

建议创建一个新的工程，拦截器会拦截接口（Controller包下的类中方法）

12文件上传到本地服务器。

需要引入jar包

<!--文件导入-->
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.4</version>
</dependency>

在springmvc中配置

<!--文件导入-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760"/>
</bean>

 这里的enctype是文件传输表单必写的属性，平时有默认值，现在要改变默认值为multipart/form-data 这里的name属性必写在conn层接的时候需要在方法的（）里用MultipartFile来接 后面的属性名必须跟表单中name一致 表单的提交方式post

这样就能把图片保存到服务器的目标文件夹中

13. 通过ajax上传到本地服务器.

14. 通过elementui-vue上传到本地服务器。

创建一个vue+elementui的页面 使用elementui需要引入js css文件，在vue这个工程里有，还需要在jsp页面写入 引入这些文件，先后顺序有要求

<title>Title</title>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<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>
<script type="text/javascript" src="js/index.js"></script>

使用vue跟elementui写一个jsp页面

注意这里的jsp并没有使用ajax方式进入到con控制层但是返回数据为json格式作用跟ajax相似

使用了json所以在方法前写入@ResponseBody

这里是con控制层的代码

@RequestMapping("bbb")
@ResponseBody
public Map test2(MultipartFile file, HttpServletRequest request)throws Exception{
    System.out.println("111");
    String path = request.getSession().getServletContext().getRealPath("upload");
    File file01=new File(path);
    if (!file01.exists()){
        file01.mkdirs();
    }
    String name1=UUID.randomUUID().toString().replace("-","")+file.getOriginalFilename();
    File t2=new File(path+"/"+name1);
    file.transferTo(t2);
    Map map=new HashMap();
    map.put("code",2000);
    map.put("msg","上传成功");
    //通过访问服务器地址来访问图片.
    map.put("data","http://localhost:8080/TestFule1/upload/"+name1);
    return map;
}

这里注意接收图片时默认值时 file

这里返回路径时记得改tomcat的浏览器的值

15. 上传到阿里云OSS服务器。

上传到oss的代码可以在oss官网获取

下面的方法写成一个公共类这样方便调用上传图片的方法  方法的返回值是阿里云的图片地址的路径

public class Aliyun {
    public static String upload(MultipartFile myfile){
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "***";
        String accessKeySecret = "密钥";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "hxc888";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        //获取当前的时间
        Calendar calendar=Calendar.getInstance();   //需要导包


        String objectName = calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MARCH)+1)+"/"+calendar.get(Calendar.DATE)+"/"+ UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        //String filePath= "C:\\Users\\48157\\Pictures\\Saved Pictures\\1.jpg";
        // 创建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();
            }
        }
        String add="https://"+bucketName+"."+endpoint+"/"+objectName;
        System.out.println(add);
        return add;
    }
   }

这里注意elementui表单头像上传的name值默认是file 需要导入（阿里云）jar包

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

接受的时候用file接收 把阿里的这个方法放在一个公共的类中方便调用，返回值为图片的阿里云地址

16. 通过elementui-vue上传到阿里云oss服务器。

1.写一个上传头像的jsp页面

<%--
  Created by IntelliJ IDEA.
  User: 48157
  Date: 2022/6/11
  Time: 13:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <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>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form label-width="80px" :model="formLabelAlign">
            <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"
                        action="aaa"
                        :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.pwd"></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="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            formLabelAlign:{},
            imageUrl:"",
        },
        methods:{
            <!--上传成功执行的方法-->
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                //console.log(res);
                this.formLabelAlign.path=this.imageUrl;
            },
            //提交按钮
            onSubmit(){
                axios.post("bbb",this.formLabelAlign).then(function (result) {
                })
            },
            beforeAvatarUpload(file) {
            }
        }
    })
</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.写一个接口

package com.hxc.controller;

import com.hxc.util.Aliyun;
import com.hxc.util.CommonResult;
import com.hxc.util.User;
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 Test1 {
    @RequestMapping("aaa")
    @ResponseBody   //把返回的CommonResult对象转为json对象
    public CommonResult test01(MultipartFile file){
        String path = Aliyun.upload(file);    这里的Aliyun是自己写的一个公共类，上面有提到
        return new CommonResult(2000,"上传成功",path);
    }
    @RequestMapping("bbb")
    public void test01(@RequestBody User user){
        System.out.println(user);
    }
}

 注意这里的@RequestBody注解的意思是   前端jsp页面中from表单中（这里需要写一个from中属性的实体类User）返回到接口时是json对象 接的时候用实体类接

这个就是把from表单中的数据返回到java中（this.formLabelAlign）写在axios请求接口的后面