省市区数据树形结构构建及其前端(级联选择器)展示【java+vue】

省市区数据

数据形式为sql文件，数据表字段设计如下，请点击数据下载

后端

vo

由于数据需要在前端显示，为了方便使用前端组件，特意封装此vo类

import lombok.AllArgsConstructor;
import lombok.Data;

import java.util.List;

/**
 * 存储地址项 如广东省 茂名市 电白区
 */
@Data
@AllArgsConstructor
public class AreaItemVo {
    /**
     * 存储id
     */
    private Long value;
    private String label;
    private List<AreaItemVo> children;

    public AreaItemVo(Long value, String label) {
        this.value = value;
        this.label = label;
    }
}

service

 @Override
    public List<AreaItemVo> getAreaTree() {
        声明变量
        List<AreaItemVo> areaItemVoList = new ArrayList<>();

        //查询出所有省市区数据
        List<ProvinceCityRegionEntity> provinceCityRegionEntityList = baseMapper.selectList(null);
        //过滤出所有省
        List<ProvinceCityRegionEntity> fatherList = provinceCityRegionEntityList.stream().filter(item -> {
            if (item.getParentId() == 0) {
                return true;
            } else {
                return false;
            }
        }).collect(Collectors.toList());
        for (ProvinceCityRegionEntity father : fatherList) {
            AreaItemVo areaItemVo = new AreaItemVo(father.getId(), father.getName());
            this.searchSon(areaItemVo, provinceCityRegionEntityList);
            areaItemVoList.add(areaItemVo);
        }

        return areaItemVoList;
    }

    private void searchSon(AreaItemVo father, List<ProvinceCityRegionEntity> provinceCityRegionEntityList) {
        List<AreaItemVo> sonList = provinceCityRegionEntityList.stream().filter(item -> {
            if (item.getParentId() == father.getValue().intValue()) {
                return true;
            } else {
                return false;
            }
        }).map(item1 -> {
            AreaItemVo son = new AreaItemVo(item1.getId(), item1.getName());
            //继续给儿子寻找孙子
            this.searchSon(son, provinceCityRegionEntityList);
            return son;
        }).collect(Collectors.toList());
        father.setChildren(sonList);
    }

controller

    /**
     * 获取省市区的树形结构数据
     * @return
     */
    @GetMapping("/getAreaTree")
    public R getAreaTree() {
        List<AreaItemVo> areaItemVoList = provinceCityRegionService.getAreaTree();
        return R.ok().addData("areaItemVoList", areaItemVoList);
    }

前端

使用Element UI的级联选择器来显示结果非常之贴切

   <el-form-item label="地区">
        <el-cascader v-model="province_city_area" :options="areaItemVoOptions" clearable></el-cascader>
      </el-form-item>

发请求向后端获取数据

//获取省市区的树形结构数据
    getAreaTree() {
      provinceCityRegionApi.getAreaTree().then(
        res => {
          this.areaItemVoOptions = res.areaItemVoList
        }
      )
    },

当然，直接接收后端的数据还是不行的，会出现如下问题

修正版，如果children没有元素，那就直接设置undefined即可

 //获取省市区的树形结构数据
    getAreaTree() {
      provinceCityRegionApi.getAreaTree().then(
        res => {
          this.areaItemVoOptions = res.areaItemVoList
          for (let i = 0; i < this.areaItemVoOptions.length; i++) {
            this.setNullToUndefined(this.areaItemVoOptions[i])
          }
        }
      )
    },
    //将没有子元素的父类的chidren设置为 undefined
    setNullToUndefined(areaItemVo) {
      if (areaItemVo.children.length < 1) {
        areaItemVo.children = undefined;
      } else {
        for (let i = 0; i < areaItemVo.children.length; i++) {
          this.setNullToUndefined(areaItemVo.children[i])
        }
      }
    }

效果展示