谷粒商城基础篇——Day05

最新推荐文章于 2023-03-17 11:26:45 发布

一只懒鱼儿

最新推荐文章于 2023-03-17 11:26:45 发布

阅读量428

点赞数

分类专栏：谷粒商城文章标签： vue.js 前端 java

本文链接：https://blog.csdn.net/wu6426/article/details/124553049

版权

本文介绍了商品服务的三级分类API开发，包括递归获取树形结构数据、配置网关路由与路径重写、统一跨域设置、查询展示、删除、新增、修改和拖拽功能的实现，详细讲解了每个步骤的操作和代码实现。

摘要由CSDN通过智能技术生成

商品服务-API-三级分类

一、递归树形结构数据获取

启动 gulimall-product，renren-fast和renren-fast-vue。
添加目录和菜单
系统路由与源代码对应关系
views下，创建product文件夹，创建category.vue
找到element-ui 树形结构对应代码（粘贴到.vue相对应位置）
https://element.eleme.cn/#/zh-CN/component/tree

二、配置网关路由与路径重写

更改API请求地址（–网关地址）
开启服务注册功能
写yaml

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

写注解 @EnableDiscoveryClient
配置网关（添加路由），并启动网关

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

## 前端项目，/api
## http://localhost:88/api/captcha.jpg
## ——>实际访问到： http://renren-fast:8080/api/captcha.jpg
## ——>应该访问到：http://localhost:8080/renren-fast/captcha.jpg
## 使用网关带的路径重写

三、网关统一配置跨域

解决跨域问题
在这里插入图片描述

在gulimall-getway（网关）中统一配置跨域（不要导错包：reactive）

package com.xxx.gulimall.getway.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 GulimallCorsConfiguration {
   

    @Bean
    public CorsWebFilter corsWebFilter(){
   
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1、配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);

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

存在多个跨域配置（注释掉renren-fast中的跨域配置）

四、查询-树形展示三级分类数据

添加路由（为方便，此处将所有功能均配置）

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

在nacos中创建对应的命名空间
配置注册中心(bootstrap.properties)

spring.application.name=gulimall-ware
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
#每个微服务创建自己的命名空间，使用配置分组区分环境，dev,test,prod
spring.cloud.nacos.config.namespace=00ee4aba-6b0b-49fb-8044-cad356e3aefd
#spring.cloud.nacos.config.group=dev
#spring.cloud.nacos.config.group=prod

服务发现

spring:
    cloud:
        nacos:
            discovery:
                server-addr: 127.0.0.1:8848

开启服务发现功能 @EnableDiscoveryClient
bug：被前面的路由转走了

-调整顺序即可：将精确的路由放在上面（高优先级）

- bug修复（找不到list/tree路径）

CategoryController 添加方法

    /**
     * 列表
     */
    @RequestMapping("/list/tree")
    public List<CategoryEntity> list(){
   
        List<CategoryEntity> categoryEntities = categoryService.listWithTree();

        return categoryEntities;
    }

CategoryService生成方法

    List<CategoryEntity> listWithTree();

CategoryServiceImpl实现方法

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

        //2、组装成父子的树形结构

        //2.1）、找到所有的一级分类
        List<CategoryEntity> level1Menus = entities.stream().filter(categoryEntity ->
                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;
    }

    //递归查找所有菜单的子菜单
    private List<CategoryEntity> getChildrens(CategoryEntity root,List<CategoryEntity> all){
   

        List<CategoryEntity> children = all.stream().filter(categoryEntity -> {
   
            return categoryEntity.getParentCid() == root.getCatId();
        }).map(categoryEntity -> {
   
            //1、找到子菜单
            categoryEntity.setChildren(getChildrens(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;
    }