商品分类树形结构分析

一、业务说明

本次是一个商城购物系统中关于商品分类的树形结构讲解。

这里的树形结构用于新增一条商品时，选择此商品的分类信息，并保存到数据库。

样式大致为：

二、前端说明

1、树形结构控件代码

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

2、 树形结构JS代码

树控件读取URL。

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

所以如果用户初始化时,没有点击节点时 不会传递ID.所以需要默认值

3、查询返回结果

 可以看出是通过最外层的数组[]，将其中的每个元素（对象）显示返回，而每个对象都有几个属性（id，text，status）。

三、后端说明

基于前面对于前端的分析，首先我们需要一个类来封装查询结果与前端进行交互。其中的每一个树形节点中,id标识节点的编号，text标识此节点的名称，以及states对应此节点的状态。

1、编辑vo

package com.jt.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;


@Data
@Accessors(chain=true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree{

    private Long id;     //节点编号
    private String text;  //节点名称
    private String states;  //节点状态 open打开 close关闭
}

因为查询的是商品分类信息，所以需要ItemCat来封装

2、编辑pojo

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;


@Data
@Accessors(chain=true)
@TableName("tb_item_cat")
public class ItemCat{
    
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long parentId;
    private String name;
    private Integer status;
    private Integer sortOrder;  //排序号
    private Boolean isParent;   //false 0  true 1

}

之后我们应当知道，树形结构在数据库中存储时是通过parentId进行相关联的

比如，查询不同级别的树形节点是通过parentId的不同

/*查询一级商品分类信息*/
SELECT * FROM tb_item_cat WHERE parentId=0
/*查询二级商品分类信息*/
SELECT * FROM tb_item_cat WHERE parentId=1
/*查询三级商品分类信息*/
SELECT * FROM tb_item_cat WHERE parentId=2

所以我们根据parentId去查询该节点下挂的所有子节点

3、编辑mapper

这里使用mybatis-plus，直接使用BaseMapper中的方法即可。

package com.jt.mapper;

@Mapper
public interface ItemCatMapper extends BaseMapper<ItemCat>{

}

4、编辑service

首先通过传入的parentId获取相关ItemCat的信息，再将其中的id，name和isParent信息转换为vo对象。

package com.jt.service.impl;

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


@Service
public class ItemCatServiceImpl implements ItemCatService{
    
    @Autowired
    private ItemCatMapper itemCatMapper;


    @Override
    public List<EasyUITree> findItemCatList(Long parentId){
                    
        //首先根据前端传来的父id查询所有下挂的子id
        QueryWrapper queryWrapper=new QueryWrapper();
        queryWrapper.eq("parent_id",parentId);
        List<ItemCat> itemCatList=itemCatMapper.selectList(queryWrapper);

        //将查询到的ItemCat转换为VO对象
        List<EasyUITree> voList=new ArrayList<>(itemCatList.size());
        for(ItemCat itemCat:itemCatList){
            long id =itemCat.getId();
            String text=itemCat.getName();
            //如果是父级就闭合，否则打开
            String states=itemCat.getIsParent()?"close":"open";
            EasyUITree tree=new EasyUITree(id,text,states);
            voList.add(tree);
        }

        return voList;


    }
    
    
}

5、编辑controller

接收前端传入的id，并对其进行处理。

package com.jt.controller;

import com.jt.pojo.ItemCat;
import com.jt.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;



@RestController
@RequestMapping("/itemCat")
public class ItemCatController{
    @Autowired
    private ItemCatService itemCatService;

    @GetMapping("/item/cat/list")
    public List<EasyUITree> findItemCatList(Long id){
        
        //首次点开树形结构是没有id传入的，此时id为null
        //查询商品分类信息  1级菜单
        //如果用户没有点击按钮 将不会传递Id值,应该设定默认值
        long parentId=(id==null)?0:id;

        return itemCatService.findItemCatList(parentId);
    }
}