一、编写后端获取树接口

/product/category/list/tree

在service层的树结构实现代码：

public List<CategoryEntity> listWithTree() {
    //查出所有的CategoryEntity列表后，构建Tree，并实现排序
    return buildTree(baseMapper.selectList(null), 0L);
}

private List<CategoryEntity> buildTree(List<CategoryEntity> list, Long parentCid){
    return list.stream().filter(ce -> parentCid.equals(ce.getParentCid()))
            .map(ce -> {
                ce.setChildren(buildTree(list, ce.getCatId()));
                return ce;
            }).sorted((cate1, cate2) -> (cate1.getSort()==null?0:cate1.getSort()) - (cate2.getSort()==null?0:cate2.getSort()))
            .collect(Collectors.toList());
}

树结构数据的实现方式有很多种，这是我个人比较喜欢的方式；

注意，只有三层！

二、将 renren-fast 后台启动并注册到注册中心

1、pom.xml：

<dependency>
   <groupId>com.jiguiquan.zidanmall</groupId>
   <artifactId>zidanmall-common</artifactId>
   <version>1.0-SNAPSHOT</version>
</dependency>

2、application.yml：

spring:
  application:
    name: renren-fast
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848

3、主启动类增加： @EnableDiscoveryClient

三、启动renren-fast-vue 前端页面

启动网关项目后，网关端口为88

1、使用npm启动renren-fast-vue的前端项目：

为了防止端口冲突，我已经将默认的端口改为了8100：

因为后端的微服务以后会很多，我们不可能调用不同的微服务时候，访问不同的服务器地址，因为我们这时候就要用到Gateway网关帮助我们统一转发：

而且在做web项目时，头疼的跨域问题，我们也可以放在网关中解决，一劳永逸！

2、将前端项目访问的基础 baseUrl 地址改为网关地址：

3、启动后，我们发现，连验证码都获取不到：

显然网关这个服务下是没有提供这个功能接口的，功能接口在 renren-fast 后端服务下，所以我们需要网关帮我们转发：

4、在网关中进行如下配置，路由转发和路径重写：

https://cloud.spring.io/spring-cloud-gateway/reference/html/#the-rewritepath-gatewayfilter-factory

spring:
  application:
    name: zidanmall-gateway
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    gateway:
      routes:
        - id: product_route   #这个是商品服务的，我先完成了
          uri: lb://zidanmall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>/?.*), /$\{segment}

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

5、再次启动，验证码就可以获取到了，说明网关也正常工作了

四、使用网关统一解决跨域问题

当我们尝试登陆的时候：

发现，登陆请求的预检 OPTION 请求遇到了跨域问题！

我们上面说过，可以在网关中统一解决所有服务的跨域问题

1、在网关下创建一个跨域配置文件 com.jiguiquan.zidanmall.gateway.config.ZidanmallCorsConfiguration

@Configuration
public class ZidanmallCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        //配置跨域信息
        corsConfiguration.addAllowedHeader("*");   //允许所有头跨域
        corsConfiguration.addAllowedMethod("*");   //允许所有请求方式跨域
        corsConfiguration.addAllowedOrigin("*");   //允许所有请求来源（域）进行跨域
        corsConfiguration.setAllowCredentials(true);  //允许携带cookie进行跨域

        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
    }
}

2、重启网关后，测试登陆：

发现还有一些小问题：