大数据正式京淘3

大数据正式京淘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树

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

商品列表开发

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

数据的注意事项

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

EasyUI的分页技术

• 流程

  1. 返回EasyUIResult的对象

     • 

     • 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. 封装对象的具体属性

     • 展示
       • 
         1. total
         2. rows
  3. 实现分页的对象pagehelper
     • 例（Mybatis的核心配置文件）

       <plugins>
           <!-- 分页插件：com.github.pagehelper为PageHelper类所在包名 -->
           <plugin interceptor="com.github.pagehelper.PageHelper">
               <!-- 方言 -->
               <property name="dialect" value="mysql" />
               <!-- 该参数默认为false -->
               <!-- 设置为true时，使用RowBounds分页会进行count查询，查询数据总条数 -->
               <property name="rowBoundsWithCount" value="true" />
           </plugin>
       </plugins>            
       

     • 解释
       1. 方言：哪个数据库语言
       2. 页面需要的数据
  4. 请求参数
     1. page
     2. rows
  5. 返回值：JSON数据

新增商品

• 新增函数的区别
  • 

新的知识

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

JSON---Js

• JSON可以被js做成js对象

图片上传

• 图片上传
  • flash插件
  • 最多上传五张图片
  • 将被封装成数据对象传给Controller
    1. 拿到文件名判断是否是图片
    2. 判断是否是木马
    3. 生成两个路径【服务器的真实路径】【KE访问的虚拟路径】
    4. 图片的存放目录计算，上传图片非常多，要进行有效的管理
    5. 图片文件的重命名
    6. 保存文件到服务器
    7. 返回对象picUploadResult
       • 
• 图片展示
  • 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;
      }
  }
  

消除顾虑思维

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