cgb2010-京淘我的项目Day05

1 实现商品分类树形构造展示

1.1 商品分类数据结构剖析

阐明:个别的条件下商品分类分为3级.

1.2 商品分类数据分析

/_查问商品分类一级菜单_/
SELECT * FROM tb_item_cat WHERE parent_id = 0
/_查问商品分类二级菜单_/
SELECT * FROM tb_item_cat WHERE parent_id = 1
/_查问商品分类三级菜单_/
SELECT * FROM tb_item_cat WHERE parent_id = 40

1.3 树形构造案例

1.3.1 编辑html页面

`<!DOCTYPE html><html><head><meta charset="UTF-8"><title>EasyUI-3-菜单按钮</title><script type="text/javascript"    src="/js/jquery-easyui-1.4.1/jquery.min.js"></script><script type="text/javascript"    src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script><script type="text/javascript"    src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css"    href="/js/jquery-easyui-1.4.1/themes/icon.css" /><link rel="stylesheet" type="text/css"    href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /><script type="text/javascript">    /*通过js创立树形构造 */    $(function(){        $("#tree").tree({            url:"tree.json",        //加载近程JSON数据            method:"get",            //申请形式  POST            animate:true,            //示意显示折叠端口动画成果            checkbox:true,            //表述复选框            lines:true,                //示意显示连接线            dnd:true,                //是否拖拽            onClick:function(node){    //增加点击事件                                //控制台                console.info(node);            }        });    })</script></head>    <body>        <h1>EasyUI-树形构造</h1>                <ul id="tree"></ul>    </body></html>`

1.3.2 查看JSON数据结构

1.3.3 弹出框成果展示

1.4 商品分类树形构造展示

1.4.1 页面构造剖析

1).类型定义

2).查看页面JS

3).查看Ajax申请是否失常发送

1.4.2 异步树加载控件

树控件读取URL。子节点的加载依赖于父节点的状态。当开展一个关闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http申请参数并命名为’id’，通过URL发送到服务器下面检索子节点。

1.4.3 编辑ItemCatController

`/**     * 业务: 实现商品分类的查问     * URL地址: http://localhost:8091/itemCat/list?id=xxx     * 申请参数: 传递节点的ID     * 返回值:  List<EasyUITree>对象   页面JS-VO~~~~POJO--DB     */    @RequestMapping("/list")    public List<EasyUITree> findItemCatList(Long id){        //1.查问一级商品分类信息        Long parentId = (id==null?0L:id);        return itemCatService.findItemCatList(parentId);    }`

1.4.4 编辑ItemCatService

 `/**     * 外围问题: 将POJO对象转化为VO对象     * @param parentId     * @return     */    @Override    public List<EasyUITree> findItemCatList(Long parentId) {        //2.定义VO的返回值        List<EasyUITree> treeList = new ArrayList<>();        //1.依据parentId查询数据库记录        QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();        queryWrapper.eq("parent_id", parentId);        List<ItemCat> itemCatList = itemCatMapper.selectList(queryWrapper);        for (ItemCat itemCat : itemCatList){ //数据的转化            long id = itemCat.getId();  //获取主键信息            String text = itemCat.getName();  //获取节点的名称            //如果是父级,默认条件下处于敞开状态            String state = itemCat.getIsParent()?"closed":"open";            EasyUITree easyUITree = new EasyUITree(id,text,state);            treeList.add(easyUITree);        }        return treeList;    }`

1.4.5 页面成果展示

2 商品新增

2.1 页面构造剖析

1).页面格局

2).页面JS剖析

3).申请参数

2.2 页面JS剖析

2.3 编辑SysResult对象

阐明: SysResult对象是零碎级别的返回值信息. 通常与页面JS进行交互.之后获取服务器端解决是否正确的后果,之后在页面中进行数据的显示.

`package com.jt.vo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;import lombok.experimental.Accessors;@Data@Accessors(chain = true)@NoArgsConstructor@AllArgsConstructorpublic class SysResult {    //属性个数:  1.status 200/201   2.msg 服务器提示信息  3.data 服务器返回值数据    private Integer status;    //200正确   201示意失败    private String msg;        //服务器提示信息    private Object data;       //服务器返回的数据    //实现办法的封装    public static SysResult fail(){        return new SysResult(201,"服务器运行失败!!",null);    }    public static SysResult success(){        return new SysResult(200, "服务器运行胜利!!", null);    }    public static SysResult success(Object data){        return new SysResult(200, "服务器运行胜利!!", data);    }    public static SysResult success(String msg,Object data){        return new SysResult(200, msg, data);    }}`

2.4 编辑ItemController

`/**     * 业务阐明:实现商品的入库操作     * URL地址:    http://localhost:8091/item/save     * 申请参数: 整个form表单 利用对象进行接管     * 返回值:   SysResult对象     */     @RequestMapping("/save")     public SysResult saveItem(Item item){        try {            itemService.saveItem(item);            return SysResult.success();        }catch (Exception e){            e.printStackTrace();            return SysResult.fail();        }     }`

2.5 编辑ItemService

`@Override    public void saveItem(Item item) {        Date date = new Date();        item.setStatus(1).setCreated(date).setUpdated(date);        itemMapper.insert(item);        //int a = 1/0;    }`

3.全局异样解决机制

3.1 需要剖析

阐明: 通过try-catch 形式能够捕捉异样. 然而如果代码中有大量的数据须要通过try-catch的形式进行操作,会导致代码的构造凌乱. 最好的形式能够采纳全局异样解决的形式实现.

3.2 定义全局异样解决机制

`//定义全局异样的解决机制@RestControllerAdvicepublic class SystemAOP {    @ExceptionHandler({RuntimeException.class})    public Object result(Exception e){        e.printStackTrace();        return SysResult.fail();    }}`

4.主动填充实现

4.1 业务阐明

更新工夫/批改工夫都是须要手动编辑的.是否实现一种性能能够主动将数据填充.简化代码.

4.2 MP实现数据填充

4.2.1 定义填充注解

4.2.2 编辑填充配置文件

`@Component  //将对象交给Spring容器治理public class MyMetaObjectHandler implements MetaObjectHandler {    //定义入库操作的赋值    @Override    public void insertFill(MetaObject metaObject) {        Date date = new Date();        this.setFieldValByName("created",date,metaObject);        this.setFieldValByName("updated",date,metaObject);    }    //定义更新操作赋值    @Override    public void updateFill(MetaObject metaObject) {        this.setFieldValByName("updated",new Date(),metaObject);    }}`

5 商品编辑操作

5.1 工具栏介绍

阐明: toolbar是关键字示意定义工具栏菜单属性利用对象的形式封装菜单的性能

5.2 商品工具栏

5.2.1 查看页面JS

1).动静获取选中元素的ID

 `function getSelectionsIds(){        //抉择的是整个list汇合页面        var itemList = $("#itemList");        //该datagrid办法是ui外部的函数 动静获取选中的元素信息        var sels = itemList.datagrid("getSelections");        //动静获取选中元素的ID的值        var ids = [];        for(var i in sels){            //将数据增加到数组中            ids.push(sels[i].id);        }        //将数组依照指定的字符进行链接        ids = ids.join(",");        return ids;    }`

2).编辑的元素个数的JS

3).实现数据回显

5.3 实现商品分类名称回显

5.3.1 业务思路

5.3.2 实现商品分类回显

5.3.3 页面成果展示

6 作业

6.1 实现商品更新操作.

`1.URL地址   2.提交参数   3.返回值后果 JS中2.数据库依据主键更新`