谷粒商城--三級(jí)分類

谷粒商城--三級(jí)分類

一、樹(shù)形數(shù)據(jù)返回

1、遞歸查詢樹(shù)形結(jié)構(gòu)商品信息

查詢的實(shí)體類，要實(shí)現(xiàn)樹(shù)形，實(shí)體類需要有pId（父id），nId（子id）加上忽略字段children（子類集合）。

public class CategoryEntity implements Serializable {
	private static final long serialVersionUID = 1L;

	/**
	 * 分類id
	 */
	@TableId
	private Long catId;
	/**
	 * 分類名稱
	 */
	private String name;
	/**
	 * 父分類id
	 */
	private Long parentCid;
	/**
	 * 層級(jí)
	 */
	private Integer catLevel;
	/**
	 * 是否顯示[0-不顯示，1顯示]
	 */
	private Integer showStatus;
	/**
	 * 排序
	 */
	private Integer sort;
	/**
	 * 圖標(biāo)地址
	 */
	private String icon;
	/**
	 * 計(jì)量單位
	 */
	private String productUnit;
	/**
	 * 商品數(shù)量
	 */
	private Integer productCount;

	@TableField(exist = false)
	private List<CategoryEntity> children;

}

2、查詢出所有待分類數(shù)據(jù)

List<CategoryEntity> categoryEntityList = this.lambdaQuery().list();

3、取出一級(jí)菜單

List<CategoryEntity> rootEntityList = categoryEntityList.stream()
                .filter(i -> i.getParentCid() == 0) // 取出一級(jí)菜單
                .peek(i-> i.setChildren(getChildren(i,categoryEntityList))) // 為每級(jí)菜單賦值子菜單
                .peek(i->{if(Objects.isNull(i.getSort())){i.setSort(0);}}) // 空值處理
                .sorted(Comparator.comparing(CategoryEntity::getSort)) // 排序
                .collect(Collectors.toList());

4、遞歸查詢所有菜單的子菜單

private List<CategoryEntity> getChildren(CategoryEntity nowCategory, List<CategoryEntity> categoryEntityList) {
    return categoryEntityList.stream() // 返回子菜單
            .filter(i -> i.getParentCid().equals(nowCategory.getCatId())) // 獲取當(dāng)前菜單的子菜單
            .peek(i->i.setChildren(getChildren(i,categoryEntityList))) // 把獲取到的子菜單遞歸此方法
            .peek(i->{if(Objects.isNull(i.getSort())){i.setSort(0);}}) // 空值處理
            .sorted(Comparator.comparing(CategoryEntity::getSort)) // 排序
            .collect(Collectors.toList());
}

二、配置網(wǎng)關(guān)路由與路徑重寫(xiě)

1、新建目錄菜單

菜單指定路由url

2、創(chuàng)建模塊以及對(duì)應(yīng)的vue

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

<script>
// 這里可以導(dǎo)入其他文件（比如：組件，工具 js，第三方插件 js，json 文件，圖片文件等等）
// 例如：import  《組件名稱》  from '《組件路徑》 ';

export default {
  name: 'category',
  data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  // import 引入的組件需要注入到對(duì)象中才能使用
  components: {},
  props: {},
  // 方法集合
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    getMenus () {
      this.$http({
        url: this.$http.adornUrl('/product/category/tree/list'),
        method: 'get'
      }).then(({data}) => {
        console.log(data)
        // this.data = data.data
      })
    }
  },
  // 生命周期 - 創(chuàng)建之前
  beforeCreate () {
  },
  // 生命周期 - 創(chuàng)建完成（可以訪問(wèn)當(dāng)前this 實(shí)例）
  created () {
    this.getMenus()
  }
}
</script>

<style scoped>
</style>

3、修改index.js中基礎(chǔ)路徑

// api接口請(qǐng)求地址
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast';

此時(shí)發(fā)送的http請(qǐng)求路徑不符合要求

http://localhost:8080/renren-fast/product/category/list/tree

修改api請(qǐng)求接口為網(wǎng)關(guān)地址方便訪問(wèn)各種服務(wù)，進(jìn)行擴(kuò)展

// api接口請(qǐng)求地址
window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api'

此時(shí)實(shí)際請(qǐng)求的地址（如驗(yàn)證碼）

http://localhost:88/api/captcha.jpg?uuid=a73e24f4-1dce-4aa3-8842-639e79c510ce

4、后臺(tái)注冊(cè)nacos

直接請(qǐng)求的網(wǎng)關(guān)的相關(guān)內(nèi)容，我們希望的時(shí)網(wǎng)關(guān)給我們進(jìn)行路由轉(zhuǎn)發(fā)到對(duì)應(yīng)的服務(wù)中，而不是直接處理我們的請(qǐng)求。

要想網(wǎng)關(guān)給我們做轉(zhuǎn)發(fā)，需要網(wǎng)關(guān)知道這個(gè)服務(wù)，將他添加到nacos中。

• 依賴

• bootstrap.yml

• 主啟動(dòng)類 @EnableDiscoveryClient

5、路由轉(zhuǎn)發(fā)配置

spring:
  application:
    name: gulimall-gateway
  cloud:
    nacos:
      config:
        server-addr: localhost:8848
        namespace: df63e8e1-2b80-42b5-9db0-8aaa4ba6bac3
      discovery:
        server-addr: localhost:8848
    gateway:
      routes:
        - id: admin-router #id唯一
          uri: lb://renren-fast # 路由轉(zhuǎn)發(fā)的地址 lb：表示負(fù)載均衡到轉(zhuǎn)發(fā)的地址
          predicates: # 斷言
            - Path=/api/** # 斷言規(guī)則： 路徑中包含api

此時(shí)請(qǐng)求驗(yàn)證碼接口404

http://localhost:88/api/captcha.jpg?uuid=02fa4bdd-020d-4774-873a-3e16cfa64286

網(wǎng)關(guān)進(jìn)行轉(zhuǎn)發(fā)后，實(shí)際請(qǐng)求的服務(wù)接口為

http://renren-fast:8080/api/captcha.ipg?uuid=02fa4bdd-020d-4774-873a-3e16cfa64286

默認(rèn)需要的訪問(wèn)接口為

http://renren-fast:8080/renren-fast/captcha.ipg?uuid=02fa4bdd-020d-4774-873a-3e16cfa64286

6、斷言匹配后使用過(guò)濾器重寫(xiě)請(qǐng)求路徑

spring:
  application:
    name: gulimall-gateway
  cloud:
    nacos:
      config:
        server-addr: localhost:8848
        namespace: df63e8e1-2b80-42b5-9db0-8aaa4ba6bac3
      discovery:
        server-addr: localhost:8848
    gateway:
      routes:
        - id: admin-router 
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
            # 匹配api開(kāi)頭的路徑重寫(xiě)為renren-fast路徑
            # 后面的renren-fast 是servlet的請(qǐng)求地址前綴

此時(shí)請(qǐng)求驗(yàn)證碼接口正常返回

此時(shí)發(fā)現(xiàn)跨域問(wèn)題

三、跨域配置

nginx代理配置跨域

網(wǎng)關(guān)配置跨域處理

@Configuration
public class GulimallCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter(){
        System.out.println("加載跨域");
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();

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

        return new CorsWebFilter(urlBasedCorsConfigurationSource);
    }
}

注釋人人自帶跨域

四、前端頁(yè)面請(qǐng)求樹(shù)形結(jié)構(gòu)數(shù)據(jù)

1、網(wǎng)關(guān)路由配置

配置網(wǎng)關(guān)路由到product服務(wù)

范圍小的路由應(yīng)該寫(xiě)在前面，否則去product的請(qǐng)求會(huì)被轉(zhuǎn)發(fā)到admin后臺(tái)服務(wù)

spring:
  application:
    name: gulimall-gateway
  cloud:
    nacos:
      config:
        server-addr: localhost:8848
        namespace: df63e8e1-2b80-42b5-9db0-8aaa4ba6bac3
      discovery:
        server-addr: localhost:8848
    gateway:
      routes:
        - id: product-router #id唯一
          uri: lb://gulimall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}
        - id: admin-router #id唯一
          uri: lb://renren-test
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-test/$\{segment}