本节的主要内容：

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

一，准备工作

• 启动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>

③

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