1.路由网关gateway配置路由商品服务gulimall-product
- id: product_route
uri: lb://gulimall-product
predicates:
- Path=/api/product/**
filters:
- RewritePath=/api/(?<segment>.*),/$\{segment}
2.重启网关服务
3.修改renren-fast-vue
将分类数据,赋值给‘Tree 树形控件’的data
需要注意:属性的对应
props 配置选项,具体看下表 object
label 指定节点标签为节点对象的某个属性值 string, function(data, node) — —
children 指定子树为节点对象的某个属性值 string — —
4.category.vue
<template>
<div>
<el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"
:expand-on-click-node="false">
</el-tree>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
menus: [],
defaultProps: {
children: "children",
label: "name",
},
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
getCategorys() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get",
}).then(({ data }) => {
console.log("成功获取到分类数据", data);
this.menus = data.data;
});
},
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
console.log("获取到分类数据");
this.getCategorys();
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>