乐趣区

关于java:02商品分类目录实现

2. 商品分类目录实现

2.1 封装 POJO 对象

`@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{@TableId(type = IdType.AUTO)
    private Long id;         // 主键 ID
    private Long parentId;   // 父级 ID
    private String name;     // 分类名称
    private Integer status;  // 状态
    private Integer sortOrder;  // 排序号
    private Boolean isParent;   // 是否为父级

}` 

2.2 页面 JS 引入过程

2.2.1 引入 JS/CSS 款式

`<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/css/jt.css" />
<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>
<!-- 本人实现业务逻辑 -->
<script type="text/javascript" src="/js/common.js"></script>` 

2.2.2 引入 common.jsp

2.3 数据格式化

2.3.1 格式化价格

`1. 页面标签
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice"> 价格 </th>

2. 页面 JS
formatPrice : function(val,row){return (val/100).toFixed(2);
    },` 

2.3.2 格式化状态

`<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus"> 状态 </th>

// 格式化商品的状态
    formatItemStatus : function formatStatus(val,row){if (val == 1){return '<span > 失常 </span>';} else if(val == 2){return '<span > 下架 </span>';} else {return '未知';}
    },` 

2.4 格式化商品分类目录

2.4.1 页面构造剖析

`<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName"> 叶子类目 </th>

// 格式化名称
    findItemCatName : function(val,row){
        var name;
        $.ajax({
            type:"get",
            url:"/item/cat/queryItemName",
            data:{itemCatId:val},
            cache:true,    // 缓存
            async:false,    // 示意同步   默认的是异步的 true
            dataType:"text",// 示意返回值参数类型
            success:function(data){name = data;}
        });
        return name;
    },` 

2.4.2 编辑 ItemCatController

`@RestController // 要求返回 JSON 数据
@RequestMapping("/item/cat")
public class ItemCatController {

    @Autowired
    private ItemCatService itemCatService;
    /**
     * 业务: 依据商品分类的 ID, 查问商品分类的名称
     * url:  /item/cat/queryItemName
     * 参数: itemCatId  商品分类 id
     * 返回值: 商品分类名称
     */
    @RequestMapping("queryItemName")
    public String findItemCatName(Long itemCatId){return itemCatService.findItemCatName(itemCatId);
    }

}` 

2.4.2 编辑 ItemCatService

`package com.jt.service;

import com.jt.mapper.ItemCatMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ItemCatServiceImpl implements ItemCatService{

    @Autowired
    private ItemCatMapper itemCatMapper;

    @Override
    public String findItemCatName(Long itemCatId) {return itemCatMapper.selectById(itemCatId).getName();}
}` 

2.4.3 页面成果展示

2.4.3 ajax 嵌套问题

阐明: 如果在 ajax 外部再次嵌套 ajax 申请, 则须要将外部的 ajax 申请设置为同步状态.
俗语: 连忙走吧 赶不上二路公交车了…
外围起因: 页面须要刷新 2 次都是只刷新一次.

2.5 对于页面工具栏阐明(看懂即可)

`1. 页面调用
    <table class="easyui-datagrid" id="itemList" title="商品列表" 
       data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">

2. 定义工具栏
var toolbar = [{
        text:'新增',
        iconCls:'icon-add',
        handler:function(){
            //.tree-title 查找页面中 class 类型为 tree-title 的元素
            //:contains('新增商品')  在所有的 class 的类型中查找文件元素为 "新增商品" 的元素
            //parent()  选中元素的父级元素
            //.click()  执行点击的动作
            $(".tree-title:contains(' 新增商品 ')").parent().click();
        }
    },{.....}]` 

2.5.1 jQuery 根本用法

1. 选择器 在整个 html 页面 依据某些特定的标识 精确的定位元素的地位.

  1. Id 选择器 $(“# 元素的 Id”)
  2. 元素 (标签) 选择器 $(“tr”)
  3. 类选择器 $(“.class 的名称 ”) [{},{},{}]

3 商品分类目录树形构造展示

3.1 ItemCat 表构造设定

问题剖析: 商品分类信息个别分为 3 级. 问题: 如何确定父子级关系的呢??
答: 通过定义父级的字段实现

3.2 3 级表数据的剖析

阐明: 通过 parentId 依据父级的 ID 查问所有的子级信息. 当查问一级菜单时 parentId=0;

`/* 查问一级分类信息 父级 ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=0;
/* 查问二级分类信息 父级 ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=495;
/* 查问三级分类信息 父级 ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=529;` 

3.3 EasyUI 中树形构造阐明

1. 页面 JS

`$("#tree").tree({
            url:"tree.json",        // 加载近程 JSON 数据
            method:"get",            // 申请形式  POST
            animate:false,            // 示意显示折叠端口动画成果
            checkbox:true,            // 表述复选框
            lines:false,                // 示意显示连接线
            dnd:true,                // 是否拖拽
            onClick:function(node){    // 增加点击事件
                
                // 控制台
                console.info(node);
            }
        });` 

2. 返回值阐明

`[
    {
        "id":"1",
        "text":"吃鸡游戏",
        "state":"closed"
    },
    {
        "id":"1",
        "text":"吃鸡游戏",
        "state":"closed"
    }
]` 

3.4 封装树形构造 VO 对象

`@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable {
    private Long id;       // 节点 ID
    private String text;   // 节点名称
    private String state;  // 节点状态

}` 

3.5 页面 JS 构造阐明

3.6 异步树加载阐明

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

3.7 编辑 ItemCatController

 `/**
     * 业务: 实现商品分类的查问
     * url 地址: /item/cat/list
     * 参数:   id: 默认应该 0 否则就是用户的 ID
     * 返回值后果: List<EasyUITree>
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(Long id){Long parentId = (id==null)?0:id;
        return itemCatService.findItemCatList(parentId);
    }` 

3.8 编辑 ItemCatService

 `@Override
    public List<EasyUITree> findItemCatList(Long parentId) {
        //1. 筹备返回值数据
        List<EasyUITree> treeList = new ArrayList<>();
        // 思路. 返回值的数据从哪来? VO  转化 POJO 数据

        //2. 实现数据库查问
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.eq("parent_id",parentId);
        List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);

        //3. 实现数据的转化  catList 转化为 treeList
        for (ItemCat itemCat : catList){long id = itemCat.getId();  // 获取 ID 值
            String text = itemCat.getName();    // 获取商品分类名称
            // 判断: 如果是父级 应该 closed  如果不是父级 则 open
            String state = itemCat.getIsParent()?"closed":"open";
            EasyUITree easyUITree = new EasyUITree(id,text,state);
            treeList.add(easyUITree);
        }

        return treeList;
    }` 

3.9 页面成果展示

退出移动版