谷粒商城【成神路】-【3】——三级分类

目录

1.查询三级分类

2.前端页面搭建 

3.添加网关

4.解决跨域 

5.显示分类 

6.显示复选框 

---

1.查询三级分类

1.controller

直接调用service层的接口

 @RequestMapping("/list/tree")
    public R list(){
        List entityList=categoryService.listWithTree();

        return R.ok().put("data",entityList);
    }

2.service

• 1.查询所有分类
• 2.找到所有的一级分类
• 3.在一级分类下递归子菜单

 //查出所有分类
    @Override
    public List listWithTree() {
        //1.查出所有分类
        List entities = baseMapper.selectList(null);
        //2.组装成父子结构
        //2.1---找到所有的一级分类
        List level1Menus = entities.stream().filter((categoryEntity) -> {
            return categoryEntity.getParentCid() == 0;
        }).map((menu) -> {
            menu.setChildren(getChildren(menu, entities));
            return menu;
        }).sorted((menu1, menu2) -> {
            return menu1.getSort() - menu2.getSort();
        }).collect(Collectors.toList());

        return level1Menus;
    }

    //递归查找所有菜单的子菜单
    private List getChildren(CategoryEntity root, List all) {
        List children = all.stream().filter(categoryEntity -> {
            return categoryEntity.getParentCid() == root.getCatId();
        }).map((categoryEntity -> {
            //递归找到子菜单
            categoryEntity.setChildren(getChildren(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;
    }

2.前端页面搭建 

• 1.启动renren-fast的前后端，并新建目录

• 2.在renren-fast-vue.src.modules下新建目录product，并在目录下创建category.vue 

根据在目录下新增菜单的URI进行创建

 编写建category.vue 

• 3.更改访问地址

访问地址路由到网关

3.添加网关

• 1.将renren-fast项目添加到注册中心

• 注意：
• 1.springboot的版本号以及cloud的版本号
• 2.服务名称
• 3.nacos注册地址

• 2.添加网关配置 

• 3.实测

发现访问地址已经路由到网关

4.解决跨域 

• 1.添加跨域配置

在网关层添加跨域配置

小张发现直接运行不添加网关也能进入~不知阁下可否~~~

@Configuration
public class GulimallCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1.配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);//是否允许cookie
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(urlBasedCorsConfigurationSource);
    }
}

• 2.去除renren-fast的跨域配置 

前面配置了自己的网关，将renren-fast自带的网关删除调，否则报错

5.显示分类 

• 1.在将product添加到网关

注意路由的格式

spring:
   cloud:
    gateway:
      routes:
        #product三级分类
        - id: product_route
          uri: lb://gulimall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?.*),/$\{segment}
        #全部
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?.*),/renren-fast/$\{segment}

注意：先后让精确的路由放到最上面

•  2.配置前端vue

6.显示复选框 

显示复选框以及，删除和显示按钮

让后端看前端，我看到的他们的神奇