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"%>







` 

2.2.2 引入common.jsp

在这里插入图片描述

2.3 数据格式化

2.3.1 格式化价格

`1.页面标签
价格

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

2.3.2 格式化状态

`状态

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

2.4 格式化商品分类目录

2.4.1 页面结构分析

`叶子类目

//格式化名称
    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.页面调用
    

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级. 问题: 如何确定父子级关系的呢??
答: 通过定义父级的字段实现
02-商品分类目录实现_第1张图片

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结构说明

02-商品分类目录实现_第2张图片

3.6 异步树加载说明

树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为’id’,通过URL发送到服务器上面检索子节点。
在这里插入图片描述

3.7 编辑ItemCatController

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

3.8 编辑ItemCatService

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

        //2.实现数据库查询
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.eq("parent_id",parentId);
        List 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页面效果展现

02-商品分类目录实现_第3张图片

你可能感兴趣的:(java,后端)