Spring boot与Spring Cloud项目实战(三、商品服务-01.三级分类操作)

最新推荐文章于 2024-07-06 17:12:24 发布

WalkWind996

最新推荐文章于 2024-07-06 17:12:24 发布

阅读量670

点赞数

分类专栏：项目实战 springcloud spring boot

本文链接：https://blog.csdn.net/qq_35419179/article/details/105962826

版权

spring boot 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

项目实战

6 篇文章 1 订阅

订阅专栏

springcloud

2 篇文章 0 订阅

订阅专栏

查询

递归树形结构数据获取
1.将pms_catelog文件张的数据导入数据库wwamll-product的pms_category表中
2.编写代码(jdk8新特性stream,与lamdba表达式的使用参考lamdba表达式、stream)

    /*
    * 1.查出所有分类
    * 2.组父子树形结构
    * */
    @Override
    public List<CategoryEntity> listWithTree() {
        List<CategoryEntity> entities = baseMapper.selectList(null);
        //获取菜单中的父级菜单
        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 entities;
    }


    //递归查找子菜单
    public List<CategoryEntity> getChildrens(CategoryEntity rootMenu,List<CategoryEntity> allMenu){
        List<CategoryEntity> collect = allMenu.stream().filter(categoryEntity -> {
            return categoryEntity.getParentCid() == rootMenu.getCatId();
        }).map(categoryEntity -> {
            categoryEntity.setChildren(getChildrens(categoryEntity, allMenu));
            return categoryEntity;
        }).sorted((menu1,menu2)-> {
        return (menu1.getSort()==null?0:menu1.getSort())-(menu2.getSort()==null?0:menu2.getSort());
        }).collect(Collectors.toList());
        return collect;
    }

运行前端项目与后端项目
登录系统添加商品系统目录
在这里插入图片描述

在商品系统目录下添加分类维护菜单
在这里插入图片描述

菜单新增的访问路径为product/category,实际访问路径为
product-category

在前端项目的src/views/moudles/创建product文件夹在product文件夹下创建category.vue(商品系统目录的分类维护菜单的视图)

使用用户代码片段模板快速生成模板输入vue(模板名)

在category.vue中配置访问路径
在这里插入图片描述

试图刷新页面访问地址,问题出现我们在访问wwmall-product时发现访问地址出错(前面出现了http://localhost:8080/renren-fast)

在这里插入图片描述
ctrl+shift+f vscode全局搜索错误前缀地址(并修改为我们现在想要发送到的网关地址)

修改vue-fast的static/config/index.js配置将前端访问的后台路径全部交由网关处理http://localhost:88/api; 这里的api用于匹配断言规则
----------------将前端访问交由网关处理start-------------------------------
将renren-fast依赖conmmon并加入到nacos中心

配置文件配置网关路由规则
将指定的请求负载均衡给指定的uri,**lb://**代表负载均衡(参考springcloud-gateway书写断言和路由规则)
在这里插入图片描述
----------------------前端访问交由网关处理end---------------------------
问题出现重启项目登陆时发现验证码发送失败

在这里插入图片描述
发送验证码正确请求路径应该为http://localhost:8080/renren-fast/captcha.jpg

使用网关的路径重写功能解决

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

验证码刷新解决但出现了新的问题

跨域问题(详细介绍参考HTTP访问控制)

问题出现:浏览器阻止跨域请求
在这里插入图片描述
原因 :浏览器不能执行其他网站的脚本,他是由于浏览器的同源策略造成的是浏览器对javascript施加的安全限制。
同源策略:是指协议域名端口都要相同,有一个不相同都会产生跨域问题

跨域请求的流程
非简单请求(PUT,DELETE等)需要先发送预检请求
在这里插入图片描述

问题解决

1.使用nginx将项目部署到同一域中(目的为解决项目问题,这里不做详解)
在这里插入图片描述
配置请求允许跨域

在springbot中配置请求允许跨域
而项目中用到跨域非常多,所以我们这里将跨域配置在gateway网关中。
springboot为我们提供了CorsWebFilter来解决跨域问题我们只需要将CorsWebFilter组件自定义并且注入到容器中即可解决跨域问题(快速搭建的脚手架工程renren-fast中配置了跨域信息我们将其注释)

@Configuration
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;

public class WwmallCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration =new CorsConfiguration();
        //允许哪些头跨域
        corsConfiguration.addAllowedHeader("*");
        //允许哪些方法跨域
        corsConfiguration.addAllowedMethod("*");
        //允许那些请求来源跨域
        corsConfiguration.addAllowedOrigin("*");
        //设置是否允许携带cookie跨域,否则跨域会丢失cookie信息
        corsConfiguration.setAllowCredentials(true);
        corsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);
        return new  CorsWebFilter(corsConfigurationSource);
    }
}