GuLi商城-商品服务-API-三级分类-查询-树形展示三级分类数据

1、网关服务配置路由

2、商品服务

3、启动本地nacos，打开nacos地址看nacos服务列表

4、编写VUE

<template>
<el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template><script>
export default {
data() {return {menus: [],defaultProps: {children: 'children',label: 'name'}};},//生命周期activated () {this.getDataList()},methods: {// 获取数据列表getDataList () {this.$http({url: this.$http.adornUrl('/product/category/list/tree'),method: 'get'}).then(({data}) => {console.log("成功获取到菜单数据.....",data.data)this.menus = data.data;})},// 每页数sizeChangeHandle (val) {this.pageSize = valthis.pageIndex = 1this.getDataList()},// 当前页currentChangeHandle (val) {this.pageIndex = valthis.getDataList()},// 多选selectionChangeHandle (val) {this.dataListSelections = val},// 新增 / 修改addOrUpdateHandle (id) {this.addOrUpdateVisible = truethis.$nextTick(() => {this.$refs.addOrUpdate.init(id)})},// 删除deleteHandle (id) {var ids = id ? [id] : this.dataListSelections.map(item => {return item.roleId})this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$http({url: this.$http.adornUrl('/sys/role/delete'),method: 'post',data: this.$http.adornData(ids, false)}).then(({data}) => {if (data && data.code === 0) {this.$message({message: '操作成功',type: 'success',duration: 1500,onClose: () => {this.getDataList()}})} else {this.$message.error(data.msg)}})}).catch(() => {})}}
}
</script><style></style>

5、登录看页面效果OK