Vue尚品汇后台系统实现三级联动平台属性及解决400报错

63 阅读 0 评论 42 点赞

我是靠谱客的博主眯眯眼泥猴桃，最近开发中收集的这篇文章主要介绍Vue尚品汇后台系统实现三级联动平台属性及解决400报错，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求：

1、平台属性有三级分类，我们应该保证点击一级分类后才能获取到二级分类的数据，确认了二级分类后才能获取到三级分类的数据。

2、并且修改完前一级的分类后，后面的分类应该被重置。

3、直到选择了三级分类后再向服务器发请求，获取该分类下的所有平台属性。

需求1:

首先该组件一挂载完毕，先获得一级分类的数据。然后对一级分类绑定change事件，若发生变化，进行事件的回调

    async handler1(){
            // 解构出一级分类的id
            const {category1Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category1Id,level:1});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory2List(category1Id);
            if(result.code==200){
                this.list2 = result.data;
            }
        },

对于二级分类也同样处理。通过相应的分类ID再获取下一级的分类数据

需求2:

async handler1(){
            // 清除数据
            this.list2 = [];
            this.list3 = [];
            this.cForm.category2Id = '';
            this.cForm.category3Id = '';
            // 解构出一级分类的id
            const {category1Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category1Id,level:1});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory2List(category1Id);
            if(result.code==200){
                this.list2 = result.data;
            }
        },

在每一次级层数据发生改变时，清空后面几级的数据。同时传递数据给父组件告知该级别的数据信息（id和层级）

需求3:

        // 一级分类的select事件回调（当一级分类的option发生变化时，获取相应二级分类的数据）
        async handler1(){
            // 清除数据
            this.list2 = [];
            this.list3 = [];
            this.cForm.category2Id = '';
            this.cForm.category3Id = '';
            // 解构出一级分类的id
            const {category1Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category1Id,level:1});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory2List(category1Id);
            if(result.code==200){
                this.list2 = result.data;
            }
        },
        // 二级分类的select事件回调
        async handler2(){
            // 清除数据
            this.list3 = [];
            this.cForm.category3Id = '';
            // 解构出二级分类的id
            const {category2Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category2Id,level:2});
            // 通过一级分类的id，获取二级分类的数据
            let result = await this.$API.attr.reqCategory3List(category2Id);
            if(result.code==200){
                this.list3 = result.data;
            }
        },
        // 三级分类的select事件回调
        handler3(){
            // 解构出三级分类的id
            const {category3Id} = this.cForm;
            this.$emit('getCategoryId',{categoryId:category3Id,level:3});
        },

同样的，分别对1、2、3级分类做处理，改变该级的分类，向父组件传递相应数据。

父组件.vue

<template>
  <div>
    <el-card style="margin:20px 0px">
      <CategorySelect @getCategoryId="getCategoryId"></CategorySelect>
    </el-card>
  </div>
</template>
<script>
data(){
      return {
        category1Id:'',
        category2Id:'',
        category3Id:'',
      }
    },
    methods:{
      // 自定义事件回调
      getCategoryId(categoryId,level){
        if(level==1){
          this.category1Id = categoryId;
          this.category2Id = '';
          this.category3Id = '';
        }else if(level == 2){
          this.category2Id = categoryId;
          this.category3Id = '';
        }else{
          this.category3Id = categoryId;
          // 发请求，获取平台属性
          this.getAttrList();
        }
      },
      // 获取平台属性的数据
      async getAttrList(){
        // 当用户确定三级分类的数据时候，可以向服务器发请求获取平台属性进行展示
        // 获取分类的ID
        const {category1Id,category2Id,category3Id} = this;
        let result = await this.$API.attr.reqAttrList(category1Id,category2Id,category3Id);
        console.log(result);
      }
    }
</script>

这里就是通过每一次传递过来的数据，更新父组件相应data，当第三级分类改变时，发送请求给服务器以获得相应层级路径下的平台属性。（上面代码有bug，导致了400，勿直接复制）

然后就发现，它报错了。400

看到这种就会很烦，因为要找bug。这里就记录下排错过程吧。

首先想到接口不能用了？但是也不是，因为获取三级联动的接口是没问题的，正常返回数据了。

然后又检查了api是不是写错了，发现也没问题。

最后再检查处理的数据对不对，父子组件通信时有没有问题。

这里其实还没开始检查就发现了一点问题，就是上图中我只点了一级分类，但是直接给我返回了400。按照业务的逻辑，应该是三级分类全部完成以后，才发送请求的。所以我初步判定就是父组件里面写的有些问题。

methods:{
      // 自定义事件回调
      getCategoryId(categoryId,level){
        console.log(categoryId,level);
        if(level==1){
          this.category1Id = categoryId;
          this.category2Id = '';
          this.category3Id = '';
          console.log('一级分类');
        }else if(level == 2){
          this.category2Id = categoryId;
          this.category3Id = '';
        }else{
          this.category3Id = categoryId;
          console.log("发请求！");
          // 发请求，获取平台属性
          this.getAttrList();
        }
      },