1. 效果

1.1 后端返回数据

image.png

1.2 前端效果

image.pngimage.png

1.3 页面效果

04、商品服务.jpg

1. 后端修改mall-product

查询：查询所有数据，并使用stram流进行筛选分类

1.1 修改实体类

修改CategoryEntity

  1. package com.ziyuan.product.entity;
  3. import com.baomidou.mybatisplus.annotation.TableField;
  4. import com.baomidou.mybatisplus.annotation.TableId;
  5. import com.baomidou.mybatisplus.annotation.TableLogic;
  6. import com.baomidou.mybatisplus.annotation.TableName;
  7. import lombok.Data;
  9. import java.io.Serializable;
  10. import java.util.List;
  12. /**
  13.  * 商品三级分类
  14.  * 
  15.  * @author sun-ziyuan
  16.  * @email 1293095063@qq.com
  17.  * @date 2021-11-22 11:50:50
  18.  */
  19. @Data
  20. @TableName("pms_category")
  21. public class CategoryEntity implements Serializable {
  22.     private static final long serialVersionUID = 1L;
  24.     /**
  25.      * 分类id
  26.      */
  27.     @TableId
  28.     private Long catId;
  29.     /**
  30.      * 分类名称
  31.      */
  32.     private String name;
  33.     /**
  34.      * 父分类id
  35.      */
  36.     private Long parentCid;
  37.     /**
  38.      * 层级
  39.      */
  40.     private Integer catLevel;
  41.     /**
  42.      * 是否显示[0-不显示，1显示]
  43.      */
  44.     @TableLogic(value = "1",delval = "0")
  45.     private Integer showStatus;
  46.     /**
  47.      * 排序
  48.      */
  49.     private Integer sort;
  50.     /**
  51.      * 图标地址
  52.      */
  53.     private String icon;
  54.     /**
  55.      * 计量单位
  56.      */
  57.     private String productUnit;
  58.     /**
  59.      * 商品数量
  60.      */
  61.     private Integer productCount;
  63.     /**
  64.      * 子元素存放在这里
  65.      */
  66.     @TableField(exist = false)
  67.     private List<CategoryEntity> children;
  69. }

1.2 修改Controller

1.2.1 修改CategoryBrandRelationController

查询所有分类以及子分类

  1. package com.ziyuan.product.controller;
  3. import com.ziyuan.common.utils.R;
  4. import com.ziyuan.product.entity.CategoryEntity;
  5. import com.ziyuan.product.service.CategoryService;
  6. import io.swagger.annotations.Api;
  7. import io.swagger.annotations.ApiOperation;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.web.bind.annotation.*;
  11. import java.util.Arrays;
  12. import java.util.List;
  15. /**
  16.  * 商品三级分类
  17.  *
  18.  * @author sun-ziyuan
  19.  * @email 1293095063@qq.com
  20.  * @date 2021-11-22 11:50:50
  21.  */
  22. @Api(tags = "商品三级分类API文档")
  23. @RestController
  24. @RequestMapping("product/category")
  25. public class CategoryController {
  26.     @Autowired
  27.     private CategoryService categoryService;
  29.     @ApiOperation("查询所有分类以及子分类")
  30.     @GetMapping("/list/tree")
  31.     public R listTree(){
  32.         List<CategoryEntity> list = categoryService.listWithTree();
  33.         return R.ok().put("data", list);
  34.     }
  36.     @ApiOperation("信息")
  37.     @GetMapping("/info/{catId}")
  38.     public R info(@PathVariable("catId") Long catId){
  39.         CategoryEntity category = categoryService.getById(catId);
  41.         return R.ok().put("data", category);
  42.     }
  44.     @ApiOperation("保存")
  45.     @PostMapping("/save")
  46.     public R save(@RequestBody CategoryEntity category){
  47.         categoryService.save(category);
  48.         return R.ok();
  49.     }
  51.     @ApiOperation("修改")
  52.     @PutMapping("/update")
  53.     public R update(@RequestBody CategoryEntity category){
  54.         categoryService.updateCascade(category);
  55.         return R.ok();
  56.     }
  58.     @ApiOperation("修改排序")
  59.     @PutMapping("/update/sort")
  60.     public R updateSort(@RequestBody CategoryEntity[] category){
  61.         categoryService.updateBatchById(Arrays.asList(category));
  62.         return R.ok();
  63.     }
  65.     /**
  66.      * @RequestBody: 获取请求体，必须发送POST请求
  67.      * SpringMVC自动请求
  68.      * @param catIds
  69.      * @return
  70.      */
  71.     @ApiOperation("删除")
  72.     @PostMapping("/delete")
  73.     public R delete(@RequestBody Long[] catIds){
  74.         // 1. 检查当前删除的菜单，是否被别的地方引用  逻辑删除
  75.         categoryService.removeMenuByIds(Arrays.asList(catIds));
  76.         return R.ok();
  77.     }
  79. }

1.3 修改Service、ServiceImpl

service层

  1. package com.ziyuan.product.service;
  3. import com.baomidou.mybatisplus.extension.service.IService;
  4. import com.ziyuan.product.entity.CategoryEntity;
  6. import java.util.List;
  8. /**
  9.  * 商品三级分类
  10.  *
  11.  * @author sun-ziyuan
  12.  * @email 1293095063@qq.com
  13.  * @date 2021-11-22 11:50:50
  14.  */
  15. public interface CategoryService extends IService<CategoryEntity> {
  17.     /**
  18.      * 查询所有分类以及子分类
  19.      * @return
  20.      */
  21.     List<CategoryEntity> listWithTree();
  23.     /**
  24.      * 检查当前删除的菜单，是否被别的地方引用  逻辑删除
  25.      * @param asList
  26.      */
  27.     void removeMenuByIds(List<Long> asList);
  29.     /**
  30.      * 修改
  31.      * @param category
  32.      */
  33.     void updateCascade(CategoryEntity category);
  34. }

ServiceImpl

  1. package com.ziyuan.product.service.impl;
  3. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  4. import com.ziyuan.product.dao.CategoryDao;
  5. import com.ziyuan.product.entity.CategoryEntity;
  6. import com.ziyuan.product.service.CategoryService;
  7. import org.springframework.stereotype.Service;
  9. import java.util.List;
  10. import java.util.stream.Collectors;
  13. @Service("categoryService")
  14. public class CategoryServiceImpl extends ServiceImpl<CategoryDao, CategoryEntity> implements CategoryService {
  16.     @Override
  17.     public List<CategoryEntity> listWithTree() {
  18.         // 1.获取所有数据
  19.         List<CategoryEntity> list = baseMapper.selectList(null);
  21.         // 2. 组装成父子的树形结构
  22.         // 2.1 找到所有的一级分类
  23.         return list.stream()
  24.                 .filter(item -> item.getParentCid() == 0)
  25.                 .map(item -> {
  26.                     // 封装子菜单
  27.                     item.setChildren(getChildrens(item.getCatId(), list));
  28.                     return item;
  29.                 })
  30.                 .sorted((menu1, menu2) -> (menu1.getSort() != null ? menu1.getSort() : 0) - (menu2.getSort() != null ? menu2.getSort() : 0))
  31.                 .collect(Collectors.toList());
  32.     }
  35.     /**
  36.      * 查询子元素
  37.      */
  38.     public List<CategoryEntity> getChildrens(Long catId,List<CategoryEntity> list){
  39.         return list.stream()
  40.                 .filter(item -> item.getParentCid()==catId)
  41.                 .map(item -> {
  42.                     item.setChildren(getChildrens(item.getCatId(),list));
  43.                     return item;
  44.                 })
  45.                 .sorted((menu1, menu2) -> (menu1.getSort() != null ? menu1.getSort() : 0) - (menu2.getSort() != null ? menu2.getSort() : 0))
  46.                 .collect(Collectors.toList());
  47.     }
  49.     @Override
  50.     public void removeMenuByIds(List<Long> asList) {
  51.         // TODO 1、 检查当前删除的菜单，是否被别的地方引用
  52.         baseMapper.deleteBatchIds(asList);
  53.     }
  55.     @Override
  56.     public void updateCascade(CategoryEntity category) {
  57.         baseMapper.updateById(category);
  58.         // @TODO 级联更新
  59.     }
  63. }

1.4 修改网关配置

放到/api/** 上面，不然会被/renren-fast/拦截 报错401

  1. spring:
  2.     cloud:
  3.       gateway:
  4.         routes:
  5.            - id: product_route          # 路由Id, 自定义 只要唯一即可
  6.              uri: lb://mall-product        # 路由的目标地址 lb就是负载均衡，后面跟服务名称
  7.            predicates:                                 # 路由断言，就是判断请求是否符合路由规则
  8.                - Path=/api/product/**       # 这个按照路由匹配，只要以/api/开头就符合要求
  9.            filters:                                     # 动态路由过滤
  10.             - RewritePath=/api/(?<segment>.*), /$\{segment}  # 重写请求路径

1.5 逻辑删除

官方文档：https://mp.baomidou.com/guide/logic-delete.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95

2. 逻辑删除
    1）、在实体类中加上逻辑删除注解
    @TableLogic(value = "1",delval = "0")
    private Integer showStatus;

2. 前端

前端页面

<template>
    <div>
        <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>
        <el-button v-if="draggable" @click="batchSave">批量保存</el-button>
        <el-button type="danger" @click="batchDelete">批量删除</el-button>
        <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId" :default-expanded-keys="expandedKey" :draggable="draggable" :allow-drop="allowDrop" @node-drop="handleDrop" ref="menuTree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                    <el-button v-if="node.level <=2" type="text" size="mini" @click="() => append(data)">Append</el-button>
                    <el-button type="text" size="mini" @click="edit(data)">edit</el-button>
                    <el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
                </span>
            </span>
        </el-tree>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
            <el-form :model="category">
                <el-form-item label="分类名称">
                    <el-input v-model="category.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="category.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="计量单位">
                    <el-input v-model="category.productUnit" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data () {
        return {
            pCid: [],
            draggable: false,
            updateNodes: [],
            maxLevel: 0,
            title: "",
            dialogType: "", //edit,add
            category: {
                name: "",
                parentCid: 0,
                catLevel: 0,
                showStatus: 1,
                sort: 0,
                productUnit: "",
                icon: "",
                catId: null
            },
            dialogVisible: false,
            menus: [],
            expandedKey: [],
            defaultProps: {
                children: "children",
                label: "name"
            }
        };
    },

    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        getMenus () {
            this.$http({
                url: this.$http.adornUrl("/product/category/list/tree"),
                method: "get"
            }).then(({ data }) => {
                console.log("成功获取到菜单数据...", data.data);
                this.menus = data.data;
            });
        },
        batchDelete () {
            let catIds = [];
            let checkedNodes = this.$refs.menuTree.getCheckedNodes();
            console.log("被选中的元素", checkedNodes);
            for (let i = 0; i < checkedNodes.length; i++) {
                catIds.push(checkedNodes[i].catId);
            }
            this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl("/product/category/delete"),
                        method: "post",
                        data: this.$http.adornData(catIds, false)
                    }).then(({ data }) => {
                        this.$message({
                            message: "菜单批量删除成功",
                            type: "success"
                        });
                        this.getMenus();
                    });
                })
                .catch(() => { });
        },
        batchSave () {
            this.$http({
                url: this.$http.adornUrl("/product/category/update/sort"),
                method: "put",
                data: this.$http.adornData(this.updateNodes, false)
            }).then(({ data }) => {
                this.$message({
                    message: "菜单顺序等修改成功",
                    type: "success"
                });
                //刷新出新的菜单
                this.getMenus();
                //设置需要默认展开的菜单
                this.expandedKey = this.pCid;
                this.updateNodes = [];
                this.maxLevel = 0;
                // this.pCid = 0;
            });
        },
        handleDrop (draggingNode, dropNode, dropType, ev) {
            console.log("handleDrop: ", draggingNode, dropNode, dropType);
            //1、当前节点最新的父节点id
            let pCid = 0;
            let siblings = null;
            if (dropType == "before" || dropType == "after") {
                pCid =
                    dropNode.parent.data.catId == undefined
                        ? 0
                        : dropNode.parent.data.catId;
                siblings = dropNode.parent.childNodes;
            } else {
                pCid = dropNode.data.catId;
                siblings = dropNode.childNodes;
            }
            this.pCid.push(pCid);

            //2、当前拖拽节点的最新顺序，
            for (let i = 0; i < siblings.length; i++) {
                if (siblings[i].data.catId == draggingNode.data.catId) {
                    //如果遍历的是当前正在拖拽的节点
                    let catLevel = draggingNode.level;
                    if (siblings[i].level != draggingNode.level) {
                        //当前节点的层级发生变化
                        catLevel = siblings[i].level;
                        //修改他子节点的层级
                        this.updateChildNodeLevel(siblings[i]);
                    }
                    this.updateNodes.push({
                        catId: siblings[i].data.catId,
                        sort: i,
                        parentCid: pCid,
                        catLevel: catLevel
                    });
                } else {
                    this.updateNodes.push({ catId: siblings[i].data.catId, sort: i });
                }
            }

            //3、当前拖拽节点的最新层级
            console.log("updateNodes", this.updateNodes);
        },
        updateChildNodeLevel (node) {
            if (node.childNodes.length > 0) {
                for (let i = 0; i < node.childNodes.length; i++) {
                    var cNode = node.childNodes[i].data;
                    this.updateNodes.push({
                        catId: cNode.catId,
                        catLevel: node.childNodes[i].level
                    });
                    this.updateChildNodeLevel(node.childNodes[i]);
                }
            }
        },
        allowDrop (draggingNode, dropNode, type) {
            //1、被拖动的当前节点以及所在的父节点总层数不能大于3

            //1）、被拖动的当前节点总层数
            console.log("allowDrop:", draggingNode, dropNode, type);
            //
            this.countNodeLevel(draggingNode);
            //当前正在拖动的节点+父节点所在的深度不大于3即可
            let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;
            console.log("深度：", deep);

            //   this.maxLevel
            if (type == "inner") {
                // console.log(
                //   `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}`
                // );
                return deep + dropNode.level <= 3;
            } else {
                return deep + dropNode.parent.level <= 3;
            }
        },
        countNodeLevel (node) {
            //找到所有子节点，求出最大深度
            if (node.childNodes != null && node.childNodes.length > 0) {
                for (let i = 0; i < node.childNodes.length; i++) {
                    if (node.childNodes[i].level > this.maxLevel) {
                        this.maxLevel = node.childNodes[i].level;
                    }
                    this.countNodeLevel(node.childNodes[i]);
                }
            }
        },
        edit (data) {
            console.log("要修改的数据", data);
            this.dialogType = "edit";
            this.title = "修改分类";
            this.dialogVisible = true;

            //发送请求获取当前节点最新的数据
            this.$http({
                url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
                method: "get"
            }).then(({ data }) => {
                //请求成功
                console.log("要回显的数据", data);
                this.category.name = data.data.name;
                this.category.catId = data.data.catId;
                this.category.icon = data.data.icon;
                this.category.productUnit = data.data.productUnit;
                this.category.parentCid = data.data.parentCid;
                this.category.catLevel = data.data.catLevel;
                this.category.sort = data.data.sort;
                this.category.showStatus = data.data.showStatus;
            });
        },
        append (data) {
            console.log("append", data);
            this.dialogType = "add";
            this.title = "添加分类";
            this.dialogVisible = true;
            this.category.parentCid = data.catId;
            this.category.catLevel = data.catLevel * 1 + 1;
            this.category.catId = null;
            this.category.name = "";
            this.category.icon = "";
            this.category.productUnit = "";
            this.category.sort = 0;
            this.category.showStatus = 1;
        },

        submitData () {
            if (this.dialogType == "add") {
                this.addCategory();
            }
            if (this.dialogType == "edit") {
                this.editCategory();
            }
        },
        //修改三级分类数据
        editCategory () {
            var { catId, name, icon, productUnit } = this.category;
            this.$http({
                url: this.$http.adornUrl("/product/category/update"),
                method: "put",
                data: this.$http.adornData({ catId, name, icon, productUnit }, false)
            }).then(({ data }) => {
                this.$message({
                    message: "菜单修改成功",
                    type: "success"
                });
                //关闭对话框
                this.dialogVisible = false;
                //刷新出新的菜单
                this.getMenus();
                //设置需要默认展开的菜单
                this.expandedKey = [this.category.parentCid];
            });
        },

        //添加三级分类
        addCategory () {
            console.log("提交的三级分类数据", this.category);
            this.$http({
                url: this.$http.adornUrl("/product/category/save"),
                method: "post",
                data: this.$http.adornData(this.category, false)
            }).then(({ data }) => {
                this.$message({
                    message: "菜单保存成功",
                    type: "success"
                });
                //关闭对话框
                this.dialogVisible = false;
                //刷新出新的菜单
                this.getMenus();
                //设置需要默认展开的菜单
                this.expandedKey = [this.category.parentCid];
            });
        },
        // 删除按钮点击事件
        remove (node, data) {
            var ids = [data.catId];
            this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl("/product/category/delete"),
                        method: "post",
                        data: this.$http.adornData(ids, false)
                    }).then(({ data }) => {
                        this.$message({
                            message: "菜单删除成功",
                            type: "success"
                        });
                        //刷新出新的菜单
                        this.getMenus();
                        //设置需要默认展开的菜单
                        this.expandedKey = [node.parent.data.catId];
                    });
                })
                .catch(() => { });

            console.log("remove", node, data);
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.getMenus();
    }
};
</script>