1.网关中进行路由配置
因为之前写的路由到renrenfast的/api/** 包含了我们配的路径,而路由是从上到下,所以把我们的配置放到之前配置上面,
不然会被/api/**拦截而无法正确路由,配置如下,菜单分类显示功能是在商品服务中
- id: product_route
uri: lb://gulimall-product
predicates:
- Path=/api/product/**
filters:
- RewritePath=/api/(?<segment>.*),/$\{segment}
2.商品服务中bootstrap.properties 添加配置
其中有添加新命名空间product 然后拷贝空间ID到如下
spring.application.name=gulimall-product
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=3cab3d66-f150-4799-9186-ef66dd89d3bd
3.添加服务发现注解
4.启动三个服务,检测服务是否成功开启
5.前端获取数据并显示
其中包括绑定menus作为树形控件的数据源数组,defaultProps内定义子菜单为menus的children属性,label显示值为menus的name属性
<template>
<div><el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree></div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
return {
menus: [],
defaultProps: {
children: 'children',
label: 'name'
}
};
},
//方法集合
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/product/category/list/tree'),
method: 'get',
}).then(({data}) => {
console.log('get data success!'+data.data);
this.menus = data.data;
console.log('menus:'+this.menus);
})
}
},
handleNodeClick(data) {
console.log(data);
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//声明周期 - 创建完成(可以访问当前this实例)
created() {
this.getDataList();
},
//声明周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}//如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>