美文网首页
4/26day42_文件上传综合案例

4/26day42_文件上传综合案例

作者: 蹦蹦跶跶的起床啊 | 来源:发表于2020-05-15 21:41 被阅读0次

    回顾

    1. listener监听器
        监听三大域对象的创建和销毁,request、session、servletContext
        快速入门
            1.普通类,实现listener接口
            2.重写抽象方法,创建和销毁
            3.配置
              web.xml
              注解
        统计在线人数
            
    
    2. 综合案例
        使用mvc和三层架构的思想实现用户模块的增删改查
            程序入口(浏览器)---servlet(转发、重定向)---service---dao
    

    AJAX&文件上传

    今日目标

    1. json
        java和json数据相互转换
        
    2. 校验用户名是否存在
    
    3. 文件上传【可以照着抄一遍...】
    
    4. 安装mysql5.7版本(如果mysql5.6以上可以继续使用....)
    

    一 JSON

    1.1 回顾

    最早是JavaScript对象表示形式,现在主要用于互联网传输数据载体

    * java
            User user =new User();
                user.setUsername("jack");
                user.setAge(18);
                
    * javaScript
            let user = {"username":"jack","age":18};
            
            let array = [{},{},{}]
            
            name:都是字符串
            value:支持各种类型
    

    JSON 比 XML 更小、更快,更易解析

    1587864032897.png

    1.2 JSON数据与java对象转换

    常见的解析器

    工具名称 介绍
    Jsonlib Java 类库,需要导入的jar包较多
    Gson google提供的一个简单的json转换工具
    Fastjson alibaba技术团队提供的一个高性能的json转换工具
    Jackson 开源免费的json转换工具,springmvc转换默认使用jackson
    1587864344057.png

    使用jackson,需要导入jar包

    1587864541216.png

    提供了一个核心转换器对象

    ObjectMapper  om = new ObjectMapper();
    

    1.2.1 java对象转为json(字符串)【重点】

    String writeValueAsString(Object object);
    
        // 将user对象转为json字符串
        @Test
        public void UserToJson() throws Exception {
            User user = new User("1", "lucy", "女", 15, "德克萨斯", "123", "123@qq.com");
    
            // 创建jackson转换器对象
            ObjectMapper om = new ObjectMapper();
    
            // 将任意对象转为json字符串
            String json = om.writeValueAsString(user);
            System.out.println(json); // 在java中name必须使用双引号包裹起来
        }
    
        // 将map集合转为json字符串
        @Test
        public void MapToJson() throws Exception {
            Map<String, Object> map = new HashMap<>();
            map.put("name", "张三");
            map.put("age", 18);
    
            // 创建jackson转换器对象
            ObjectMapper om = new ObjectMapper();
    
            // toJson
            String json = om.writeValueAsString(map);
            System.out.println(json); //  {"name":"张三","age":18}
        }
    
        // 将list集合转为json数组字符串
        @Test
        public void ListToJson() throws Exception {
            List<User> list = new ArrayList<>();
            list.add(new User("1", "lucy", "女", 15, "德克萨斯", "123", "123@qq.com"));
            list.add(new User("2", "jack", "男", 15, "德克萨斯", "123", "123@qq.com"));
    
            // 创建jackson转换器对象
            ObjectMapper om = new ObjectMapper();
    
            // toJson
            String json = om.writeValueAsString(list);
            System.out.println(json); // [{},{}]
        }
    

    1.2.2 将json(字符串)转为java对象【了解】

    T readValue(String json,Class<T> classType);
    
        // 将json字符串转为user对象
        @Test
        public void JsonToUser() throws Exception {
            String json = "{\"id\":\"1\",\"name\":\"lucy\",\"sex\":\"女\",\"age\":15,\"address\":\"德克萨斯\",\"qq\":\"123\",\"email\":\"123@qq.com\"}";
    
            // 创建jackson转换器对象
            ObjectMapper om = new ObjectMapper();
    
            // toUser
            User user = om.readValue(json, User.class);
            System.out.println(user);
        }
    
        // 将json字符串转为map集合(如果你获取的json格式没有对应的java实体对象,就可以拿map接收)
        @Test
        public void JsonToMap() throws Exception {
            String json = "{\"name\":\"lucy\",\"age\":18}";
    
            // 创建jackson转换器对象
            ObjectMapper om = new ObjectMapper();
    
            // toMap
            Map<String, Object> map = om.readValue(json, Map.class);
            System.out.println(map);
        }
    
        // 将json数组字符串转为list集合
        @Test
        public void JsonToList() throws Exception {
            String json = "[{\"id\":\"1\",\"name\":\"lucy\",\"sex\":\"女\",\"age\":15,\"address\":\"德克萨斯\",\"qq\":\"123\",\"email\":\"123@qq.com\"},{\"id\":\"2\",\"name\":\"jack\",\"sex\":\"男\",\"age\":15,\"address\":\"德克萨斯\",\"qq\":\"123\",\"email\":\"123@qq.com\"}]";
    
            // 创建jackson转换器对象
            ObjectMapper om = new ObjectMapper();
    
            // toList
            List list = om.readValue(json, List.class);
            System.out.println(list);
        }
    

    1.3 自定义模板

    1587866270735.png

    二 案例:检查用户名是否可用

    需求

    ​ 在用户注册页面,输入用户名,当用户名输入框失去焦点时,发送异步请求,将输入框的用户名传递给服务器进行是否存在的校验。

    2.1 技术分析

    此需求使用了ajax技术:通过==异步提交==,实现页面的==局部刷新==,提高用户的体验

    JQuery提供的ajax函数

    * ajax
            $.ajax({
                type:"请求方式,get|post",
                url:"请求服务器地址",
                data:"请求参数",
                success:function(resp){
                    resp就是服务器返回的结果...
                }
            });
    
    * get
            $.get(url(地址?参数),function(resp){
                
            });
    
    
    * post
            $.post(url,data,function(resp){
                
            })
    

    2.2 需求分析

    1587868403078.png

    2.3 代码实现

    ① index.jsp

    1587868753719.png
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>${NAME}</title>
        <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
    </head>
    <body>
    <h3>用户注册</h3>
    <form action="#" method="post">
        用户名:<input type="text" name="username" id="username"> <span id="userwarn"></span> <br>
    </form>
    
    <script>
        // 给用户文本框绑定失去焦点事件
        $('#username').blur(function () {
            // 获取用户输入的值
            console.log(this.value);
            let data = "username=" + this.value;
            // 发送ajax请求
            $.ajax({
                type:"post",
                url:'${pageContext.request.contextPath}/CheckServlet',
                data:data,
                success:function (resp) {
                    console.log(resp);
                    // 判断结果并实现局部刷新
                    if(resp.flag){
                        $('#userwarn').text(resp.msg).css('color','green');
                    }else{
                        $('#userwarn').text(resp.msg).css('color','red');
                    }
                }
            })
        })
    </script>
    </body>
    </html>
    

    ② CheckServlet

    @WebServlet("/CheckServlet")
    public class CheckServlet extends HttpServlet {
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            // 1.接收请求参数
            String username = request.getParameter("username");
    
            // 2.声明map集合
            Map<String, Object> map = new HashMap<>();
    
            // 3.判断用户是否存在
            if(username.equals("jack")){
                map.put("flag",false);
                map.put("msg", "× 此用户已注册");
            }else{
                map.put("flag",true);
                map.put("msg", "√ 此用户可以注册");
            }
    
            // 4.将map集合转为json字符串
            ObjectMapper om = new ObjectMapper();
            String json = om.writeValueAsString(map);
            System.out.println(json);
    
            // 5.设置json的MIME类型
            response.setContentType("application/json;charset=utf-8");
    
            // 6.response响应json到客户端
            response.getWriter().write(json);
        }
    
    }
    

    三 案例:文件上传

    需求

    ​ 在用户注册页面,我们可以输入用户名,还可以选择要上传的文件;点击提交按钮,就可以将用户输入的内容和选择的文件保存到服务器上

    3.1 技术分析

    1587870989239.png

    3.1.1 客户端如何将文件转为文本

    1. 表单提交方式必须为post
            action="post"
            
    2. 表单的enctype属性值必须为multipart/form-data 多组件表单数据
            enctype="multipart/form-data"
            
    3. 在表单中提供文件上传项
        <input type="file" name="pic">
    
    1587871962157.png

    3.1.2 服务器将文本转为字节流

    1. 使用apache提供工具类 commons-fileupload(今天讲,最麻烦的....)
    2. 使用servlet3.0版本,通过注解实现(黑马旅游网)
    3. 使用springMVC框架(最简单,底层使用commons-fileupload)

    3.1.2 代码实现【课下抄一遍即可】

    ① 导入文件上传相关jar包

    1587872397979.png 1587872441280.png

    ② index.jsp

    1587872494757.png

    ③ 指定服务器保存文件路径

    1587872548319.png

    ④ 编写servlet接收文件并保存

    步骤分析

    1. 创建磁盘文件项工厂
    
    2. 创建核心解析对象(依赖工厂对象)
    
    3. 解析request对象,返回上传项list集合
    
    4. 遍历list,获取每一个上传项
    
    5. 判断
          普通上传项
            name和value
          文件上传项
            文件名
            字节输入流
            保存服务器端
    
    @WebServlet("/UploadServlet")
    public class UploadServlet extends HttpServlet {
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            try {
                // 1.创建磁盘文件项工厂
                DiskFileItemFactory factory = new DiskFileItemFactory();
                // 2.创建上传解析器对象(依赖工厂对象)
                ServletFileUpload fileUpload = new ServletFileUpload(factory);
                // 3.解析request请求,返回上传项list集合
                List<FileItem> fileItems = fileUpload.parseRequest(request);
                // 4.遍历list
                for (FileItem fileItem : fileItems) {
                    // 5.判断是文件项还是普通项
                    if (fileItem.isFormField()) {// 普通上传项
                        // 获取name属性名
                        String name = fileItem.getFieldName();
                        // 获取value属性值
                        String value = fileItem.getString();
                        System.out.println("普通上传项:" + name + "=" + value);
                    } else {// 文件上传项
                        // a.获取文件名   demo.txt
                        String fileName = fileItem.getName();
                        // b.获取文件字节输入流
                        InputStream in = fileItem.getInputStream();
                        // c.获取文件扩展名
                        String extName = FileUtil.extName(fileName);
                        // d.生成随机文件名
                        fileName = IdUtil.simpleUUID() + "." + extName;
    
                        // 此文件名会保存数据库一份,给用户查询使用...
    
                        // 获取upload目录在服务器真实路径
                        String realPath = request.getServletContext().getRealPath("/upload/");
    
                        // 判断此目录是否存在
                        File dirFile = new File(realPath);
                        if (!dirFile.exists()) {
                            dirFile.mkdirs(); // 如果不存在自己创建
                        }
    
                        // 设置文件字节输出流
                        FileOutputStream out = new FileOutputStream(realPath + fileName);
    
                        // 流的拷贝
                        IoUtil.copy(in, out);
    
                        // 关流
                        out.close();
                        in.close();
    
                        response.getWriter().write("success");
                    }
                }
            } catch (FileUploadException e) {
                e.printStackTrace();
            }
        }
    
    }
    

    相关文章

      网友评论

          本文标题:4/26day42_文件上传综合案例

          本文链接:https://www.haomeiwen.com/subject/zrohohtx.html