【大型电商项目开发】商品服务-配置网关路由与路径重写-10

一：导入pms_category数据库

二：获取三级列表数据

1.在CategoryController修改list方法

/**
     * 查出所有分类以及子分类,以树状结构组装起来
     * @return
     */
    @RequestMapping("/list/tree")
    public R list(){
         List<CategoryEntity> entities = categoryService.listWithTree();
        return R.ok().put("data", entities);
    }

2.在CategoryEntity添加子分类信息

/**
	 * 当前菜单的所有子分类
	 * @TableField(exist = false)
	 * 数据表不存在此字段
	 */
	@TableField(exist = false)
	private List<CategoryEntity> children;

3.在CategoryServiceImpl重写listWithTree方法

/**
     * 查询所有清单
     * @return
     */
    List<CategoryEntity> listWithTree();

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

    /**
     * 递归拆询所有菜单的子菜单
     * @return
     */
    private List<CategoryEntity> getChildrens(CategoryEntity root , List<CategoryEntity> all){
        List<CategoryEntity> children = all.stream().filter((categoryEntity) -> {
            return categoryEntity.getParentCid().equals(root.getCatId());
        }).map((categoryEntity)->{
            //找到子菜单
            categoryEntity.setChildren(getChildrens(categoryEntity,all));
            return categoryEntity;
        }).sorted((menu1,menu2)->{
            //菜单排序
            return (menu1.getSort() == null ? 0 : menu1.getSort()) -(menu2.getSort() == null?0:menu2.getSort());
        }).collect(Collectors.toList());
        return children;
    }

3.启动gulimail-product项目

http://127.0.0.1:10000/product/category/list/tree

三：前端模块开发

1.启动renren-fast模块

2.启动renren-fast-vue模块

打开vscode，使用npm run dev 开启项目

3.搭建菜单

1.在系统管理模块添加商品系统目录

2.在商品系统模块添加分类维护菜单

注：product/category路径的/会被替换为product-category
3.在src/views/modules下新建product商品文件夹，然后创建category.vue文件
4.创建树形模板
打开https://element.eleme.cn/#/zh-CN/component/tree的Tree树形控件，复制相关代码

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

<script>
export default {
  /**
   * 数据集合
   */
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  /**
   * 生命周期
   */
  created(){
      /**
       * 创建组件时，会调用此方法
       */
    this.getMenus();
  },
  /**
   * 方法集合
   */
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    /**
     * 获取三级三单
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(data=>{
          console.log("成功获取到菜单数据。。。"+ data);
      });
    },
  },
};
</script>

<style>
</style>

注：此时访问/product/category/list/tree会接口404异常，涉及到跨域等问题
5.打开static/config/index.js修改发送请求得地址，统一发送给gateway网关，由网关发送给需要调用的接口

/**
 * 开发环境
 */
;(function () {
  window.SITE_CONFIG = {};

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

  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG['domain']  = './'; // 域名
  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)
  window.SITE_CONFIG['cdnUrl']  = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();

6.重启项目后发现图片验证码无法加载，此时我们需要对renren-fast项目的pom文件进行配置

4.修复图片验证码无法加载问题

默认将网关的请求转向renren-fast项目
1.在renren-fast项目中配置相关依赖

<!--引入common依赖-->
		<dependency>
			<groupId>com.sysg.gulimail</groupId>
			<artifactId>gulimail-common</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>

2.将renren-fast项目添加到nacos配置中心当中
1）在application添加name和nacos地址

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

2）在主启动类添加注解@EnableDiscoveryClient

package io.renren;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
/**
 * @EnableDiscoveryClient
 * 用于服务的注册和发现
 */
@EnableDiscoveryClient
@SpringBootApplication
public class RenrenApplication {

	public static void main(String[] args) {
		SpringApplication.run(RenrenApplication.class, args);
	}

}

3）重启renren-fast项目,在nacos的服务列表查看renren-fast

4）在gateway的application.yml文件中添加配置

spring:
  cloud:
    gateway:
      #路由规则
      routes:
        ## 前端项目,/api
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
           #路径重写
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

## http://localhost:88/captcha.jpg  http://localhost:8080/renrne-fast/captcha.jpg

注：此时发生了跨域问题，所以无法访问