商品服务3-三级分类-查询展示三级分类数据

本文讲述了在商品服务中配置三级分类查询的路径重写,解决跨域问题后,通过调整网关路由顺序确保请求正确指向gulimall-product服务。同时,文章还介绍了前端如何获取并展示三级分类数据,包括对API响应数据的处理和Vue组件的配置,以实现菜单的层级显示。
摘要由CSDN通过智能技术生成

一、配置如何发送请求访问到真正的三级分类数据

在解决跨域问题之后可以登录人人快速开发平台,但是点进去分类维护列表时,会发现在访问product/category/list/tree时报错,因为请求是去网关(88)里找分类的数据,而真正的三级分类数据是在gulimall-product服务里,所以要在网关里进行路径重写:
在这里插入图片描述
在这里插入图片描述
如果像上图中路径重写的配置顺序是renren-fast在上,gulimall-product在下,那在重启网关后,访问http://localhost:88/api/product/category/list/tree时,会出现如下问题:
在这里插入图片描述
这是因为请求被在上方的renren-fast路由给拦截了,所以请求最终是被转入renren-fast而不是gulimall-product,所以应将两个的路由配置调换顺序,把精确的路由(/api/product/)放在高优先级,把较为模糊的(/api/)在低优先级:
在这里插入图片描述
此时重启网关服务再次访问http://localhost:88/api/product/category/list/tree,能成功展示出数据:
在这里插入图片描述
登录人人快速开发平台,刷新分类维护也不会再报错:
在这里插入图片描述
在这里插入图片描述
说明

  1. 配置product商品服务路径重写的原因:因为发送的访问三级分类的请求是:http://localhost:88/api/product/category/list/tree,访问真实的三级分类数据的请求是:http://localhost:10000/product/category/list/tree,如果不进行路径重写访问的将是:http://localhost:10000/api/product/category/list/tree,所以进行路径重写是为了去掉api/。
  2. 需要给gulimall-product配置注册中心和配置中心:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    二、前端查询菜单三级分类数据
    在上面真正的访问tree的请求已发送成功,此时打开控制台可以看到:
    在这里插入图片描述
    而我们真实想要的是data里的data所以前端应修改成:
    在这里插入图片描述
    此时只能看到,分类维护中有了层级显示:
    在这里插入图片描述
    若想将三级分类的数据进行显示,需要对属性值进行调整:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值