day04-递归多级分类和跨域

最新推荐文章于 2024-08-10 18:26:28 发布

JustMove0n

最新推荐文章于 2024-08-10 18:26:28 发布

阅读量63

点赞数

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

本文链接：https://blog.csdn.net/weixin_53060535/article/details/126773311

版权

谷粒商城专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了如何在数据库中设计商品三级分类表，并通过Java代码实现多级分类的递归查询，将结果组织成树形结构。同时，针对前端Vue应用在调用后台API时遇到的跨域问题，提供了在网关层面配置CORS解决的方案，确保请求能够正确路由并允许跨域。

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

多级分类递归查询

表设计

CREATE TABLE `pms_category` (
  `cat_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '分类id',
  `name` char(50) DEFAULT NULL COMMENT '分类名称',
  `parent_cid` bigint(20) DEFAULT NULL COMMENT '父分类id',
  `cat_level` int(11) DEFAULT NULL COMMENT '层级',
  `show_status` tinyint(4) DEFAULT NULL COMMENT '是否显示[0-不显示，1显示]',
  `sort` int(11) DEFAULT NULL COMMENT '排序',
  `icon` char(255) DEFAULT NULL COMMENT '图标地址',
  `product_unit` char(50) DEFAULT NULL COMMENT '计量单位',
  `product_count` int(11) DEFAULT NULL COMMENT '商品数量',
  PRIMARY KEY (`cat_id`),
  KEY `parent_cid` (`parent_cid`)
) ENGINE=InnoDB AUTO_INCREMENT=1433 DEFAULT CHARSET=utf8mb4 COMMENT='商品三级分类';

代码实现方案1

@Override
    public List<CategoryEntity> listWithTree() {
        //1、查询出所有分类
        List<CategoryEntity> entities = super.baseMapper.selectList(null);
        //2、组装成父子的树形结构
        //2.1)、找到所有一级分类
        List<CategoryEntity> levelMenus = entities.stream()
                .filter(e -> e.getParentCid() == 0)
                .peek((menu) -> menu.setChildren(getChildrens(menu, entities)))
                .sorted((menu, menu2) -> {
                    return (menu.getSort() == null ? 0 : menu.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
                })
                .collect(Collectors.toList());
        return levelMenus;
    }
    //递归查找所有菜单的子菜单
    private List<CategoryEntity> getChildrens(CategoryEntity root, List<CategoryEntity> all) {
        return all.stream().filter(categoryEntity -> {
            return categoryEntity.getParentCid().equals(root.getCatId());
        }).peek(categoryEntity -> {
            //1、找到子菜单(递归)
            categoryEntity.setChildren(getChildrens(categoryEntity, all));
        }).sorted((menu, menu2) -> {
            //2、菜单的排序
            return (menu.getSort() == null ? 0 : menu.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
        }).collect(Collectors.toList());
    }

跨域问题

前端vue设置统一给网关发请求，而不是默认的localhost:8080
设置请求地址为网关，然后由网关路由到具体微服务
由于请求renren-fast后台时路径是localhost:8080/api/captcha.jgp。而renren-fast路径是localhost:8080/renren-fast/captcha.jgp 所以需要在网关处重写renren-fast路径

什么是跨域？
- 是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对js施加的安全限制。
- 同源策略：协议、域名、端口号有一个不同，其中有一个不同都会产生跨域

网关处配置请求允许跨域

@Configuration
public class CrossConfig {

    @Bean
    public CorsWebFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        // 配置跨域
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        config.addAllowedOrigin("*");
        config.setAllowCredentials(true);
        source.registerCorsConfiguration("/**", config); // CORS 配置对所有接口都有效
        return  new CorsWebFilter(source);
    }

}