一、通过Java8 Stream API 获取商品三级分类数据

电商项目的分类有多级（一级、二级、三级)。
image.png
我们通过数据库来维护三级分类的数据（对应gulimall_pms库中的pms_category表）。
image.png
向表中插入数据，pms_catelog.sql

1.1 修改gulimall-product模块

目的是为了树形展示三级分类数据

1.1.0 修改CategoryEntity

  1. package com.atguigu.gulimall.gulimallproduct.entity;
  3. import com.baomidou.mybatisplus.annotation.TableField;
  4. import com.baomidou.mybatisplus.annotation.TableId;
  5. import com.baomidou.mybatisplus.annotation.TableName;
  7. import java.io.Serializable;
  8. import java.util.Date;
  9. import java.util.List;
  11. import lombok.Data;
  13. /**
  14.  * 商品三级分类
  15.  * 
  16.  * @author mrlinxi
  17.  * @email mrzheme@vip.qq.com
  18.  * @date 2021-12-07 19:17:01
  19.  */
  20. @Data
  21. @TableName("pms_category")
  22. public class CategoryEntity implements Serializable {
  23.     private static final long serialVersionUID = 1L;
  25.     /**
  26.      * 分类id
  27.      */
  28.     @TableId
  29.     private Long catId;
  30.     /**
  31.      * 分类名称
  32.      */
  33.     private String name;
  34.     /**
  35.      * 父分类id
  36.      */
  37.     private Long parentCid;
  38.     /**
  39.      * 层级
  40.      */
  41.     private Integer catLevel;
  42.     /**
  43.      * 是否显示[0-不显示，1显示]
  44.      */
  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.     @TableField(exist = false)  // 这个注解表示改属性不是表里面的
  64.     private List<CategoryEntity> children;
  66. }

1.1.1 修改CategoryController

这里给CategoryController添加一个方法，功能是返回树形结构的所有分类

  1. /**
  2.  * 查出所有分类以及子分类，以树形结构组装起来
  3.  */
  4. @RequestMapping("/list/tree")
  5. //@RequiresPermissions("gulimallproduct:category:list")
  6. public R list(){
  7.     // categoryService的list方法可以查到所有分类
  8.     // 但是我们希望以树形结构获得所有分类
  9.     // List<CategoryEntity> list = categoryService.list();
  11.     // 我们需要一个listWithTree方法来生成分类的树形结构
  12.     List<CategoryEntity> entities = categoryService.listWithTree();
  13.     return R.ok().put("data", entities);
  14. }

1.1.2 CategoryService

  1. package com.atguigu.gulimall.gulimallproduct.service;
  3. import com.baomidou.mybatisplus.extension.service.IService;
  4. import com.atguigu.common.utils.PageUtils;
  5. import com.atguigu.gulimall.gulimallproduct.entity.CategoryEntity;
  7. import java.util.List;
  8. import java.util.Map;
  10. /**
  11.  * 商品三级分类
  12.  *
  13.  * @author mrlinxi
  14.  * @email mrzheme@vip.qq.com
  15.  * @date 2021-12-07 19:17:01
  16.  */
  17. public interface CategoryService extends IService<CategoryEntity> {
  19.     PageUtils queryPage(Map<String, Object> params);
  21.     List<CategoryEntity> listWithTree();
  22. }

1.1.3 CategoryServiceImpl

  1. package com.atguigu.gulimall.gulimallproduct.service.impl;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Service;
  6. import java.util.List;
  7. import java.util.Map;
  8. import java.util.stream.Collectors;
  10. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  11. import com.baomidou.mybatisplus.core.metadata.IPage;
  12. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  13. import com.atguigu.common.utils.PageUtils;
  14. import com.atguigu.common.utils.Query;
  16. import com.atguigu.gulimall.gulimallproduct.dao.CategoryDao;
  17. import com.atguigu.gulimall.gulimallproduct.entity.CategoryEntity;
  18. import com.atguigu.gulimall.gulimallproduct.service.CategoryService;
  21. @Service("categoryService")
  22. public class CategoryServiceImpl extends ServiceImpl<CategoryDao, CategoryEntity> implements CategoryService {
  23.     // 因为CategoryServiceImpl继承了ServiceImpl
  24.     // 所以这里可以直接使用ServiceImpl里面的baseMapper
  25.     // baseMapper就是一个CategoryDao的实现，通过泛型实现
  26.     @Autowired
  27.     CategoryDao categoryDao;
  30.     @Override
  31.     public PageUtils queryPage(Map<String, Object> params) {
  32.         IPage<CategoryEntity> page = this.page(
  33.                 new Query<CategoryEntity>().getPage(params),
  34.                 new QueryWrapper<CategoryEntity>()
  35.         );
  37.         return new PageUtils(page);
  38.     }
  40.     @Override
  41.     public List<CategoryEntity> listWithTree() {
  42.         // 1、查出所有分类
  43. //        List<CategoryEntity> entities = baseMapper.selectList(null);
  44.         List<CategoryEntity> entities = categoryDao.selectList(null);
  46.         // 2、组装成树形父子结构
  47.         // 2.1 找到所有的一级分类
  48.         // 这里用到了java8的新特性Stream API 以及lambda表达式
  49.         // 首先通过对象的.stream()方法获取Stream的实例
  50.         // 然后通过filter过滤器选取流中的元素
  51.         // map接收一个函数作为参数，该函数会被应用到每个元素上，并将其映射成一个新的元素
  52.         List<CategoryEntity> level1Menu = entities.stream().filter(categoryEntity -> {
  53.             return categoryEntity.getParentCid() == 0;   // 过滤分类级别，保留1级分类
  54.         }).map(menu -> {
  55.             menu.setChildren(getChildren(menu, entities));  // 找到当前分类的子分类
  56.             return menu;
  57.         }).sorted((menu1, menu2) -> {   // 按sort属性排序
  58.             return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
  59.         }).collect(Collectors.toList());   // 最后将处理完的流转为一个list的形式
  61.         return level1Menu;
  62.     }
  64.     /**
  65.      * 递归查找所有菜单的子菜单
  66.      */
  67.     private List<CategoryEntity> getChildren(CategoryEntity root, List<CategoryEntity> all) {
  68.         List<CategoryEntity> children = all.stream().filter(categoryEntity -> {
  69.             // 找到all里面父菜单是root的元素
  70.             return categoryEntity.getParentCid().equals(root.getCatId());
  71.         }).map(categoryEntity -> {
  72.             // 找到all里面父菜单是root的元素的子菜单
  73.             categoryEntity.setChildren(getChildren(categoryEntity, all));
  74.             return categoryEntity;
  75.         }).sorted((menu1, menu2) -> {
  76.             // 按sort属性排序
  77.             return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
  78.         }).collect(Collectors.toList());
  79.         return children;
  80.     }
  81. }

这里对stream进行排序的时候不能直接使用自然排序，因为我们需要按照sort属性来排序，所以需要自定一个Comparator。
访问http://localhost:10000/gulimallproduct/category/list/tree 测试一下
image.png

二、前端路由规范/跨域之三级分类

我们先启动后台的renren-fast模块，再启动前端项目renrne-fast-vue
启动renren-fast的时候可能报错：
You aren’t using a compiler supported by lombok, so lombok will not work and has been disabled.
解决方法

2.1 商品系统新增侧边导航目录

image.png
添加的这个目录信息会记录在gulimall_admin数据库的sys_menu表中。

2.2 商品系统新增分类维护菜单

image.png
同样，分类维护菜单信息也会记录在sys_menu表中。我们在分类维护的菜单中维护商品的三级分类。

2.3 Vue脚手架路由规范

当点击侧边栏目录新增的分类维护时，会跳转到 /product-category，对应新增菜单设置的路由 product/categor。菜单路由中填写的’/‘会变成’-‘
image.png
页面：对应前端项目中 src/views/modules/product/category.vue 页面组件（但是目前没有）；我们可以看看角色管理(sys-role)页面，其对应的是前端项目中的src\views\modules\sys\role.vue页面组件
所以，我们在src\views\modules下新建一个product文件夹，在里面创建category.vue页面组件，显示三级目录。
通过使用element-ui的Tree 树形控件来实现三级菜单的展示树形控件

三、配置网关和跨域配置

本节会解决一个前端向多个后端服务请求的问题(API网关)，此外还有网关服务与前端前后分离的跨域问题。

3.1 前端工程配置API网关作为唯一接口

修改模板的内容，自定义一个getMenu()函数，在创建完成时调用这个函数。
image.png可以发现报404错误，这是因为请求的URL是写死的，我们根据不同的需求，动态的发送不同的请求。我们在vs中搜索http://localhost:8080/renren-fast
image.png，在static\config\indes.js文件中定义了api接口请求地址。为了动态的发送请求，我们将这里改成后端网关的url地址（端口号88）。
image.png
改了之后我们刷新页面发现需要重新登录，而且验证码都没有了，因为前端项目将验证码的url发送给了网关，但网关找不到验证码的后端服务（renren-fast）
image.png
因此，我们需要将renren-fast注册到注册中心。

3.2 将renren-fast接入网关服务配置

上面renren-fast-vue配置了请求为网关地址，那么原来应该发送到renren-fast的请求发送到了网关，所以这里需要请求通过网关转发到renren-fast。

3.2.1 renren-fast注册进nacos

在renren-fast中添加gulimall-common的依赖（common中包含了nacos作为注册/配置中心的依赖）

  1. <dependency>
  2.   <groupId>com.atguigu.gulimall</groupId>
  3.   <artifactId>gulimall-common</artifactId>
  4.   <version>0.0.1-SNAPSHOT</version>
  5. </dependency>

然后修改renrne-fast的application.yml，设置注册到nacos，然后在主启动类上加上@EnableDiscoveryClient注解，重启。
image.png
重启报错：（视频里面是报错com.google.gson不存在，但是我的是报错methodnot exist，可能是项目版本问题）网上搜了下，手动添加guava依赖，并将版本换成31.0-jre（30之前都存在漏洞）重启成功！
image.png

  1. <dependency>
  2.   <groupId>com.google.guava</groupId>
  3.   <artifactId>guava</artifactId>
  4.   <version>30.0-jre</version>
  5. </dependency>

3.2.2 网关增加路由断言转发到不同服务

在gulimall-gateway中添加路由规则，这里我们约定从前端过来的请求在url上均有/api前缀

  1. server:
  2.   port: 88
  3. spring:
  4.   application:
  5.     name: gulimall-gateway
  6.   cloud:
  7.     nacos:
  8.       discovery:
  9.         server-addr: localhost:8848  #nacos注册中心的地址
  10.     gateway:
  11.       routes:
  12.         #Query A 参数有A就行，Query B,C 参数B的值为C即可  C可以是正则表达式
  13.         #实现针对于“http://localhost:88/hello?url=baidu”，转发到“https://www.baidu.com/hello”，
  14.         #针对于“http://localhost:88/hello?url=qq”的请求，转发到“https://www.qq.com/hello”
  15.         - id: baidu_router
  16.           uri: https://www.baidu.com   # 要转发的地址
  17.           predicates:
  18.             - Query=url,baidu
  20.         - id: qq_router
  21.           uri: https://www.qq.com
  22.           predicates:
  23.             - Query=url,qq
  25.         - id: admin_router
  26.           uri: lb://renren-fast   # lb://服务名  进行负载均衡转发
  27.           predicates:   # 我们约定，前端项目来的请求均带有api的前缀
  28.             - Path=/api/**
  29.           filters:   
  30.             - RewritePath=/api/(?<segment>.*), /renren-fast/$\{segment}  #路径重写，替换/api前缀，加上/renren-fast

image.png
但是在网关配置转发后还是报404，这是因为网关转发的时候会转发成http://localhost:8080/api/captcha.jpg，而我们需要的转发url是http://localhost:8080/renren-fast/captcha.jpg。因此需要用路由中的路径重写`RewritePath`。[springcloudgateway路径重写文档](https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/#the-rewritepath-gatewayfilter-factory)
现在可以显示验证码了，但是登陆还是报错：
image.png
image.png
被CORS策略（Access-Control-Allow-Origin，访问控制允许来源）阻塞，这是由跨域引起的错误。

3.3 网关服务配置跨域

那么什么是跨域呢？跨域指的是浏览器不能执行其他网站的脚本。他是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
同源策略：是指协议、域名、端口都要相同，其中有一个不同都会产生跨域
image.png
解决方式：

  1. 使用nginx部署为同一域

image.png

  1. 配置当次允许跨域请求

添加响应头

  • Access-Control-Allow-Origin：支持哪些来源的请求跨域
  • Access-Control-Allow-Methods：支持哪些方法跨域
  • Access-Control-Allow-Credentials：跨域请求默认不包含cookie，设置为true可以包含 cookie
  • Access-Control-Expose-Headers：跨域请求暴露的字段
    • CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段： Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如 果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
  • Access-Control-Max-Age：表明该响应的有效时间为多少秒。在有效时间内，浏览器无 须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果 该首部字段的值超过了最大有效时间，将不会生效。

因为每个服务都可能产生跨域，不可能每个服务都进行修改，而我们是通过网关代理给其他服务，所以直接在网关中统一配置跨域即可。

3.3.1 gulimall-gateway配置跨域

我们新建config包，然后新建一个跨域配置类

  1. package com.atguigu.gulimall.gulimallgateway.config;
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import org.springframework.web.cors.CorsConfiguration;
  6. import org.springframework.web.cors.reactive.CorsWebFilter;
  7. import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
  9. /**
  10.  * @author mrlinxi
  11.  * @create 2022-03-03 14:13
  12.  */
  13. @Configuration
  14. public class GulimallCorsConfiguration {
  15.     @Bean
  16.     public CorsWebFilter corsWebFilter() {
  17.         // 这个是CorsConfigurationSource的一个实现类
  18.         // reactive包下的，因为我们使用的响应式编程
  19.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  20.         // 新建一个Cors的配置对象，在这个配置对象中指定跨域配置
  21.         CorsConfiguration corsConfiguration = new CorsConfiguration();
  22.         //1、配置跨域
  23.         corsConfiguration.addAllowedHeader("*"); //允许哪些头进行跨域
  24.         corsConfiguration.addAllowedMethod("*");  // 允许所有请求方式进行跨域
  25.         corsConfiguration.addAllowedOrigin("*"); // 允许任意请求来源 进行跨域
  26.         corsConfiguration.setAllowCredentials(true);  // 允许携带cookie进行跨域
  28.         // /**表示所有路径，我们对所有路径都用corsConfiguration这个跨域配置
  29.         source.registerCorsConfiguration("/**", corsConfiguration);
  30.         return new CorsWebFilter(source);
  31.     }
  32. }

如果springboot版本高于2.4的话 corsConfiguration.addAllowedOrigin(““);要替换成corsConfiguration.addAllowedOriginPattern(““);

image.pngOption域前请求成功，但是真实的登陆请求存在报错：

Access to XMLHttpRequest at ‘http://localhost:88/api/sys/login’ from origin ‘http://localhost:8001‘ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:8001, http://localhost:8001‘, but only one is allowed.

这是因为renren-fast服务中自己配置了跨域，与gateway重复了，这里会导致请求头添加重复，导致跨域失败。所以需要将其注释掉。删除 src/main/java/io/renren/config/CorsConfig.java 中的配置内容。

3.3.2 测试

重启renren-fast后，可以看到成功登陆。
image.pngimage.png

3.4 配置网关转发到gulimall-product

我们前面成功登陆了前端页面，在浏览三级目录的时候可以发现报错：
image.png
这是因为我们将前端的请求都转到了renrne-fast，而这里需要转到gulimall-product微服务。

注意：转发到renrne-fast的断言是/api/，转发到gulimall-product的断言是/api/gulimallproduct/，在设置路由规则的时候，较精确的断言要放在模糊的前面，网关是根据配置的顺序依次判断，如果模糊断言在精确断言之前，那么精确断言会失效。

  1. server:
  2.   port: 88
  3. spring:
  4.   application:
  5.     name: gulimall-gateway
  6.   cloud:
  7.     nacos:
  8.       discovery:
  9.         server-addr: localhost:8848  #nacos注册中心的地址
  10.     gateway:
  11.       routes:
  12.         #Query A 参数有A就行，Query B,C 参数B的值为C即可  C可以是正则表达式
  13.         #实现针对于“http://localhost:88/hello?url=baidu”，转发到“https://www.baidu.com/hello”，
  14.         #针对于“http://localhost:88/hello?url=qq”的请求，转发到“https://www.qq.com/hello”
  15.         - id: baidu_router
  16.           uri: https://www.baidu.com   # 要转发的地址
  17.           predicates:
  18.             - Query=url,baidu
  20.         - id: qq_router
  21.           uri: https://www.qq.com
  22.           predicates:
  23.             - Query=url,qq
  25.         # 注意product_route 跟 admin_router的顺序，网关在进行断言时，会根据断言的先后顺序进行操作
  26.         # 所以精确断言需要写在模糊断言之前    
  27.         - id: product_route 
  28.           uri: lb://gulimall-product   # lb://服务名  进行负载均衡转发
  29.           predicates:     # 对包含有/api/gulimallproduct的url请求进行路径重写
  30.             - Path=/api/gulimallproduct/**
  31.           filters:   
  32.             - RewritePath=/api/(?<segment>.*), /$\{segment}
  34.         - id: admin_router
  35.           uri: lb://renren-fast   # lb://服务名  进行负载均衡转发
  36.           predicates:   # 我们约定，前端项目来的请求均带有api的前缀
  37.             - Path=/api/**
  38.           filters:
  39.             - RewritePath=/api/(?<segment>.*), /renren-fast/$\{segment}
  40. # http://localhost:88/api/captcha.jpg?uuid=xxxx   http://localhost:8080/renren-fast/captcha.jpg?uuid=xxxx

在nacos新建gulimall-product的命名空间，用于存储其配置文件（视频到这里并没有把配置放在nacos中）；视频里面将gulimall-product注册到了nacos，这个我在最开始就弄了，所以就不过多介绍了。

四、三级分类——增删改

4.1 删除

我们需要实现三级菜单分类的删除功能，即前端点击删除，发送请求到guliamll-product模块，后端模块进行删除操作。
逆向工程生成的代码可以完成删除，但是在删除前，我们需要判断当前删除的菜单是否在其他地方被引用，所以我们需要修改逆向工程生成的代码。同时我们在删除记录时，并不是使用物理删除（删除数据库中的记录），而是使用逻辑删除（不删除原始记录，只是不显示，数据库表中show_status属性）。这里需要使用到mybatis-plus的逻辑删除。

4.1.1 配置逻辑删除

修改guliamll-product，配置mybatis-plus的逻辑删除：mybatis-plus逻辑删除文档

  1. 在application.yml文件中加入逻辑删除的配置
  2. 实体字段上加@TableLogic注解（如果第一步配置了logic-delete-field（3.3.0版本生效），则该步骤可以省略）

注：@TableLogic注解，可以设定image.png，value表示逻辑不删除时的值，delval表示逻辑删除时候的值，不指定会从配置文件获取，指定会优先使用指定的值。

application.yml

  1. # 配置数据源
  2. spring:
  3.   datasource:
  4.     username: root
  5.     password: 10086
  6.     url: jdbc:mysql://192.168.190.135:3306/gulimall_pms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
  7.     driver-class-name: com.mysql.cj.jdbc.Driver
  8.   application:
  9.     name: gulimall-product # 注册到nacos中的服务名
  10.   cloud:
  11.     nacos:
  12.       discovery:
  13.         server-addr: localhost:8848 #nacos注册中心的地址
  15. # 配置mybatis-plus
  16. mybatis-plus:
  17.   mapper-locations: classpath:/mapper/**/*.xml # 配置sql映射目录
  18.   global-config:
  19.     db-config:
  20.       id-type: auto  # 配置主键自增
  21.       logic-delete-field: showStatus # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
  22.       # 我们数据库里面未删除是1，已删除是0，所以需要换一下，在@TableLogic指定也可以
  23.       logic-delete-value: 0  # 逻辑已删除值(默认为 1)  
  24.       logic-not-delete-value: 1  # 逻辑未删除值(默认为 0)
  25. server:
  26.   port: 10000

CategoryEntity

  1. @TableLogic(value = "1", delval = "0")
  2. private Integer showStatus;

4.1.2 修改删除逻辑

修改gulimall-product的CategoryController
在delete方法中，新定义一个removeMenuByIds，改方法在删除前会检查是否存在引用。

  1. /**
  2.  * 删除
  3.  * @RequestBody： 获取请求体，只有post请求才有请求体
  4.  * SpringMVC自动将请求体的数据（json），转为对应的对象
  5.  */
  6. @RequestMapping("/delete")
  7. //@RequiresPermissions("gulimallproduct:category:delete")
  8. public R delete(@RequestBody Long[] catIds){
  10.     ///categoryService.removeByIds(Arrays.asList(catIds));
  12.     categoryService.removeMenuByIds(Arrays.asList(catIds));
  14.     return R.ok();
  15. }

在这里添加方法后CategoryService跟CategoryServiceImpl都需要进行相应的修改，CategoryService直接生成一个方法即可。
CategoryServiceImpl实现removeMenuByIds方法

  1. @Override
  2. public void removeMenuByIds(List<Long> asList) {
  3.     //TODO  1、检查当前删除的菜单是否被别的地方引用
  5.     // 我们一般不使用直接删除的方式，而是使用逻辑删除，即不是删除数据库中的记录，而是不显示，showStatus
  6.     baseMapper.deleteBatchIds(asList);
  7. }

这里我们暂时还没有完成引用检查，所以用了个TODO，使用TODO注释后，在Idea下面的TODO栏可以看到代办事项：
image.png

4.1.3 批量删除（视频顺序是在4.3节之后）

这里也都是前端代码的修改，后台五分钟，前端两小时。

4.2 添加&修改

我们想达到的目的是，点击Append/Edit按钮，弹出一个对话框，在对话框中输入我们要添加/修改的分类目录信息，随后即可添加至目录。（需要用到el的dialog）添加/修改主要是前端的修改，后端代码不需要进行修改。
image.pngimage.png
前端代码：

  1. <template>
  2.   <div>
  3.     <!-- 使用el的树形控件 -->
  4.     <el-tree
  5.       :data="menus"
  6.       :props="defaultProps"
  7.       :expand-on-click-node="false"
  8.       show-checkbox
  9.       node-key="catId"
  10.       :default-expanded-keys="expandedKey"
  11.     >
  12.       <span class="custom-tree-node" slot-scope="{ node, data }">
  13.         <span>{{ node.label }}</span>
  14.         <span>
  15.           <!-- 添加按钮 只有1、2级菜单能添加子菜单-->
  16.           <el-button
  17.             v-if="node.level <= 2"
  18.             type="text"
  19.             size="mini"
  20.             @click="() => append(data)"
  21.           >
  22.             Append
  23.           </el-button>
  24.           <!-- 修改按钮 -->
  25.           <el-button type="text" size="mini" @click="() => edit(data)">
  26.             Edit
  27.           </el-button>
  28.           <!-- 删除按钮 没有子菜单的菜单才能进行删除-->
  29.           <el-button
  30.             v-if="node.childNodes.length == 0"
  31.             type="text"
  32.             size="mini"
  33.             @click="() => remove(node, data)"
  34.           >
  35.             Delete
  36.           </el-button>
  37.         </span>
  38.       </span>
  39.     </el-tree>
  40.     <el-dialog
  41.       v-bind:title="title"
  42.       :visible.sync="dialogVisible"
  43.       width="30%"
  44.       :close-on-click-modal="false"
  45.     >
  46.       <el-form :model="category">
  47.         <el-form-item label="分类名称">
  48.           <el-input v-model="category.name" autocomplete="off"></el-input>
  49.         </el-form-item>
  50.       </el-form>
  51.       <el-form :model="category">
  52.         <el-form-item label="图标">
  53.           <el-input v-model="category.icon" autocomplete="off"></el-input>
  54.         </el-form-item>
  55.       </el-form>
  56.       <el-form :model="category">
  57.         <el-form-item label="计量单位">
  58.           <el-input
  59.             v-model="category.prodcutUnit"
  60.             autocomplete="off"
  61.           ></el-input>
  62.         </el-form-item>
  63.       </el-form>
  64.       <span slot="footer" class="dialog-footer">
  65.         <el-button @click="dialogVisible = false">取 消</el-button>
  66.         <el-button type="primary" @click="submitData">确 定</el-button>
  67.       </span>
  68.     </el-dialog>
  69.   </div>
  70. </template>
  72. <script>
  73. //这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
  74. //例如：import 《组件名称》 from '《组件路径》';
  76. export default {
  77.   //import 引入的组件需要注入到对象中才能使用
  78.   components: {},
  79.   props: {},
  80.   data() {
  81.     return {
  82.       title: "", //用于显示修改/添加
  83.       dialogType: "", //用于区分是修改对话框还是添加对话框 edit,add
  84.       category: {
  85.         name: "",
  86.         parentCid: 0,
  87.         catLevel: 0,
  88.         showStatus: 1,
  89.         sort: 0,
  90.         productUnit: "",
  91.         icon: "",
  92.         catId: null,
  93.       },
  94.       dialogVisible: false,
  95.       menus: [],
  96.       expandedKey: [],
  97.       defaultProps: {
  98.         children: "children",
  99.         label: "name",
  100.       },
  101.     };
  102.   },
  103.   methods: {
  104.     // 获取三级菜单
  105.     getMenus() {
  106.       this.$http({
  107.         // url表示我们的请求地址
  108.         url: this.$http.adornUrl("/gulimallproduct/category/list/tree"),
  109.         method: "get",
  110.       }).then(({ data }) => {
  111.         console.log("成功获取到菜单数据。。。", data.data);
  112.         this.menus = data.data;
  113.       });
  114.     },
  115.     // 获取要修改的菜单信息
  116.     edit(data) {
  117.       console.log("要修改的数据是：", data);
  118.       this.title = "修改分类";
  119.       this.dialogType = "edit";
  120.       this.dialogVisible = true;
  122.       // 为了防止回显的数据不是最新的（类似于脏读），发送请求获取当前节点最新的数据
  123.       this.$http({
  124.         url: this.$http.adornUrl(
  125.           `/gulimallproduct/category/info/${data.catId}`
  126.         ),
  127.         method: "get",
  128.       }).then(({ data }) => {
  129.         //请求成功
  130.         console.log("需要回显的数据", data);
  131.         // this.category.name = data.category.name;
  132.         // this.category.catId = data.category.catId;
  133.         // this.category.icon = data.category.icon;
  134.         // this.category.productUnit = data.category.productUnit;
  135.         // this.category.parentCid = data.category.parentCid;
  136.         // this.category.catLevel = data.category.catLevel;
  137.         // this.category.sort = data.category.sort;
  138.         // this.category.showStatus = data.category.showStatus;
  139.         this.category = data.category; // 可以直接用这种方式,自动解构
  140.       });
  141.     },
  142.     // 获取要添加的菜单信息
  143.     append(data) {
  144.       //this.category = {};
  145.       console.log("append", data);
  146.       this.title = "添加分类";
  147.       this.dialogType = "add";
  148.       this.dialogVisible = true;
  149.       this.category.parentCid = data.catId;
  150.       this.category.catLevel = data.catLevel * 1 + 1;
  151.       this.category.name = "";
  152.       this.category.catId = null;
  153.       this.category.icon = "";
  154.       this.category.productUnit = "";
  155.       this.category.sort = 0;
  156.       this.category.showStatus = 1;
  157.     },
  158.     // submitData，这个方法根据dialogTyep值调用editCategory跟addCategory方法
  159.     submitData() {
  160.       if (this.dialogType == "add") {
  161.         this.addCategory();
  162.       }
  163.       if (this.dialogType == "edit") {
  164.         this.editCategory();
  165.       }
  166.     },
  167.     // 修改三级分类
  168.     editCategory() {
  169.       var { catId, name, icon, productUnit } = this.category; // 通过结构表达式获取当前要修改的属性
  170.       // var data = {catId: catId, name: name, icon: icon, productUnit: productUnit};
  171.       var data = { catId, name, icon, productUnit }; // 属性名跟变量名相同可以省略
  172.       console.log("提交的三级分类数据", this.category);
  173.       this.$http({
  174.         url: this.$http.adornUrl("/gulimallproduct/category/update"),
  175.         method: "post",
  176.         // 这里data其实可以写成this.category，这样的话后台会将全部字段更新，但是我们只需要修改部分字段。
  177.         // 所以还是推荐改哪几个字段，传哪几个字段
  178.         data: this.$http.adornData(data, false),
  179.       }).then(({ data }) => {
  180.         this.$message({
  181.           showClose: true,
  182.           message: "菜单修改成功",
  183.           type: "success",
  184.         });
  185.         // 关闭对话框
  186.         this.dialogVisible = false;
  187.         // 刷新出新的菜单
  188.         this.getMenus();
  189.         // 设置需要默认展开的菜单
  190.         this.expandedKey = [this.category.parentCid];
  191.       });
  192.     },
  193.     // 添加三级分类
  194.     addCategory() {
  195.       console.log("提交的三级分类数据", this.category);
  196.       this.$http({
  197.         url: this.$http.adornUrl("/gulimallproduct/category/save"),
  198.         method: "post",
  199.         data: this.$http.adornData(this.category, false),
  200.       }).then(({ data }) => {
  201.         this.$message({
  202.           showClose: true,
  203.           message: "菜单添加成功",
  204.           type: "success",
  205.         });
  206.         // 关闭对话框
  207.         this.dialogVisible = false;
  208.         // 刷新出新的菜单
  209.         this.getMenus();
  210.         // 设置需要默认展开的菜单
  211.         this.expandedKey = [this.category.parentCid];
  212.       });
  213.     },
  214.     // 移除三级分类
  215.     remove(node, data) {
  216.       var ids = [data.catId];
  217.       this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
  218.         confirmButtonText: "确定",
  219.         cancelButtonText: "取消",
  220.         type: "warning",
  221.       })
  222.         .then(() => {
  223.           this.$http({
  224.             url: this.$http.adornUrl("/gulimallproduct/category/delete"),
  225.             method: "post",
  226.             data: this.$http.adornData(ids, false),
  227.           }).then(({ data }) => {
  228.             this.$message({
  229.               showClose: true,
  230.               message: "菜单删除成功",
  231.               type: "success",
  232.             });
  233.             // 刷新出新的菜单
  234.             this.getMenus();
  235.             // 设置需要默认展开的菜单
  236.             this.expandedKey = [node.parent.data.catId];
  237.           });
  238.         })
  239.         .catch(() => {});
  240.       console.log("remove", node, data);
  241.     },
  242.   },
  243.   //计算属性 类似于 data 概念
  244.   computed: {},
  245.   //监控 data 中的数据变化
  246.   watch: {},
  247.   //方法集合
  248.   // methods: {},
  249.   //生命周期 - 创建完成（可以访问当前 this 实例）
  250.   created() {
  251.     this.getMenus();
  252.   },
  253.   //生命周期 - 挂载完成（可以访问 DOM 元素）
  254.   mounted() {},
  255.   beforeCreate() {}, //生命周期 - 创建之前
  256.   beforeMount() {}, //生命周期 - 挂载之前
  257.   beforeUpdate() {}, //生命周期 - 更新之前
  258.   updated() {}, //生命周期 - 更新之后
  259.   beforeDestroy() {}, //生命周期 - 销毁之前
  260.   destroyed() {}, //生命周期 - 销毁完成
  261.   activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
  262. };
  263. </script>
  264. <style lang='scss' scoped>
  265. //@import url(); 引入公共 css 类
  266. </style>

4.3 拖拽商品目录

在拖拽商品时，涉及到若干个商品目录的更新，我们将需要修改的目录信息，以数组的方式发送给后端商品服务。
在gulimall-product的CategoryController中添加一个批量修改的方法updateSort

  1. /**
  2.  * 批量修改，前端拖拽菜单后更新菜单信息使用此方法
  3.  * @param category
  4.  * @return
  5.  */
  6. @RequestMapping("/update/sort")
  7. //@RequiresPermissions("gulimallproduct:category:update")
  8. public R updateSort(@RequestBody CategoryEntity[] category){
  9.     // 直接通过逆向工程生成的批量修改方法修改
  10.     categoryService.updateBatchById(Arrays.asList(category));
  11.     return R.ok();
  12. }

前端代码

  1. <template>
  2.   <div>
  3.     <el-switch
  4.       v-model="draggable"
  5.       active-text="开启拖拽"
  6.       inactive-text="关闭拖拽"
  7.     >
  8.     </el-switch>
  9.     <el-button v-if="draggable" @click="batchSave">批量保存</el-button>
  10.     <el-button type="danger" @click="batchDelete">批量删除</el-button>
  11.     <!-- 使用el的树形控件 显示三级目录 -->
  12.     <el-tree
  13.       :data="menus"
  14.       :props="defaultProps"
  15.       :expand-on-click-node="false"
  16.       show-checkbox
  17.       node-key="catId"
  18.       :default-expanded-keys="expandedKey"
  19.       :draggable="draggable"
  20.       :allow-drop="allowDrop"
  21.       @node-drop="handleDrop"
  22.       ref="menuTree"
  23.     >
  24.       <span class="custom-tree-node" slot-scope="{ node, data }">
  25.         <span>{{ node.label }}</span>
  26.         <span>
  27.           <!-- 添加按钮 只有1、2级菜单能添加子菜单-->
  28.           <el-button
  29.             v-if="node.level <= 2"
  30.             type="text"
  31.             size="mini"
  32.             @click="() => append(data)"
  33.           >
  34.             Append
  35.           </el-button>
  36.           <!-- 修改按钮 -->
  37.           <el-button type="text" size="mini" @click="() => edit(data)">
  38.             Edit
  39.           </el-button>
  40.           <!-- 删除按钮 没有子菜单的菜单才能进行删除-->
  41.           <el-button
  42.             v-if="node.childNodes.length == 0"
  43.             type="text"
  44.             size="mini"
  45.             @click="() => remove(node, data)"
  46.           >
  47.             Delete
  48.           </el-button>
  49.         </span>
  50.       </span>
  51.     </el-tree>
  52.     <el-dialog
  53.       v-bind:title="title"
  54.       :visible.sync="dialogVisible"
  55.       width="30%"
  56.       :close-on-click-modal="false"
  57.     >
  58.       <el-form :model="category">
  59.         <el-form-item label="分类名称">
  60.           <el-input v-model="category.name" autocomplete="off"></el-input>
  61.         </el-form-item>
  62.       </el-form>
  63.       <el-form :model="category">
  64.         <el-form-item label="图标">
  65.           <el-input v-model="category.icon" autocomplete="off"></el-input>
  66.         </el-form-item>
  67.       </el-form>
  68.       <el-form :model="category">
  69.         <el-form-item label="计量单位">
  70.           <el-input
  71.             v-model="category.prodcutUnit"
  72.             autocomplete="off"
  73.           ></el-input>
  74.         </el-form-item>
  75.       </el-form>
  76.       <span slot="footer" class="dialog-footer">
  77.         <el-button @click="dialogVisible = false">取 消</el-button>
  78.         <el-button type="primary" @click="submitData">确 定</el-button>
  79.       </span>
  80.     </el-dialog>
  81.   </div>
  82. </template>
  84. <script>
  85. //这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
  86. //例如：import 《组件名称》 from '《组件路径》';
  88. export default {
  89.   //import 引入的组件需要注入到对象中才能使用
  90.   components: {},
  91.   props: {},
  92.   data() {
  93.     return {
  94.       pCid: [],
  95.       draggable: false,
  96.       updateNodes: [],
  97.       maxLevel: 0, //统计当前节点的最大层级
  98.       title: "", //用于显示修改/添加
  99.       dialogType: "", //用于区分是修改对话框还是添加对话框 edit,add
  100.       category: {
  101.         name: "",
  102.         parentCid: 0,
  103.         catLevel: 0,
  104.         showStatus: 1,
  105.         sort: 0,
  106.         productUnit: "",
  107.         icon: "",
  108.         catId: null,
  109.       },
  110.       dialogVisible: false,
  111.       menus: [],
  112.       expandedKey: [],
  113.       defaultProps: {
  114.         children: "children",
  115.         label: "name",
  116.       },
  117.     };
  118.   },
  119.   methods: {
  120.     // 获取三级菜单
  121.     getMenus() {
  122.       this.$http({
  123.         // url表示我们的请求地址
  124.         url: this.$http.adornUrl("/gulimallproduct/category/list/tree"),
  125.         method: "get",
  126.       }).then(({ data }) => {
  127.         console.log("成功获取到菜单数据。。。", data.data);
  128.         this.menus = data.data;
  129.       });
  130.     },
  131.     // 批量删除，选定菜点全面的框后批量删除
  132.     batchDelete() {
  133.       let delCatIds = [];
  134.       let checkNodes = this.$refs.menuTree.getCheckedNodes();
  135.       console.log("被选中需要删除的元素:", checkNodes);
  136.       for (let i = 0; i < checkNodes.length; i++) {
  137.         delCatIds.push(checkNodes[i].catId);
  138.       }
  139.       this.$confirm(`是否批量删除【${delCatIds}】菜单?`, "提示", {
  140.         confirmButtonText: "确定",
  141.         cancelButtonText: "取消",
  142.         type: "warning",
  143.       })
  144.         .then(() => {
  145.           this.$http({
  146.             url: this.$http.adornUrl("/gulimallproduct/category/delete"),
  147.             method: "post",
  148.             data: this.$http.adornData(delCatIds, false),
  149.           }).then(({ data }) => {
  150.             this.$message({
  151.               showClose: true,
  152.               message: "菜单批量删除成功",
  153.               type: "success",
  154.             });
  155.             // 刷新出新的菜单
  156.             this.getMenus();
  157.           });
  158.         })
  159.         .catch(() => {});
  160.     },
  161.     // 等拖拽全部完成以后，点击批量保存按钮调用保存方法
  162.     // 以免每拖拽一次，数据库更新一次
  163.     batchSave() {
  164.       this.$http({
  165.         url: this.$http.adornUrl("/gulimallproduct/category/update/sort"),
  166.         method: "post",
  167.         data: this.$http.adornData(this.updateNodes, false),
  168.       }).then(({ data }) => {
  169.         this.$message({
  170.           showClose: true,
  171.           message: "菜单顺序等修改成功",
  172.           type: "success",
  173.         });
  174.         // 刷新菜单
  175.         this.getMenus();
  176.         // 展开拖拽后的菜单
  177.         this.expandedKey = this.pCid;
  178.         this.updateNodes = [];
  179.         this.maxLevel = 0;
  180.         // this.pCid = 0;
  181.       });
  182.     },
  183.     // 拖拽成功后触发该函数
  184.     handleDrop(draggingNode, dropNode, dropType) {
  185.       console.log("handle drop: ", draggingNode, dropNode, dropType);
  186.       //1、当前节点最新的父节点id
  187.       let pCid = 0; // 拖拽完后，当前节点父节点
  188.       let siblings = null; // 拖拽完后，当前节点兄弟
  189.       // 当以after和before方式拖拽，其父节点就是dropNode的父节点
  190.       // 其兄弟节点就是dropNode的父节点的childNodes
  191.       if (dropType == "before" || dropType == "after") {
  192.         pCid =
  193.           dropNode.parent.data.catId == undefined
  194.             ? 0
  195.             : dropNode.parent.data.catId; // 当前节点的父节点
  196.         siblings = dropNode.parent.childNodes;
  197.       } else {
  198.         // 这是为inner的情况
  199.         // 当以inner方式拖拽，其父节点就是dropNode
  200.         // 其兄弟节点就是dropNode的childNodes
  201.         pCid = dropNode.data.catId;
  202.         siblings = dropNode.childNodes;
  203.       }
  204.       this.pCid.push(pCid);
  206.       //2、当前拖拽节点的最新顺序(求兄弟节点)
  207.       //3、当前拖拽节点的最新层级
  208.       for (let i = 0; i < siblings.length; i++) {
  209.         // 如果遍历到当前正在拖拽的节点，则需要修改其父节点ID
  210.         if (siblings[i].data.catId == draggingNode.data.catId) {
  211.           let catLevel = draggingNode.level;
  212.           // 如果拖拽节点层级发生变化，那么就需要更新拖拽节点与其子节点的层级
  213.           if (siblings[i].level != draggingNode.level) {
  214.             // 修改当前节点层级
  215.             catLevel = siblings[i].level;
  216.             // 修改拖拽节点子节点的层级
  217.             this.updateChildNodeLevel(siblings[i]);
  218.           }
  219.           this.updateNodes.push({
  220.             catId: siblings[i].data.catId,
  221.             sort: i,
  222.             parentCid: pCid,
  223.             catLevel,
  224.           });
  225.         } else {
  226.           this.updateNodes.push({ catId: siblings[i].data.catId, sort: i });
  227.         }
  228.       }
  229.       console.log("updatenodes:", this.updateNodes);
  230.     },
  231.     // 更新子节点的层级信息
  232.     updateChildNodeLevel(node) {
  233.       if (node.childNodes.length != 0) {
  234.         for (let i = 0; i < node.childNodes.length; i++) {
  235.           var cNode = node.childNodes[i].data;
  236.           this.updateNodes.push({
  237.             catId: cNode.catId,
  238.             catLevel: node.childNodes[i].level,
  239.           });
  240.           this.updateChildNodeLevel(node.childNodes[i]);
  241.         }
  242.       }
  243.     },
  244.     // 判断菜单栏是否能够拖拽 因为我们只有三级菜单
  245.     allowDrop(draggingNode, dropNode, type) {
  246.       //1、被拖动的当前节点以及所在的父节点总层数不能大于3
  247.       // 1)判断被拖动的当前节点总层数
  248.       console.log("allowDrop:", draggingNode, dropNode, type);
  249.       this.countNodeLevel(draggingNode);
  250.       // 当前正在拖动节点拥有的深度+父节点所在的深度不大于3即可
  251.       let deep = Math.abs(this.maxLevel - draggingNode.level + 1);
  252.       console.log("深度", deep);
  254.       if (type == "inner") {
  255.         // console.log(
  256.         //   `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}`
  257.         // );
  258.         return deep + dropNode.level <= 3;
  259.       } else {
  260.         return deep + dropNode.parent.level <= 3;
  261.       }
  262.       // return false;
  263.     },
  264.     countNodeLevel(node) {
  265.       // 找到所有子节点，求出最大深度
  266.       if (node.childNodes != null && node.childNodes.length > 0) {
  267.         for (let i = 0; i < node.childNodes.length; i++) {
  268.           if (node.childNodes[i].level > this.maxLevel) {
  269.             this.maxLevel = node.childNodes[i].level;
  270.           }
  271.           this.countNodeLevel(node.childNodes[i]);
  272.         }
  273.       }
  274.     },
  275.     // 获取要修改的菜单信息
  276.     edit(data) {
  277.       console.log("要修改的数据是：", data);
  278.       this.title = "修改分类";
  279.       this.dialogType = "edit";
  280.       this.dialogVisible = true;
  282.       // 为了防止回显的数据不是最新的（类似于脏读），发送请求获取当前节点最新的数据
  283.       this.$http({
  284.         url: this.$http.adornUrl(
  285.           `/gulimallproduct/category/info/${data.catId}`
  286.         ),
  287.         method: "get",
  288.       }).then(({ data }) => {
  289.         //请求成功
  290.         console.log("需要回显的数据", data);
  291.         // this.category.name = data.category.name;
  292.         // this.category.catId = data.category.catId;
  293.         // this.category.icon = data.category.icon;
  294.         // this.category.productUnit = data.category.productUnit;
  295.         // this.category.parentCid = data.category.parentCid;
  296.         // this.category.catLevel = data.category.catLevel;
  297.         // this.category.sort = data.category.sort;
  298.         // this.category.showStatus = data.category.showStatus;
  299.         this.category = data.category; // 可以直接用这种方式,自动解构
  300.       });
  301.     },
  302.     // 获取要添加的菜单信息
  303.     append(data) {
  304.       //this.category = {};
  305.       console.log("append", data);
  306.       this.title = "添加分类";
  307.       this.dialogType = "add";
  308.       this.dialogVisible = true;
  309.       this.category.parentCid = data.catId;
  310.       this.category.catLevel = data.catLevel * 1 + 1;
  311.       this.category.name = "";
  312.       this.category.catId = null;
  313.       this.category.icon = "";
  314.       this.category.productUnit = "";
  315.       this.category.sort = 0;
  316.       this.category.showStatus = 1;
  317.     },
  318.     // submitData，这个方法根据dialogTyep值调用editCategory跟addCategory方法
  319.     submitData() {
  320.       if (this.dialogType == "add") {
  321.         this.addCategory();
  322.       }
  323.       if (this.dialogType == "edit") {
  324.         this.editCategory();
  325.       }
  326.     },
  327.     // 修改三级分类
  328.     editCategory() {
  329.       var { catId, name, icon, productUnit } = this.category; // 通过结构表达式获取当前要修改的属性
  330.       // var data = {catId: catId, name: name, icon: icon, productUnit: productUnit};
  331.       var data = { catId, name, icon, productUnit }; // 属性名跟变量名相同可以省略 :变量名
  332.       console.log("提交的三级分类数据", this.category);
  333.       this.$http({
  334.         url: this.$http.adornUrl("/gulimallproduct/category/update"),
  335.         method: "post",
  336.         // 这里data其实可以写成this.category，这样的话后台会将全部字段更新，但是我们只需要修改部分字段。
  337.         // 所以还是推荐改哪几个字段，传哪几个字段
  338.         data: this.$http.adornData(data, false),
  339.       }).then(({ data }) => {
  340.         this.$message({
  341.           showClose: true,
  342.           message: "菜单修改成功",
  343.           type: "success",
  344.         });
  345.         // 关闭对话框
  346.         this.dialogVisible = false;
  347.         // 刷新出新的菜单
  348.         this.getMenus();
  349.         // 设置需要默认展开的菜单
  350.         this.expandedKey = [this.category.parentCid];
  351.       });
  352.     },
  353.     // 添加三级分类
  354.     addCategory() {
  355.       console.log("提交的三级分类数据", this.category);
  356.       this.$http({
  357.         url: this.$http.adornUrl("/gulimallproduct/category/save"),
  358.         method: "post",
  359.         data: this.$http.adornData(this.category, false),
  360.       }).then(({ data }) => {
  361.         this.$message({
  362.           showClose: true,
  363.           message: "菜单添加成功",
  364.           type: "success",
  365.         });
  366.         // 关闭对话框
  367.         this.dialogVisible = false;
  368.         // 刷新出新的菜单
  369.         this.getMenus();
  370.         // 设置需要默认展开的菜单
  371.         this.expandedKey = [this.category.parentCid];
  372.       });
  373.     },
  374.     // 移除三级分类
  375.     remove(node, data) {
  376.       var ids = [data.catId];
  377.       this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
  378.         confirmButtonText: "确定",
  379.         cancelButtonText: "取消",
  380.         type: "warning",
  381.       })
  382.         .then(() => {
  383.           this.$http({
  384.             url: this.$http.adornUrl("/gulimallproduct/category/delete"),
  385.             method: "post",
  386.             data: this.$http.adornData(ids, false),
  387.           }).then(({ data }) => {
  388.             this.$message({
  389.               showClose: true,
  390.               message: "菜单删除成功",
  391.               type: "success",
  392.             });
  393.             // 刷新出新的菜单
  394.             this.getMenus();
  395.             // 设置需要默认展开的菜单
  396.             this.expandedKey = [node.parent.data.catId];
  397.           });
  398.         })
  399.         .catch(() => {});
  400.       console.log("remove", node, data);
  401.     },
  402.   },
  403.   //计算属性 类似于 data 概念
  404.   computed: {},
  405.   //监控 data 中的数据变化
  406.   watch: {},
  407.   //方法集合
  408.   // methods: {},
  409.   //生命周期 - 创建完成（可以访问当前 this 实例）
  410.   created() {
  411.     this.getMenus();
  412.   },
  413.   //生命周期 - 挂载完成（可以访问 DOM 元素）
  414.   mounted() {},
  415.   beforeCreate() {}, //生命周期 - 创建之前
  416.   beforeMount() {}, //生命周期 - 挂载之前
  417.   beforeUpdate() {}, //生命周期 - 更新之前
  418.   updated() {}, //生命周期 - 更新之后
  419.   beforeDestroy() {}, //生命周期 - 销毁之前
  420.   destroyed() {}, //生命周期 - 销毁完成
  421.   activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
  422. };
  423. </script>
  424. <style lang='scss' scoped>
  425. //@import url(); 引入公共 css 类
  426. </style>