大数据正式京淘3

Dear 丶 2022-06-02 12:51 247阅读 0赞

# 大数据正式京淘3 #

### EasyUI简介 ###

*  文档
    
     *  每个组件的easyui有属性、方法和事件。用户可以方便地扩展。
 *  属性
    
     *  属性定义在 jQuery.fn.\{plugin\}.defaults. 例如,对话框的属性定义在 jQuery.fn.dialog.defaults.
 *  事件
    
     *  这个事件(回调函数)也定义在jQuery.fn.\{plugin\}.defaults.
 *  方法
    
     *  调用方法语法: $('selector').plugin('method', parameter);
 *  说明:
    
    #  #
    
        selector是jquery对象选择器. 
        plugin 是插件名称. 
        method是现有的方法对应的插件. 
        parameter是参数对象,可以是一个对象,字符串, ...

### 开始使用jQuery EasyUI ###

*  下载类库并且导入 EasyUI的CSS和JavaScript文件进入页面.
    
    #  #
    
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> 
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
        <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 *  一旦你已经包括了这些EasyUI的必须文件,您可以定义一个EasyUI组件从标记或使用JavaScript. 例如,定义一个面板可折叠功能, 您可以编写这样的HTML代码:
    
    #  #
    
        <div id="p" class="easyui-panel" 
        style="width:500px;height:200px;padding:10px;"title="My Panel" 
        iconCls="icon-save" collapsible="true">
        The panel content 
        </div>
 *  当从标记创建一个组件时, 'data-options'属性可以用来支持HTML5和从1.3版本兼容的属性名称。所以你可以改写上面的代码像这样:
    
    #  #
    
        <div id="p" class="easyui-panel" 
        style="width:500px;height:200px;padding:10px;" title="My Panel"
        data-options="iconCls:'icon-save',collapsible:true"> 
        The panel content
        </div>
 *  下面的代码显示了如何创建一个组合框,绑定”onSelect事件”.
    
    #  #
    
        <input class="easyui-combobox" name="language" 
        data-options=" 
            url:'combobox_data.json',
            valueField:'id', 
            textField:'text',
            panelHeight:'auto',
            onSelect:function(record){
                alert(record.text) 
            }" />

### 京淘中的EasyUI ###

*  是一组基于jquery的UI插件集合
 *  开发更加轻松
 *  最多的属性：data-options
 *  EasyUI使用的都是div+css
    
     *  所有的弹出框都是一个div
     *  css、js的引入需要依赖父页面
 *  后台的展示用的技术
    
     *  JSON->EasyUI

### EasyUI树 ###

*  应用
    
     *  ![wt17xgX.png][]
 *  接收的数据：JSON
    
     *  id: 节点id,它是重要的来加载远程数据
     *  text: 节点文本来显示
     *  state: 节点状态,“open”或“closed”,默认是“open”。当设置为“closed”,节点有子节点,并将负载从远程站点
     *  checked: 显示选定的节点是否选中。
     *  attributes: 自定义属性可以被添加到一个节点
     *  children: 一个数组节点定义了一些子节点
 *  构建数据必须体现层级关系
    
     *  status算一个，告诉EasyUI是否是根节点
     *  id的传递：告诉下一级的父id是谁--EasyUI高度封装
 *  示例
    
     *  图示
        
         *  ![SyDCCF1.png][]
     *  数据
        
         *  ![UnQlC7i.png][]

### 商品列表开发 ###

*  pojo：Item实体类
 *  service：ItemService和ItemServiceImpl
 *  controller：ItemController
 *  前台EasyUI通过url访问具体地址返回JSON字符串，进行解析字符串并将页面进行展示
 *  图示
    
     *  列表
        
         *  ![uxrfZy5.png][]
     *  数据
        
         *  ![rMZYMh0.png][]

### 数据的注意事项 ###

*  价格
    
     *  真实价格（double）+存储价格（bigint）
 *  图片
    
     *  字符串：图片的虚拟访问路径
     *  存五张，路径以,号隔开
     *  不能用大字段来存储图片
        
         *  索引：减少读写磁盘的次数
         *  B-Tree数
            
             *  ![LqXbME0.png][]
 *  数据不可以一次显示：效率太低，体验不好

### EasyUI的分页技术 ###

*  流程
    
    1.  返回EasyUIResult的对象
        
         *  ![6GNJEeN.png][]
         *  ItemController层返回
            
            #  #
            
                package com.peng.controller;
                
                import java.util.List;
                
                import org.springframework.beans.factory.annotation.Autowired;
                import org.springframework.beans.factory.annotation.Qualifier;
                import org.springframework.stereotype.Controller;
                import org.springframework.web.bind.annotation.RequestMapping;
                import org.springframework.web.bind.annotation.ResponseBody;
                
                import com.peng.pojo.Item;
                import com.peng.service.ItemService;
                import com.peng.vo.EasyUIResult;
                
                @Controller("itemController")
                public class ItemController {
                    @Autowired
                    @Qualifier("itemService")
                    private ItemService itemService;
                
                    // 获取数据--所有商品
                    @RequestMapping("/item/query")
                    @ResponseBody // 将对象转化为JSON字符串
                    public EasyUIResult queryItemList() {
                        List<Item> queryItemList = itemService.queryItemList();
                        EasyUIResult er = new EasyUIResult();
                        // 设置数据总条数
                        er.setTotal(queryItemList.size());
                        // 设置所有数据
                        er.setRows(queryItemList);
                        return er;
                    }
                }
    2.  封装对象的具体属性
        
         *  展示
            
             *  ![vc3hqde.png][]
                
                1.  total
                2.  rows
    3.  实现分页的对象pagehelper
        
         *  例（Mybatis的核心配置文件）
            
            #  #
            
                <plugins>
                    
                    <plugin interceptor="com.github.pagehelper.PageHelper">
                        
                        <property name="dialect" value="mysql" />
                        
                        
                        <property name="rowBoundsWithCount" value="true" />
                    </plugin>
                </plugins>
         *  解释
            
            1.  方言：哪个数据库语言
            2.  页面需要的数据
    4.  请求参数
        
        1.  page
        2.  rows
    5.  返回值：JSON数据

### 新增商品 ###

*  新增函数的区别
    
     *  ![tR1CLD4.png][]

### 新的知识 ###

*  jquery的序列化表单
    
     *  模拟get的参数提交
     *  好处
        
        1.  当页面需求变化时【增添展示项】
        2.  input或其他标签增删时，无须改动前台代码
 *  service层可以加try-catch吗
    
     *  看情况
        
         *  一般添加了try-catch后事务失效
         *  解释
            
             *  ![bqAdqiu.png][]

### JSON---Js ###

*  JSON可以被js做成js对象

### 图片上传 ###

*  图片上传
    
     *  flash插件
     *  最多上传五张图片
     *  将被封装成数据对象传给Controller
        
        1.  拿到文件名判断是否是图片
        2.  判断是否是木马
        3.  生成两个路径【服务器的真实路径】【KE访问的虚拟路径】
        4.  图片的存放目录计算，上传图片非常多，要进行有效的管理
        5.  图片文件的重命名
        6.  保存文件到服务器
        7.  返回对象picUploadResult
            
             *  ![BiaZDfm.png][]
 *  图片展示
    
     *  KindEditor与EasyUI相似，都是富客户端技术
     *  优势：图文并茂
 *  图片上传后台（部分）
    
    #  #
    
        package com.peng.controller;
        
        import java.awt.image.BufferedImage;
        import java.io.File;
        import java.text.SimpleDateFormat;
        import java.util.Date;
        
        import javax.imageio.ImageIO;
        
        import org.apache.commons.lang3.RandomUtils;
        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 com.peng.vo.PicUploadResult;
        
        @Controller("picUploadController")
        public class PicUploadController {
        
            // 图片上传
            @RequestMapping("/pic/upload")
            @ResponseBody
            public PicUploadResult picUpload(MultipartFile uploadFile) {
                // 判断文件是否和法
                // 判断文件是否是木马
                // 生产两个路径
                // 图片目录的计算
                // 图片文件重命名
                // 保存文件到服务器
                // 返回对象
        
                // 准备一个返回值
                PicUploadResult result = new PicUploadResult();
                // 同时上传文件，会自动调用当前的controller
                String oldFileName = uploadFile.getOriginalFilename();// 源文件的名称
                String extFileName = oldFileName.substring(oldFileName.lastIndexOf("."));// 后缀名
                // 判断文件的后缀是否是图片的格式
                if (!extFileName.matches("^.*(jpg|gif|png)$")) {
                    result.setError(1);
                    return result;
                }
                try {
                    // 判断木马--是图片会有宽高
                    BufferedImage bufImage = ImageIO.read(uploadFile.getInputStream());
                    result.setHeight(bufImage.getHeight() + "");// 顺便判断是否是其他文件--就当是木马检查了
                    result.setWidth(bufImage.getWidth() + "");// 顺便能判断是否为其他文件--就当木马检查了
                    // 准备两个路径:路径生产的计算方法（当前时间/UUID/MD5加密字符串）
                    String dir = "/images/" + new SimpleDateFormat("yyyy/MM/dd").format(new Date()) + "/";
                    // 虚拟路径
                    String urlPrefix = "http://image.jt.com" + dir;
                    // 绝对路径
                    String path = "c:/jt-upload" + dir;
        
                    // 创建服务器上的真实路径
                    File _dir = new File(path);
                    if (!_dir.exists()) {// 当前路径不存在
                        _dir.mkdirs();
                    }
        
                    // 重名名
                    String fileName = System.currentTimeMillis() + "" + RandomUtils.nextInt(100, 999) + extFileName;
                    result.setUrl(urlPrefix + fileName);
                    // 文件保存到磁盘
                    uploadFile.transferTo(new File(path + fileName));
                } catch (Exception e) {
                    result.setError(1);
                }
                return result;
            }
        }

### 消除顾虑思维 ###

*  前台【富客户端要的数据】
 *  后台【通过对数据的操作以及封装返回前台想要的数据】
 *  就这样，别想的复杂了~~

[wt17xgX.png]: https://i.imgur.com/wt17xgX.png
[SyDCCF1.png]: https://i.imgur.com/SyDCCF1.png
[UnQlC7i.png]: https://i.imgur.com/UnQlC7i.png
[uxrfZy5.png]: https://i.imgur.com/uxrfZy5.png
[rMZYMh0.png]: https://i.imgur.com/rMZYMh0.png
[LqXbME0.png]: https://i.imgur.com/LqXbME0.png
[6GNJEeN.png]: https://i.imgur.com/6GNJEeN.png
[vc3hqde.png]: https://i.imgur.com/vc3hqde.png
[tR1CLD4.png]: https://i.imgur.com/tR1CLD4.png
[bqAdqiu.png]: https://i.imgur.com/bqAdqiu.png
[BiaZDfm.png]: https://i.imgur.com/BiaZDfm.png