SpringMVC(3)

随着我们互联网的发展，我们的用户从直接访问网站获取信息。变为希望将自己本地的资源发送给服务器，让服务器提供给其他人使用或者查看。还有部分的用户希望可以将本地的资源上传服务器存储起来，然后再其他的电脑中可以通过访问网站来获取上传的资源，这样用户就可以打破空间的局限性，再任何时候只要有网有电脑就可以对自己的资源进行操作，比如:云存储，云编辑

1、如何在页面中显示一个按钮
用户可以点击该按钮后选择本地要上传的文件在页面中使用input标签，type值设置为”file”即可

2、确定上传请求的发送方式
上传成功后的响应结果在当前页面显示，使用ajax请求来完成资源的发送

3、上传请求的请求数据及其数据格式
请求数据:
上传的文件本身普通数据:用户名，Id，密码等，建议上传功能中不携带除上传资源以外的数据
数据格式:
传统的请求中，请求数据是以键值对的格式来发送给后台服务器的，但是在上传请求中，没有任何一个键可以描述上次的数据，因为数据本身是非常大的键就相当于一个变量，我们使用一个变量存储一个10g的电影显然是不可能 的。在上传请求中，将请求数据以二进制流的方式发送给服务器。

4、在ajax中如何发送二进制流数据给服务器
① 创建FormData的对象，将请求数据存储到该对象中发送
② 将processData属性的值设置为false，告诉浏览器发送对象请求数据
③ 将contentType属性的值设置为false，设置请求数据的类型为二进制类型。
④ 正常发送ajax即可

5、上传成功后后台服务器应该响应什么结果给浏览器
并且浏览器如何处理后台服务器处理完成后，响应一个json对象给浏览器，示例格式如下:
{ state:true,msg:“服务器繁忙”,url:”上传成功的资源的请求地址”}

6、 文件上传依赖的jar

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

7、在springmvc.xml中 配置文件上传组件

<!--文件上传解析组件
   id必须为multipartResolver
   springmvc默认使用该id找该组件
   文件上传的value=1024*1024*2=2097152
   -->
    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--<property name="maxUploadSize" value="2097152"></property>-->
    </bean>

项目前端页面效果展现

1、文件的上传

1、准备用户表

项目结构

2、接下来准备配置文件(重要!!!)

（1）导入依赖jar

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

    <!--跨服务文件上传依赖-->
    <dependency>
      <groupId>com.sun.jersey</groupId>
      <artifactId>jersey-client</artifactId>
      <version>1.19</version>
    </dependency>

（1）log4j2.xml

<?xml version="1.0" encoding="UTF-8"?>
<Configuration status="INFO">
    <Appenders>
        <Console name="Console" target="SYSTEM_ERR">
            <PatternLayout pattern="%d{YYYY-MM-dd HH:mm:ss} [%t] %-5p %c{1}:%L - %msg%n" />
        </Console>
    </Appenders>
    <Loggers>
        <Root level="INFO">
            <AppenderRef ref="Console" />
        </Root>
    </Loggers>
</Configuration>

（2）jdbc.properties

jdbc_driver=com.mysql.cj.jdbc.Driver
jdbc_url=jdbc:mysql://127.0.0.1:3306/mydb?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
jdbc_username=root
jdbc_password=root

（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:p="http://www.springframework.org/schema/p"
       xmlns:c="http://www.springframework.org/schema/c"
       xmlns:util="http://www.springframework.org/schema/util"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       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/util
       http://www.springframework.org/schema/util/spring-util.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd
">
    <!--扫描controller-->
    <context:component-scan base-package="com.wml.controller"></context:component-scan>
    <!--
    这里配置三大组件
    处理器映射器
    处理器适配器
    视图解析器
    -->

    <mvc:annotation-driven />
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

    </bean>
    <!--配置静态资源放行-->
    <mvc:resources mapping="/js/**" location="/js/"></mvc:resources>
    <mvc:resources mapping="/upload/**" location="/upload/"></mvc:resources>
    <!--<mvc:resources mapping="/html/**" location="/html/"></mvc:resources>-->
    <!--<mvc:resources mapping="/css/**" location="/css/"></mvc:resources>-->
    <!--<mvc:resources mapping="/img/**" location="/img/"></mvc:resources>-->
    <!--<mvc:resources mapping="/static/**" location="/static/"></mvc:resources>-->

    <!--文件上传解析组件
   id必须为multipartResolver
   springmvc默认使用该id找该组件
   文件上传的value=1024*1024*2=2097152
   -->
    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--<property name="maxUploadSize" value="2097152"></property>-->
    </bean>
</beans>

（4）applicationContext.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:p="http://www.springframework.org/schema/p"
       xmlns:c="http://www.springframework.org/schema/c"
       xmlns:util="http://www.springframework.org/schema/util"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       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/util
       http://www.springframework.org/schema/util/spring-util.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd
">
    <!--1、加载propertise配置文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!--2、包扫描 仅仅扫描service层-->
    <context:component-scan base-package="com.wml.service"/>
    <!--3、配置德鲁伊连接池（数据源）-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <!--四要素-->
        <property name="driverClassName" value="${jdbc_driver}"></property>
        <property name="url" value="${jdbc_url}"></property>
        <property name="username" value="${jdbc_username}"></property>
        <property name="password" value="${jdbc_password}"></property>
    </bean>
    <!--4、SqlSessionFactoryBean-->
    <bean name="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--配置数据源 name:属性名  ref:德鲁伊连接池ID-->
        <property name="dataSource" ref="dataSource"></property>
        <!--实体类别名包扫描-->
        <property name="typeAliasesPackage" value="com.wml.pojo"></property>
    </bean>
    <!--5、sqlSession获取***Mapper-->
    <!--MapperScanner mapper扫描仪  生成所有Mapper对象并放入容器中-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--配置SQLSessionFactory  注入factory-->
        <property name="sqlSessionFactoryBeanName" value="factory"></property>
        <!--扫描所有的mapper接口和映射文件-->
        <property name="basePackage" value="com.wml.mapper"></property>
    </bean>
    <!--出错位置1：将transactionManager写成transactionMapping-->
    <!--6、事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>
    <!--开启事务注解-->
    <tx:annotation-driven transaction-manager="transactionManager"></tx:annotation-driven>
</beans>

（5）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">

  <!-- 1.配置前端控制器DispatcherServlet -->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--两个初始化参数：（1）-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!-- 2.配置：防止乱码的过滤器CharacterEncodingFilter -->
  <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <!--初识化参数：（2）-->
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!-- 3.向ServletContext中添加Spring核心配置文件的位置 (希望项目启动的时候，立刻加载ApplicationContext-*.xml配置文件,在Application应用对象的初始化参数里加载)-->

  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>

  <!-- 4，spring核心容器配置  配置监听器，监听bean对象的创建 -->
  <!--通过监听器，监听JAVAWEB项目中的ServletContext创建的时候，就创建一个spring的容器，并放入ServletContext对象中-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
</web-app>

3、index.jsp（保存完整player信息进入数据库）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--进度条样式--%>
        <style>
            .progress {
                width: 200px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 10px;<%--角弧度--%>
                margin: 10px 0px;
                overflow: hidden;
            }
            /* 初始状态设置进度条宽度为0px */
            .progress > div {
                width: 0px;
                height: 100%;
                background-color: yellowgreen;
                transition: all .3s ease;
            }
        </style>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" >
        //页面加载函数
        $(function(){
            //获取a标签
            $("#uploadFile").click(function(){
                    /*alert("上传文件")*/
                //1、获取上传文件
                    /*console.log($("#photo")[0].files[0])*/
                //用一个对象接受文件
                var photoFile = $("#photo")[0].files[0]

                if(photoFile == undefined){
                    alert("你还未选中文件")
                    return;
                }
                    /*alert("文件可以上传")*/

                //将文件装入FormData对象
                var formdata = new FormData();
                formdata.append("headPhoto",photoFile)

                //2、通过Ajax向后台发送文件
                /*在ajax中如何发送二进制流数据给服务器
                1 创建FormData的对象，将请求数据存储到该对象中发送
                2 将processData属性的值设置为false，告诉浏览器发送对象请求数据
                3 将contentType属性的值设置为false，设置请求数据的类型为二进制类型。
                4 正常发送ajax即可*/
                $.ajax({
                    type:"post",
                    data:formdata,
                    url:"fileUpload2.do",
                    processData:false,
                    contentType:false,
                    /*定义响应成功之后的方法*/
                    success:function(result){
                        //3、接受后台响应的信息
                        //console.log(result)
                        alert(result.message)
                        //4、图片回显
                        /*$("#headImg").attr("src",result.newFileName);*/
                        $("#headImg").attr("src","http://192.168.1.6:8090/upload/"+result.newFileName);
                        //将文件类型和文件名放入form表单
                        $("#photoInput").val(result.newFileName);
                        $("#filetypeInput").val(result.filetype);
                    },
                    /*监听进度条*/
                    xhr: function() {
                        var xhr = new XMLHttpRequest();
                        //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                        xhr.upload.addEventListener('progress', function (e) {
                            console.log(e);
                            //loaded代表上传了多少
                            //total代表总数为多少
                            var progressRate = (e.loaded / e.total) * 100 + '%';

                            //通过设置进度条的宽度达到效果
                            $('.progress > div').css('width', progressRate);
                        })
                        return xhr;
                    }
                })
            })
        })
    </script>
    <title>Title</title>
</head>
<body>
    <form action="addPlayer" method="get">
        <p>账号：<input type="text" name="name"></p>
        <p>密码：<input type="text" name="password"></p>
        <p>昵称：<input type="text" name="nickname"></p>
        <p>头像：
            <br/>
            <input id="photo" type="file">
            <br/>
            <%--图片回显--%>
            <img id="headImg" style="width: 250px;height: 250px"
                    alt="你暂时还未上传图片">
            <br/>
            <%--进度条--%>
            <div class="progress">
                <div></div>
            </div>
            <a id="uploadFile" href="javascript:void(0)">立即上传</a>
            <%--使用隐藏的输入框存储文件名称和文件类型--%>
           <input id="photoInput" type="hidden" name="photo">
           <input  id="filetypeInput" type="hidden" name="filetype">
        </p>
        <p><input type="submit" value="注册"></p>
    </form>
</body>
</html>

4、FileController01、FileController02

文件上传中的几个问题

[1]

1、 中文文件名编码问题:
已经通过过滤器解决
2 、文件位置存储问题
放在当前项目下,作为静态资源,这样可以通过URL访问

/*1、指定文件存储目录为我们项目部署环境下的upload目录*/
        String realPath = req.getServletContext().getRealPath("/upload");
             //System.out.println(realPath);
             //File dir = new File("f:/imgs");
        File dir = new File(realPath);
        //如果不存在则创建目录
        if(!dir.exists()){   //exists:目标存在 存在
            dir.mkdir();     //mkdir:创建目录 创建文件夹 创建路径 建立目录
        }

FileController01

[2]

3、 文件名冲突问题
使用UUID对文件名进行重命名

       /*4、避免文件名冲突，使用UUID替换文件名*/
        String uuid = UUID.randomUUID().toString();
        /*3、获取拓展名*/
        String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
        String newFileName = uuid.concat(extendsName);
        //String newFileName = uuid.conca(extendsName);//获取新的文件名
        //或者String newFileName = uuid+extendsName;
        File file = new File(dir,newFileName);//文件存储位置

[3]

4 、控制文件类型

 /*5、（控制文件类型）判断文件类型*/
        if(!extendsName.equals(".jpeg")){
            //map.put("error","文件类型必须是.jpeg");
            map.put("message","文件类型必须是.jpeg");
            return map;
        }

5、 控制文件大小

 /*6、（控制文件大小）判断文件大小*/
        if(headPhoto.getSize()>1024*1024*2){
            map.put("message","文件大小不能超过2M");
            return map;
        }

[4]

通过文件上传解析组件控制
但是会出现异常,后期可以可以配置一个异常解析器解决

 <!--文件上传解析组件
    id必须为multipartResolver
    springmvc默认使用该id找该组件
    -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置文件大小-->
        <property name="maxUploadSizePerFile" value="10"></property>
    </bean>

[5]

6 、上传图片回显问题(后台已经将图片的文件名响应给浏览器)

//3、接受后台响应的信息
                        //console.log(result)
                        alert(result.message)
                        //4、图片回显
                        /*$("#headImg").attr("src",result.newFileName);*/
                        $("#headImg").attr("src","http://192.168.1.6:8090/upload/"+result.newFileName);
 <%--.............................................................--%>
 <%--图片回显--%>
            <img id="headImg" style="width: 250px;height: 250px"
                    alt="你暂时还未上传图片">
            <br/>

[6]

7、 进度条问题
https://www.cnblogs.com/wuyu1787/p/8919588.html

<%--进度条样式--%>
        <style>
            .progress {
                width: 200px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 10px;<%--角弧度--%>
                margin: 10px 0px;
                overflow: hidden;
            }
            /* 初始状态设置进度条宽度为0px */
            .progress > div {
                width: 0px;
                height: 100%;
                background-color: yellowgreen;
                transition: all .3s ease;
            }
        </style>
<%--................................................................--%>
/*监听进度条*/
                    xhr: function() {
                        var xhr = new XMLHttpRequest();
                        //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                        xhr.upload.addEventListener('progress', function (e) {
                            console.log(e);
                            //loaded代表上传了多少
                            //total代表总数为多少
                            var progressRate = (e.loaded / e.total) * 100 + '%';

                            //通过设置进度条的宽度达到效果
                            $('.progress > div').css('width', progressRate);
                        })
                        return xhr;
                    }
<%-................................................................--%>
   <%--进度条--%>
            <div class="progress">
                <div></div>
            </div>                  

[7]

8、 单独准备文件存储服务器
分服务器上传作用

数据库服务器：运行我们的数据库

缓存和消息服务器：负责处理大并发访问的缓存和消息

文件服务器：负责存储用户上传文件的服务器。

应用服务器：负责部署我们的应用

在实际开发中，我们会有很多处理不同功能的服务器。(注意：此处说的不是服务器集群）

总结：分服务器处理的目的是让服务器各司其职，从而提高我们项目的运行效率。

分服务器工作示意图

给电脑安装两个tomcat

@Controller
public class FileController01 {
    @ResponseBody//不会吧return返回的字符串当做路径处理
    @RequestMapping("fileUpload1.do")
    /*后台接收文件*/
    public Map<String,String> fileUpload(MultipartFile headPhoto,HttpServletRequest req) throws IOException {
        Map<String,String> map = new HashMap<String, String>();
        /*6、（控制文件大小）判断文件大小*/
        if(headPhoto.getSize()>1024*1024*2){
            map.put("message","文件大小不能超过2M");
            return map;
        }
        /*1、指定文件存储目录为我们项目部署环境下的upload目录*/
        String realPath = req.getServletContext().getRealPath("/upload");
             //System.out.println(realPath);
             //File dir = new File("f:/imgs");
        File dir = new File(realPath);
        //如果不存在则创建目录
        if(!dir.exists()){   //exists:目标存在 存在
            dir.mkdir();     //mkdir:创建目录 创建文件夹 创建路径 建立目录
        }
        /*2、获取文件信息:*/
        String originalFilename = headPhoto.getOriginalFilename();//获取文件名
        /*4、避免文件名冲突，使用UUID替换文件名*/
        String uuid = UUID.randomUUID().toString();
        /*3、获取拓展名*/
        String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
        /*5、（控制文件类型）判断文件类型*/
        if(!extendsName.equals(".jpeg")){
            //map.put("error","文件类型必须是.jpeg");
            map.put("message","文件类型必须是.jpeg");
            return map;
        }
        String newFileName = uuid.concat(extendsName);

        //String newFileName = uuid.conca(extendsName);//获取新的文件名
        //或者String newFileName = uuid+extendsName;
        File file = new File(dir,newFileName);//文件存储位置

        headPhoto.transferTo(file);//文件保存

        //上传成功之后，把文件的名字和文件类型返回给浏览器
        //map.put("success","上传成功");
        map.put("message","上传成功");
        map.put("newFileName",newFileName);
        map.put("filetype",headPhoto.getContentType());
        //String contentType = headPhoto.getContentType();//文件类型

        return map;
    }

}

FileController02

@Controller
public class FileController02 {
    //文件存储位置(静态常量)
    private  final static String FILESSERVER = "http://192.168.1.6:8090/upload/";
    @ResponseBody//不会吧return返回的字符串当做路径处理
    @RequestMapping("fileUpload2.do")
    /*后台接收文件*/
    public Map<String,String> fileUpload(MultipartFile headPhoto,HttpServletRequest req) throws IOException {
        Map<String,String> map = new HashMap<String, String>();
        /*2、获取文件信息:*/
        //获取文件名
        String originalFilename = headPhoto.getOriginalFilename();
        /*4、避免文件名冲突，使用UUID替换文件名*/
        String uuid = UUID.randomUUID().toString();
        /*3、获取拓展名*/
        String extendsName = originalFilename.substring(originalFilename.lastIndexOf("."));
        //获取新的文件名
        String newFileName = uuid.concat(extendsName);
        //创建sun公司提供的jersey包中的client对象
        Client client = Client.create();
        //打开目标资源
        WebResource resource = client.resource(FILESSERVER + newFileName);
        //文件保存到另一个服务器上
        resource.put(String.class,headPhoto.getBytes());
        //上传成功之后，把文件的名字和文件类型返回给浏览器
        map.put("message","上传成功");
        //map.put("newFileName",FILESSERVER+newFileName);
        map.put("newFileName",newFileName);
        map.put("filetype",headPhoto.getContentType());
        return map;
    }

    @RequestMapping("fileDownLoad.do")
    public void fileDownLoad(String photo, String filetype, HttpServletResponse response) throws IOException {
        //获取下载的文件名  文件类型
        //设置响应头
        //告诉浏览器要将数据保存到磁盘上，不在浏览器上直接解析
        response.setHeader("Content-Disposition","attachment;filename="+photo);
        //告诉浏览器下载文件类型
        response.setContentType(filetype);
        //获取一个文件的输入流
        InputStream inputStream = new URL(FILESSERVER + photo).openStream();
        //获取一个指向浏览器的输出流
        ServletOutputStream outputStream = response.getOutputStream();
        //向浏览器响应文件即可
        IOUtils.copy(inputStream,outputStream);
        //IOUtils:org.apache.commons.io
    }
}

PlayerController

@Controller
public class PlayerController {
    @Autowired
    private PlayerService playerService;
    @RequestMapping("addPlayer")
    public String addPlayer(Player player){
        //将调用服务层方法，将数据保存进入数据库
        // System.out.println(player);
        //页面跳转至player信息展示项目
        playerService.addPlayer(player);
        //return "redirect:/html/showPlayer.html";
        return "redirect:/showPlayer.jsp";
    }
}

5、Player

@AllArgsConstructor
@NoArgsConstructor
@Data
public class Player implements Serializable {
    private Integer id;
    private String name;
    private String password;
    private String nickname;
    private String photo;
    private String filetype;
}

6、PlayerService

public interface PlayerService {

    int addPlayer(Player player);
}

7、PlayerServiceImpl

@Service
public class PlayerServiceImpl implements PlayerService {
    @Autowired
    private PlayerMapper playerMapper;

    @Override
    public int addPlayer(Player player) {
        return playerMapper.addPlayer(player);
    }
}

8、PlayerMapper

public interface PlayerMapper {
    public int addPlayer(Player player);
}

9、PlayerMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wml.mapper.PlayerMapper">
    <insert id="addPlayer" >
        /*容易出错*/
        insert into player values(DEFAULT,#{name},#{password},#{nickname},#{photo},#{filetype})
    </insert>
</mapper>

10、测试UUID代码

public class TestUUID {
    @Test
    public void getUUID(){
        UUID uuid = UUID.randomUUID();
        String s = uuid.toString();
        System.out.println(s);

    }
}

1、文件的下载

下载之前的准备 ,展示所有玩家信息,包括图片展示
1、下载的基本流程
文件的上传是将用户本地的资源发送到服务器，让服务器存储到其硬盘中的过程。而下载和上传正好是相反的过程。下载是用户发起请求，请求要下载的资源。服务器根据请求，将其硬盘中的文件资源发送给浏览器的过程。
2、下载的请求数据
用户通过浏览器发起下载请求，服务器在接收到请求后，根据当前请求的用户信息，去数据库中获取当前用户要下载的资源的文件路径，然后服务器再去其硬盘中读取对应的文件，将文件响应给浏览器，基于此过程，下载请求的请求数据为:简单的下载:文件的路径直接作为一个字段存储在用户信息表中用户的ID。
[1] 下载的后台实现
1. 创建单元方法处理下载请求
2. 根据请求获取要下载的资源的流对象
3. 读取文件并将资源响应给浏览器
[2] 下载的示例代码

1、showPlayer.jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        #playerTable{
            width: 50%;
            border: 3px solid red ;
            margin: 0px auto;
            text-align: center;
        }
        #playerTable th,td{
            border: 1px solid yellow;
        }
        #playerTable img{
            width: 100px;
            height: 100px;
        }

    </style>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                type:"get",
                url:"getAllPlayer",
                success:function(players){
                    $.each(players,function (i, e) {
                        console.log(e)
                        /*追加内容*/
                        $("#playerTable").append('<tr>\n' +
                            '            <td>'+e.id+'</td>\n' +
                            '            <td>'+e.name+'</td>\n' +
                            '            <td>'+e.password+'</td>\n' +
                            '            <td>'+e.nickname+'</td>\n' +
                            '            <td>\n' +
                            '                <img src="http://192.168.1.6:8090/upload/'+e.photo+'" alt="暂未发现图片" src>\n' +
                            '            </td>\n' +
                            '            <td>\n' +
                            '                <a href="fileDownLoad.do?photo='+e.photo+'&filetype='+e.filetype+'">下载</a>\n' +
                            '            </td>\n' +
                            '        </tr>')
                    })
            }
            })
        })
    </script>
</head>
<body>
    <table id="playerTable" cellpadding="0px" cellspacing="0px">
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>昵称</th>
            <th>头像</th>
            <th>操作</th>
        </tr>
    </table>
</body>
</html>

2、PlayerController

@Controller
public class PlayerController {
    @Autowired
    private PlayerService playerService;
	//定义一个下载处理单元
    @RequestMapping("getAllPlayer")
    @ResponseBody
    public List<Player> getAllPlayer(){
        return playerService.getAllPlayer();
    }
}

3、PlayerService

public interface PlayerService {
    List<Player> getAllPlayer();
}

4、PlayerServiceImpl

@Service
public class PlayerServiceImpl implements PlayerService {
    @Autowired
    private PlayerMapper playerMapper;
    @Override
    public List<Player> getAllPlayer() {
        return playerMapper.getAllPlayer();
    }
}

5、PlayerMapper

public interface PlayerMapper {
    @Select("select * from player")/*不用写***Mapper配置文件*/
    List<Player> getAllPlayer();
}