Java对接Vue的 级联选择器

项目场景：

Java后端与Vue的级联选择器（Element-UI）的对接记录

---

Java后端代码

// 店铺表
@Data
@AllArgsConstructor 
@NoArgsConstructor
public class DDStore {  
    private Long storeId;  
    private Long brandId;  
    private String storeName;  
}  
// 品牌表

@Data
@AllArgsConstructor 
@NoArgsConstructor  
public class DDBrand {  
    private Long brandId;  
    private String brandName;  
}  
  
// 品牌DTO
@Data
@AllArgsConstructor 
@NoArgsConstructor
public class BrandDTO {  
    private Long brandId;  
    private String brandName;  
    private List<DDStore> storeList;  
}

// 接口代码
 /**  
 * 查找并返回店铺的品牌列表，每个品牌包含其对应的店铺信息。  
 *  
 * @return 包含品牌DTO的列表，每个品牌DTO包含品牌ID、品牌名称和店铺列表。  
 */  
@Override  
public List<BrandDTO> findStoreList() {  
    // 步骤1：获取所有店铺列表  
    // 通过调用storeService的list方法获取店铺列表，这里假设该方法返回null或空列表时表示没有店铺数据。  
    List<DDStore> stores = storeService.list(null);  
    if (stores == null || stores.isEmpty()) {  
        // 如果没有店铺数据，则直接返回一个空的BrandDTO列表。  
        return Collections.emptyList();  
    }  
  
    // 步骤2：使用Stream API构建品牌ID到店铺列表的映射  
    // 通过Stream API对店铺列表进行分组，根据品牌ID将店铺划分到不同的列表中。  
    Map<Long, List<DDStore>> brandToStoresMap = stores.stream()  
            .collect(Collectors.groupingBy(DDStore::getBrandId));  
  
    // 步骤3：使用Stream API构建BrandDTO列表  
    // 遍历品牌ID到店铺列表的映射，为每个品牌创建BrandDTO对象，并设置相关信息。  
    List<BrandDTO> brandDTOList = brandToStoresMap.entrySet().stream()  
            .map(entry -> {  
                Long brandId = entry.getKey();  
                // 调用brandService的getById方法，根据品牌ID获取品牌信息。  
                DDBrand brand = brandService.getById(brandId);  
                if (brand == null) {  
                    // 如果品牌不存在，则跳过当前映射，返回null，稍后进行过滤。  
                    return null;  
                }  
                // 创建BrandDTO对象，并设置品牌ID、品牌名称和店铺列表。  
                BrandDTO brandDTO = new BrandDTO();  
                brandDTO.setBrandId(brand.getBrandId());  
                brandDTO.setBrandName(brand.getBrandName());  
                brandDTO.setStoreList(entry.getValue());  
                // 返回构建好的BrandDTO对象。  
                return brandDTO;  
            })  
            // 过滤掉null的BrandDTO对象，确保列表中只包含有效的BrandDTO。  
            .filter(Objects::nonNull)  
            // 收集过滤后的BrandDTO对象到列表中。  
            .collect(Collectors.toList());  
  
    // 步骤4：返回结果列表  
    // 返回包含所有有效BrandDTO的列表。  
    return brandDTOList;  
}

---

Vue前端代码：

组件：element-Ui + Vue

// Vue 代码
<template>
   <div style="margin-top: 20px;">
     <span>请选择店铺：</span>
     <el-cascader
         v-model="selectedStore"
         :options="storeInfo"
         placeholder="左侧为品牌,右侧为店铺"
         style="width: 70%;"
         @change="handleCascaderChange"
     />
   </div>
</template>


// Jscript 代码
<script>  
export default {  
  data() {  
    return {  
        // 用于存储用户选择的级联值  
      selectedStore: [], 
        // 初始为空数组，稍后将通过API填充数据  
      storeInfo: [], 
    };  
  },  
  created() {  
    // 在组件创建时获取店铺信息 
    this.findStoreList();  
  },  
  methods: {  
    handleCascaderChange(value) {  
      // 处理级联选择器值变化的方法，如果需要的话  
      console.log('选择的店铺信息:', value);  
    },  
    
    // 所请求的后端接口
    findStoreList() {  
      // 假设request是您用于发送请求的库或方法  
      request.get("/store/findStoreList").then(res => {  
        if (res.code == 200) {  
          // 假设res.data是一个包含品牌信息的数组，每个品牌下有storeList数组  
          const storeInfo = res.data.map(brand => ({  
            value: brand.brandId, // 品牌ID作为value  
            label: brand.brandName, // 品牌名称作为label  
            children: brand.storeList.map(store => ({  
              value: store.storeId, // 假设store对象有storeId属性  
              label: store.storeName, // 假设store对象有storeName属性  
            })),  
          }));  
          this.storeInfo = storeInfo;  
        }
      });  
    },  
  },  
};  
</script>

---

总结：

了解前端存取方式，懂得后端获取数据