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

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

在解决跨域问题之后可以登录人人快速开发平台，但是点进去分类维护列表时，会发现在访问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，能成功展示出数据：

登录人人快速开发平台，刷新分类维护也不会再报错：

说明

配置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/。
需要给gulimall-product配置注册中心和配置中心：

二、前端查询菜单三级分类数据
在上面真正的访问tree的请求已发送成功，此时打开控制台可以看到：

而我们真实想要的是data里的data所以前端应修改成：

此时只能看到，分类维护中有了层级显示：

若想将三级分类的数据进行显示，需要对属性值进行调整：

代码调整的结果：

<template><el-tree:data="menus":props="defaultProps"@node-click="handleNodeClick"></el-tree>
</template><script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import<组件名称> from <组件路径>;export default {// import引入的组件需要注入到对象中才能使用components: {},props: {},data() {return {menus: [],defaultProps: {children: "children",label: "label"}};},methods: {handleNodeClick(data) {console.log(data);},getMenus() {this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get",}).then(({data})=>{console.log("成功获取到菜单数据...",data.data)this.menus = data.data;})}},// 计算属性 类似于data概念computed: {},// 监控data中的数据变化watch: {},// 方法集合// 生命周期-创建完成(可以访问当前this实例)created() {this.getMenus();},// 生命周期-挂载完成(可以访问DOM元素)mounted() {},beforeCreated() {}, // 生命周期-创建之前beforeMount() {}, // 生命周期-挂载之前beforeUpdate() {}, // 生命周期-更新之前updated() {}, // 生命周期-更新之后beforeDestroy() {}, // 生命周期-销毁之前destroyed() {}, // 生命周期-销毁完成activated() {} // 如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped></style>

代码说明：
（1）标签里的属性说明：

data代表要展示的菜单数据，绑定的是vue实例里的menus，菜单数据是data.data，所以要this.menus = data.data；
props配置选项，绑定的是vue实例里的defaultProps，defaultProps中的children是指定子树为节点对象的某个属性值，在菜单数据中属性children即为子树；defaultProps中的label是指定节点标签为节点对象的某个属性值，在菜单数据中属性name即为节点标签要显示的内容。

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

【谷粒商城高级篇】商品服务商品上架
谷粒商城笔记合集分布式基础篇分布式高级篇高可用集群篇 ===简介&环境搭建=== ===Elasticsearch=== 项目简介与分布式概念(第一.二章) Elasticsearch: ...
谷粒商城项目篇6_分布式基础完结篇_商品服务模块（品牌管理、平台属性、新增商品）、仓储服务模块（仓库管理）
目录商品服务模块品牌管理品牌对应三级目录的增删改查平台属性数据库表关系规格参数增删改查销售属性属性分组新增商品获取三级分类及品牌商品json存储格式数据库表设计商品服务调用 ...
谷粒商城之商品服务-三级分类(展示与删除)
目录三级类目查询后台代码实现后台管理系统的菜单创建配置网关和路径重写网关统一配置跨域三级类目后台管理系统的页面显示三级分类删除页面效果的编写三级分类逻辑删除后台实现三级类目删除功能 ...
谷粒商城基础篇------商品服务 - 三级分类（gulimall-product：pms_category表）
文章目录 4.1 递归树形结构获取商品分类(pms_category)数据 4.2 配置网关路由与路径重写 1. 前端修改 2.后端-配置网关路由 3.跨域问题的解决 4.再次树形展示商品数据 4.3 ...
谷粒商城六商品服务三级分类
递归-树形结构数据获取 sql文件 sql文件太大了,这个博主写的非常厉害,看他的就ok了 CategoryController package com.atguigu.gulistore.produ ...
java中菜单分几级_JavaWeb三级菜单分类查询详解
废话不多说,直接贴代码: dao层代码: mapper: ListselectByParentId(Integer id); mapper.xml select from easybuy_produc ...
6.商品服务-API-三级分类
文章目录 1 三级分类 1.1 数据准备 1.2 查询功能实现 1.2.1 controller 1.2.2 entity 1.2.2 service 1.2.3 测试 1.3 配置网关路由与路径重写 ...
JAVA商城项目（微服务框架）——第7天nginx+cors解决跨域+品牌+分类查询
0.学习目标使用资料搭建后台系统会使用nginx进行反向代理实现商品分类查询功能掌握cors解决跨域实现品牌查询功能 1.搭建后台管理前端 1.1.导入已有资源后台项目相对复杂,我们不再从 ...
省市区三级联动查询（含地区表sql）
地区sql文件在我上传的资源中sys_region.sql,直接导入数据库即可,大家放心不需要积分的哟! 地区资源下载地址,冲! Controller /*** <p>* 省市区三级联动* ...

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

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

最新文章

热门文章