本节的主要内容：

• 前端调用三级分类接口，并树形展示

一，准备工作

• 启动product服务
• 启动renren-fast后台服务
• 启动renren-fast-vue服务
• 创建商品系统菜单

1，新增一级菜单

在左侧菜单栏创建商品系统菜单，这是renren-fast自带的功能，我们在页面上操作即可。

点击确定后，刷新页面，可以看到左侧多了一个一级菜单。

2，新增二级菜单

在商品系统下新增商品分类二级菜单。

注意，上级菜单一定要选择上一步创建的“商品系统”。

二，前端树形界面开发

要用原生的js和html开发一个树形展示界面是非常有挑战性的，但使用Vue和ElementUI，可以大大加速，在几分钟内完成开发。

1，开发分类展示组件

①

在renren-fast-vue前端工程中，src->views->modules下新建文件夹product，然后在product文件夹下新建category.vue文件。

使用我们之前配置vue模板快速插入代码。

②
在ElementUI文档中找到树形控件，复制代码。

完整代码：

<template><el-tree:data="data":props="defaultProps"@node-click="handleNodeClick"></el-tree>
</template><script>
export default {components: {},props: {},data () {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}],defaultProps: {children: 'children',label: 'label',},}},methods: {handleNodeClick (data) {console.log(data)},},
}
</script>
<style scoped>
</style>

③

点击菜单商品分类，就可以看到三级菜单了。

三，远程调用接口获取商品分类数据

1，远程调用

分类数据存储在数据库中，前端要调用接口获取数据后才能展示在页面上。

在category.vue的脚本中新增方法getDataList ：

methods: {handleNodeClick (data) {console.log(data)},// 获取分类数据getDataList () {this.dataListLoading = truethis.$http({url: this.$http.adornUrl('/product/category/list/tree'),method: 'get'}).then(({data}) => {console.log(data)this.dataListLoading = false})}},

在生命周期方法中调用这个方法。

created() {this.getDataList()  // 获取分类数据
}

2，路由配置

前端所有请求都通过网关转发给后台服务，所以要做两件事：

• 前端的url要配置网关的IP和端口

• 网关要配置路由策略将请求转发到响应的服务。

        - id: admin_routeuri: lb://renren-fastpredicates:- Path=/api/**filters:- RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

错误记录

这一节出现了很多包依赖相关的错误，记录在此谷粒商城实战笔记-包依赖踩坑。