第十三章第三节： 产品分类维护 查询功能页面开发

启动服务端项目renren-fast
启动客户端项目renren-fast-vue

1、创建商品系统相关目录和菜单

系统管理--》菜单管理--》添加 创建商品系统目录

系统管理--》菜单管理--》添加 创建分类维护菜单

创建完成

2、创建分类维护页面组件

项目规则说明：
1：菜单的路由（分类维护：product/category）在访问时会转换为product-category
2：菜单的页面存放路径为src\views\modules\product\category.vue

在src\views\modules目录下创建product文件夹，然后在product文件夹下创建category.vue文件
src\views\modules\product\category.vue

<template>
<!-- el-tree：elementUi的tree组件-->
  <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

<!-- script：elementUi的tree组件-->
<script>
  export default {
    data() {
      return {
        //清空默认的elementUI tree组件的数据
        menus: [],
        //组件自带
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      // 组件自带
      handleNodeClick(data) {
        console.log(data);
      },
      //新增一个查询商品分类的方法
      getMenus(){
          this.$http({
        // 请求的url
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get'
        }).then(data => {
          //请求成功后打印数据
          console.log(data)
        })
      }
    },
    //页面加载完成后，调用自定义的查询商品分类方法
    created(){
        this.getMenus();
    }
  };
</script>

<style>
</style>

3、访问

登录后台点击“分类维护”菜单，会出现404错误，因为发出的请求会自带当前项目的path（/renren-fast/product/category/list/tree）
而product/category/list/tree这个请求是onlinemall-product的，所以需要让当前项目去访问网关项目再进行转发