人人开源 三级分类的配置和使用

三级分类

导入sql

再contoller层修改

@RequestMapping("/list/tree")
public R list(){
   List<CategoryEntity> entities= categoryService.listWithTree();
   return R.ok().put("data",entities);
}

再service 和imp层修改,stream.filter筛选

List<CategoryEntity> listWithTree();

 @Override
    public List<CategoryEntity> listWithTree() {
        //查出所有分类
        List<CategoryEntity> entities = baseMapper.selectList(null);


        //组装成父子的树形结构
//        1.找到所以一级分类,parentid==0
        List<CategoryEntity> collect = entities.stream().filter(x ->
                x.getParentCid() == 0
        ).map((menu) -> {
            //将获取的一级分类下的所有子分类递归聚合
            menu.setChildren(getChildren(menu, entities));
            return menu;
        }).sorted((m1, m2) -> {
//            数据库对应实体类Sort为Integer类型可能为null,所以必须进行判断

            return (m1.getSort()==null?0:m1.getSort())-(m2.getSort()==null?0:m2.getSort());
        }).collect(Collectors.toList());

        return collect;
    }

    //传入当前菜单和 总菜单 ,我们在总里面找到当前的菜单的子菜单
    private List<CategoryEntity> getChildren(CategoryEntity there, List<CategoryEntity> all) {
//递归查找菜单的子菜单

        List<CategoryEntity> collect = all.stream().filter(x -> {
            //这里能到三层是因为数据库的设计 过滤
            return x.getParentCid() == there.getCatId();
        }).map(m->{
            //set里调用get 就把二级菜单的x.getParentCid() == there.getCatId();,there变成了二级参数
            //因为这是 过滤后的,只会会循环调用
            m.setChildren(getChildren(m,all));
            return m;
        }).sorted((m1,m2)->{
            return (m1.getSort()==null?0:m1.getSort())-(m2.getSort()==null?0:m2.getSort());
        }).collect(Collectors.toList());

        return collect;
    }

前后联调

启动前后端

启动人人fast 和fast -vue

增加菜单管理和分类维护

a/b会变成 a-b

 // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

请求转到gateway网关

将renren-fast 注册发现

负载均衡转跳处理

   - id: admin
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api(?<segment>/?.*), /renren-fast$\{segment}

#这里filters 已经更新
#filters:
#  - RewritePath=/red(?<segment>/?.*), $\{segment} 不能加上/
#前端项目默认一个api前缀,都到renren-fast
#http://localhost:88/api/captcha.jpg 路由到下面的地址
#http://renren-fast:8080/api/captcha.jpg 而我们需要的是
#http://renren-fast:8080/captcha.jpg

验证码显示成功 登陆遇到转跳问题

Access-Control-Allow-Origin 解决跨域问题

这个问题是浏览器的同源策略产生的,是浏览器对javascript的安全限制

●同源策略:是指协议，域名，端口都要相同，其中有一个不同都会产生跨域;

解决方案一 nginx

解决方案二 添加响应头

在网关里统一配置

这里遇到一个坑 写了配置也没有用

package com.cjg.gulimall.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

@Configuration
public class corsFilter {

    @Bean
    public CorsWebFilter corsWebFilter() {

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();


        CorsConfiguration corsConfiguration = new CorsConfiguration();
//响应头的方法  因为所有都走88端口所有全部都实行这个过滤器
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**", corsConfiguration);

        return  new CorsWebFilter(source);
    }

}

数据显示

注册发现配置nacos 在对应项目

配置转化路由

放在模糊路由的上面

- id: product_route
  uri: lb://gulimall-product
  predicates:
    - Path=/api/product/**
  filters:
    - RewritePath=/api(?<segment>/?.*), /$\{segment}

<!--  -->
<template>
<el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

</template>

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

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
 props: {},
 data() {
      return {
        menus: [],
        defaultProps: {
          children: "children",
          label: "name"
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      getMenus(){
            this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get'
        }).then(data=>{
//这里需要 改变
            console.log("数据------------",data.data.data);
            this.menus=data.data.data;
            
        })
      
          
      }
    },
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getMenus();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
/* @import url(); 引入公共css类 */

</style>