商品管理系统商品分类增删改查前后端实现

红太狼 2021-07-24 18:25 660阅读 0赞

# 一 前端实现 #

1 category.vue

<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)"
                >添加</el-button
              >
              
              <el-button type="text" size="mini" @click="edit(data)"
                >编辑</el-button
              >
              
              <el-button
                v-if="node.childNodes.length == 0"
                type="text"
                size="mini"
                @click="() => remove(node, data)"
                >删除</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, // 父分类id
            catLevel: 0, // 层级
            showStatus: 1, // 是否显示[0-不显示，1显示]
            sort: 0, // 排序
            productUnit: "", // 计量单位
            icon: "", // 图标地址
            catId: null, // 分类id
          },
          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 }) => {
            // 把返回结果中包含的 data 解构出来
            // data.data 菜单数据列表
            console.log("成功获取到菜单数据...", data.data);
            this.menus = data.data;
          });
        },
        // 批量删除
        batchDelete() {
          let catIds = [];
          // 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
          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: "post",
            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;
          });
        },
        /* 
          监听成功拖拽：共四个参数
          draggingNode：被拖拽节点对应的 Node
          dropNode：结束拖拽时最后进入的节点
          dropType被拖拽节点的放置位置（before、after、inner）
          event
        */
        handleDrop(draggingNode, dropNode, dropType, ev) {
          console.log("handleDrop: ", draggingNode, dropNode, dropType);
          //1、当前节点最新的父节点id
          let pCid = 0;
          // 当前节点拖拽后最新的兄弟
          let siblings = null;
          // draggingNode 节点在 dropNode节点的前面或后面
          if (dropType == "before" || dropType == "after") {
            pCid =
              dropNode.parent.data.catId == undefined // dropNode无父节点
                ? 0 // 父节点为0
                : dropNode.parent.data.catId; // 父节点为dropNode的父节点
            siblings = dropNode.parent.childNodes; // 兄弟为dropNode父节点的孩子
          } else {
            pCid = dropNode.data.catId; // 父节点为dropNode
            siblings = dropNode.childNodes; // 兄弟为dropNode的孩子
          }
          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]); // 递归调用子节点的子节点层级
            }
          }
        },
    
        /*
           draggingNode:被拖拽的当前节点
           dropNode：被拖拽的目标节点
           type：拖拽类型：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
         */
        allowDrop(draggingNode, dropNode, type) {
          console.log("allowDrop:", draggingNode, dropNode, type);
          // 计算被拖动的当前节点孩子节点中最大层数
          this.countNodeLevel(draggingNode);
    
          // 被拖动节点的深度（被拖动节点到最大层数孩子节点的层数）
          let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;
          console.log("深度：", deep);
    
          // 拖到目标节点内部
          if (type == "inner") {
            // console.log(
            //   `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}`
            // );
            // 当前正在拖动的节点+父节点所在的深度不大于3即可
            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; // 分类id
            this.category.icon = data.data.icon; // 图标地址
            this.category.productUnit = data.data.productUnit; // 计量单位
            this.category.parentCid = data.data.parentCid; // 父分类id
            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; // 父分类id
          this.category.catLevel = data.catLevel * 1 + 1; // 分类层级
          this.category.catId = null; // 分类id
          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() {
          // 解构下面4项，只发这4项
          var { catId, name, icon, productUnit } = this.category;
          //  发送修改请求
          this.$http({
            url: this.$http.adornUrl("/product/category/update"),
            method: "post",
            // 只发下面4项数据，因为只修改这4个数据
            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) {
          // 待删除节点id
          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 }) => {
                // 把返回结果中包含的 data 解构出来
                // 删除成功提示消息
                this.$message({
                  message: "菜单删除成功",
                  type: "success",
                });
                // 刷新出新的菜单
                this.getMenus();
                // 设置需要默认展开的菜单(删除节点的父节点要展开)
                this.expandedKey = [node.parent.data.catId];
              });
            }) // 点击取消按钮走这个分支
            .catch(() => {});
    
          console.log("remove", node, data);
        },
      },
      // 生命周期 - 创建完成（可以访问当前this实例）
      created() {
        // 获得菜单数据
        this.getMenus();
      },
      //生命周期 - 挂载完成（可以访问DOM元素）
      mounted() {},
      beforeCreate() {}, //生命周期 - 创建之前
      beforeMount() {}, //生命周期 - 挂载之前
      beforeUpdate() {}, //生命周期 - 更新之前
      updated() {}, //生命周期 - 更新之后
      beforeDestroy() {}, //生命周期 - 销毁之前
      destroyed() {}, //生命周期 - 销毁完成
      activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    };
    </script>
    <style scoped>
    </style>

# 二 后端实现 #

1 gulimall-gateway 配置路由

# 当访问 /api/product/** ，则负载均衡路由到 gulimall-product 服务的  /product 后端管理系统
    - id: product_route
      uri: lb://gulimall-product
      predicates:
        - Path=/api/product/**
      filters:
        # 过滤器实现路径重写功能：将 /api/** 重写为 /**，即去掉 api 前缀
        - RewritePath=/api/(?<segment>.*),/$\{segment}

2 guli-product 在bootstrap.properties中配置nacos注册中心地址

spring.application.name=gulimall-product
    
    spring.cloud.nacos.config.server-addr=127.0.0.1:8848
    spring.cloud.nacos.config.namespace=c8294b4e-0f13-496e-98d7-5172ba0db9e2

3 guli-product 的application.yml配置

spring:
      datasource:
        username: root
        password: root
        url: jdbc:mysql://192.168.0.110:3306/gulimall_pms
        driver-class-name: com.mysql.jdbc.Driver
      cloud:
        nacos:
          discovery:
            server-addr: 127.0.0.1:8848 # 配置nacos注册中心地址
      jackson:
        date-format: yyyy-MM-dd HH:mm:ss
    
    
    mybatis-plus:
      mapper-locations: classpath:/mapper/**/*.xml
      global-config:
        db-config:
          id-type: auto
          # 逻辑删除全局配置：1表示删除值
          logic-delete-value: 1
          # 逻辑删除全局配置：0表示未删除值
          logic-not-delete-value: 0
    server:
      port: 10000
    logging:
      level:
        # 调成debug后，可打印SQL语句
        com.atguigu.gulimall: debug

4 CategoryEntity实现

package com.atguigu.gulimall.product.entity;
    
    
    import com.baomidou.mybatisplus.annotation.TableField;
    import com.baomidou.mybatisplus.annotation.TableId;
    import com.baomidou.mybatisplus.annotation.TableLogic;
    import com.baomidou.mybatisplus.annotation.TableName;
    import com.fasterxml.jackson.annotation.JsonInclude;
    import lombok.Data;
    
    
    import java.io.Serializable;
    import java.util.List;
    
    
    /**
    * @className: CategoryEntity
    * @description: 商品三级分类实体类
    * @date: 2020/10/25
    * @author: cakin
    */
    @Data
    @TableName("pms_category")
    public class CategoryEntity implements Serializable {
        private static final long serialVersionUID = 1L;
        /**
         * 分类id
         */
        @TableId
        private Long catId;
        /**
         * 分类名称
         */
        private String name;
        /**
         * 父分类id
         */
        private Long parentCid;
        /**
         * 层级
         */
        private Integer catLevel;
        /**
         * 逻辑删除注解，value = "1"：表示未删除值，delval = "0"：表示删除值，配置这个的目的是覆盖全局配置，因为全局配置和这个相反
         * 是否显示[0-不显示，1显示]
         */
        @TableLogic(value = "1", delval = "0")
        private Integer showStatus;
        /**
         * 排序
         */
        private Integer sort;
        /**
         * 图标地址
         */
        private String icon;
        /**
         * 计量单位
         */
        private String productUnit;
        /**
         * 商品数量
         */
        private Integer productCount;
    
    
        @JsonInclude(JsonInclude.Include.NON_EMPTY)
        @TableField(exist = false) // 表示该字段在数据库中不存在，存储某个分类的子分类
        private List<CategoryEntity> children;
    }

5 控制器实现

package com.atguigu.gulimall.product.controller;
    
    
    import com.atguigu.common.utils.R;
    import com.atguigu.gulimall.product.entity.CategoryEntity;
    import com.atguigu.gulimall.product.service.CategoryService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    
    import java.util.Arrays;
    import java.util.List;
    
    
    /**
    * @className: CategoryController
    * @description: 商品三级分类
    * @date: 2020/10/25
    * @author: cakin
    */
    @RestController
    @RequestMapping("product/category")
    public class CategoryController {
        @Autowired
        private CategoryService categoryService;
    
    
        /**
         * 功能描述：查出所有分类以及子分类，以树形结构组装起来
         *
         * @return R 返回给前端数据
         * @author cakin
         * @date 2020/10/25
         * @description:
         */
        @RequestMapping("/list/tree")
        public R list() {
            List<CategoryEntity> entities = categoryService.listWithTree();
            return R.ok().put("data", entities);
        }
    
    
    
    
        /**
         * 信息
         */
        @RequestMapping("/info/{catId}")
        public R info(@PathVariable("catId") Long catId) {
            CategoryEntity category = categoryService.getById(catId);
            return R.ok().put("data", category);
        }
    
    
        /**
         * 保存
         */
        @RequestMapping("/save")
        public R save(@RequestBody CategoryEntity category) {
            categoryService.save(category);
            return R.ok();
        }
    
    
        /**
         * 功能描述：批量更新分类列表
         *
         * @author cakin
         * @date 2020/10/26
         * @param category 分类数组
         * @return R 返回给前端的数据
         */
        @RequestMapping("/update/sort")
        public R updateSort(@RequestBody CategoryEntity[] category) {
            categoryService.updateBatchById(Arrays.asList(category));
            return R.ok();
        }
    
    
        /**
         * 修改
         */
        @RequestMapping("/update")
        public R update(@RequestBody CategoryEntity category) {
            categoryService.updateCascade(category);
            return R.ok();
        }
    
    
        /**
         * 功能描述：删除分类
         *
         * @param catIds 待删除分类id列表
         * @return R 返回给前端的数据
         * @author cakin
         * @date 2020/10/25
         */
        @RequestMapping("/delete")
        public R delete(@RequestBody Long[] catIds) {
            categoryService.removeMenuByIds(Arrays.asList(catIds));
            return R.ok();
        }
    }

6 实现类实现

package com.atguigu.gulimall.product.service.impl;
    
    
    import com.atguigu.common.utils.PageUtils;
    import com.atguigu.common.utils.Query;
    import com.atguigu.gulimall.product.dao.CategoryDao;
    import com.atguigu.gulimall.product.entity.CategoryEntity;
    import com.atguigu.gulimall.product.service.CategoryBrandRelationService;
    import com.atguigu.gulimall.product.service.CategoryService;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    import org.springframework.transaction.annotation.Transactional;
    
    
    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.List;
    import java.util.Map;
    import java.util.stream.Collectors;
    
    
    @Service("categoryService")
    public class CategoryServiceImpl extends ServiceImpl<CategoryDao, CategoryEntity> implements CategoryService {
        
        @Autowired
        CategoryBrandRelationService categoryBrandRelationService;
    
    
        @Override
        public PageUtils queryPage(Map<String, Object> params) {
            IPage<CategoryEntity> page = this.page(
                    new Query<CategoryEntity>().getPage(params),
                    new QueryWrapper<CategoryEntity>()
            );
            return new PageUtils(page);
        }
    
    
        /**
         * 功能描述：查出所有分类以及子分类，以树形结构组装起来
         *
         * @author cakin
         * @date 2020/10/25
         * @return List<CategoryEntity>:树形结构列表返回父子结构
         * @description:
         */
        @Override
        public List<CategoryEntity> listWithTree() {
            // 1 查出所有分类
            List<CategoryEntity> entities = baseMapper.selectList(null);
            // 2 组装成父子的树形结构
            // 2.1 找到所有的一级分类
            List<CategoryEntity> level1Menus = entities.stream()
                    .filter(categoryEntity -> categoryEntity.getParentCid() == 0) // 过滤一级分类
                    .map((menu) -> {
                        menu.setChildren(getChildrens(menu, entities));
                        return menu;
                    }) // 设置一级二类的孩子
                    .sorted((menu1, menu2) -> {
                        return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
                    }) // 给一级分类排序
                    .collect(Collectors.toList());
            // 2.2 返回一级分类列表
            return level1Menus;
        }
    
    
        /**
         * 功能描述：实现逻辑批量删除
         *
         * @author cakin
         * @date 2020/10/25
         * @param asList 批量删除id列表
         */
        @Override
        public void removeMenuByIds(List<Long> asList) {
            // TODO  检查当前删除的菜单，是否被别的地方引用
            // 逻辑删除
            baseMapper.deleteBatchIds(asList);
        }
    
    
        //[2,25,225]
        @Override
        public Long[] findCatelogPath(Long catelogId) {
            List<Long> paths = new ArrayList<>();
            List<Long> parentPath = findParentPath(catelogId, paths);
    
    
            Collections.reverse(parentPath);
            
            return parentPath.toArray(new Long[parentPath.size()]);
        }
    
    
        /**
         * 级联更新所有关联的数据
         *
         * @param category
         */
        @Transactional
        @Override
        public void updateCascade(CategoryEntity category) {
            this.updateById(category);
            categoryBrandRelationService.updateCategory(category.getCatId(), category.getName());
        }
    
    
        //225,25,2
        private List<Long> findParentPath(Long catelogId, List<Long> paths) {
            //1、收集当前节点id
            paths.add(catelogId);
            CategoryEntity byId = this.getById(catelogId);
            if (byId.getParentCid() != 0) {
                findParentPath(byId.getParentCid(), paths);
            }
            return paths;
    
    
        }
    
    
        /**
         * 功能描述：递归查找某个菜单的子菜单
         *
         * @param root 当前菜单
         * @param all  所有分类
         * @return List<CategoryEntity> 当前菜单的子菜单列表
         * @author cakin
         * @date 2020/10/23
         */
        private List<CategoryEntity> getChildrens(CategoryEntity root, List<CategoryEntity> all) {
            // 当前菜单的子菜单列表
            List<CategoryEntity> children = all.stream()
                    .filter(categoryEntity -> {
                        return categoryEntity.getParentCid() == root.getCatId();
                    }) // 找出了二级菜单
                    .map(categoryEntity -> {
                        // 1 找到子菜单
                        categoryEntity.setChildren(getChildrens(categoryEntity, all));
                        return categoryEntity;
                    }) // 为二级菜单找到它的三级子菜单列表
                    .sorted((menu1, menu2) -> {
                        // 2 菜单的排序
                        return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
                    }) // 二级菜单排序
                    .collect(Collectors.toList());
            return children;
        }
    }

# 三 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 四 总结 #

1 vue的相关模板

{
        "Print to console": {
            "prefix": "vue",
            "body": [
                "",
                "<template>",
                "<div class='$2'>$5</div>",
                "</template>",
                "",
                "<script>",
                "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
                "//例如：import 《组件名称》 from '《组件路径》';",
                "",
                "export default {",
                "//import引入的组件需要注入到对象中才能使用",
                "components: {},",
                "data() {",
                "//这里存放数据",
                "return {",
                "",
                "};",
                "},",
                "//监听属性 类似于data概念",
                "computed: {},",
                "//监控data中的数据变化",
                "watch: {},",
                "//方法集合",
                "methods: {",
                "",
                "},",
                "//生命周期 - 创建完成（可以访问当前this实例）",
                "created() {",
                "",
                "},",
                "//生命周期 - 挂载完成（可以访问DOM元素）",
                "mounted() {",
                "",
                "},",
                "beforeCreate() {}, //生命周期 - 创建之前",
                "beforeMount() {}, //生命周期 - 挂载之前",
                "beforeUpdate() {}, //生命周期 - 更新之前",
                "updated() {}, //生命周期 - 更新之后",
                "beforeDestroy() {}, //生命周期 - 销毁之前",
                "destroyed() {}, //生命周期 - 销毁完成",
                "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
                "}",
                "</script>",
                "<style scoped>",
                "$4",
                "</style>"
            ],
            "description": "Log output to console"
        },
        "http-get请求": {
            "prefix": "httpget",
            "body": [
                "this.\\$http({",
                "url: this.\\$http.adornUrl(''),",
                "method: 'get',",
                "params: this.\\$http.adornParams({})",
                "}).then(({ data }) => {",
                "})"
            ],
            "description": "httpGET请求"
        },
        "http-post请求": {
            "prefix": "httppost",
            "body": [
                "this.\\$http({",
                "url: this.\\$http.adornUrl(''),",
                "method: 'post',",
                "data: this.\\$http.adornData(data, false)",
                "}).then(({ data }) => { });"
            ],
            "description": "httpPOST请求"
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/54040817ae364729a4414d9583d6597d.png