本节的主要内容：

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

一，准备工作

• 启动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 = true
        this.$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_route
          uri: lb://renren-fast
          predicates:
              - Path=/api/**
          filters:
              - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

错误记录

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