省市区三级联动

后端

---

Controller

/**
 * 地区级联选择器
 *
 * @return 级联选择器内容
 */
@GetMapping("/areaCascaderList")
public AjaxResult areaCascaderList() {
    return AjaxResult.success(appProvinceService.areaCascaderList());
}

public List<Cascader> areaCascaderList();

创建一个实体类，反给前端 

@Data
public class Cascader {
    /**
     * 键（id）
     */
    private String value;

    /**
     * 值（区域名称）
     */
    private String label;

    /**
     * 下级对象
     */
    private List<Cascader> children;
}

service

    @Autowired
    private RedisCache redisCache;

@Override
    public List<Cascader> areaCascaderList() {
            //先读redis缓存。没有再查
        List<Cascader> cascaderList = redisCache.getCacheList("areaCascaderList");
        if (cascaderList.size() < 1) {
            //创建一级列表
            List<Cascader> firstLevels = new ArrayList<>();
            //查询省级数据
            List<AppProvince> provinceList = 
                                  appProvinceMapper.selectAppProvinceList(null);
            //循环赋值
            for (AppProvince province : provinceList) {
                //创建二级列表
                List<Cascader> secondLevels = new ArrayList<>();
                //第一级键
                Cascader firstLevel = new Cascader();
                firstLevel.setValue(province.getProvinceId().toString());
                firstLevel.setLabel(province.getProvinceName());

                //查询该省下的市
                AppCity paramCity = new AppCity();
                paramCity.setProvinceId(province.getProvinceId());
                List<AppCity> cityList = appCityMapper.selectAppCityList(paramCity);
                //循环赋值
                for (AppCity city : cityList) {
                    //三级列表
                    List<Cascader> thirdlyLevels = new ArrayList<>();
                    //第二级键
                    Cascader secondLevel = new Cascader();
                    secondLevel.setValue(city.getCityId().toString());
                    secondLevel.setLabel(city.getCityName());
                    //查询该市下的区
                    AppDistrict paramDistrict = new AppDistrict();
                    paramDistrict.setCityId(city.getCityId());
                    List<AppDistrict> districtList = 
                               appDistrictMapper.selectAppDistrictList(paramDistrict);
                    //循环赋值
                    for (AppDistrict district : districtList) {
                       //第三级键 //查询到的数据存到thirdlyLevels（第三级） 数组中  
                        Cascader thirdlyLevel = new Cascader();
                        thirdlyLevel.setValue(district.getDistrictId().toString());
                        thirdlyLevel.setLabel(district.getDistrictName());
                        thirdlyLevels.add(thirdlyLevel);
                    }
                    secondLevel.setChildren(thirdlyLevels);
                    //将包含第三级的数组存到secondLevels（第二级）数组中
                    secondLevels.add(secondLevel);
                }
                firstLevel.setChildren(secondLevels);
                //将包含第二级的数组存到firstLevels（第一级）数组中
                firstLevels.add(firstLevel);
            }
               // 将 firstLevels（区域集合）存到redis中
            redisCache.setCacheList("areaCascaderList", firstLevels);
            cascaderList = firstLevels;
        }

        return cascaderList;

    }

---

前端 

return {
  //级联选择器
  options: [],

}

methods: {
  /**级联选择器*/
  getCascaderList() {
    areaCascaderList().then(response => {
      this.options = response.data
    })
  },

修改回显时

/** 修改按钮操作 */
handleUpdate(row) {
  this.reset();
  const orderId = row.orderId || this.ids
  getAppGoodsOrder(orderId).then(response => {
    let areaList = []
    areaList.push(response.data.provinceId + '')
    areaList.push(response.data.cityId + '')
    areaList.push(response.data.districtId + '')
    this.form = response.data;
    this.form.area = areaList
    this.open = true;
    this.title = "修改商品订单";
  });
},

 提交数据时

将区域id 和区域名称分别赋值

/** 提交按钮 */
submitForm() {
  this.$refs["form"].validate(valid => {
    if (valid) {
      if (this.form.area.length > 0) {
        this.form.provinceId = this.form.area[0]
        this.form.cityId = this.form.area[1]
        this.form.districtId = this.form.area[2]
        let labels = this.$refs['label'].getCheckedNodes()
        this.form.provinceName = labels[0].pathLabels[0]
        this.form.cityName = labels[0].pathLabels[1]
        this.form.districtName = labels[0].pathLabels[2]

      } else {
        this.$modal.msgWarning('请选择地区')
        return
      }
      if (this.form.orderId != null) {
        updateAppGoodsOrder(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addAppGoodsOrder(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    }
  });
},

新增修改 

<el-form-item label="所在地区" prop="area">
  <el-cascader
    filterable
    v-model="form.area"
    :options="options"
    clearable
    filterable
    ref="label"></el-cascader>
</el-form-item>   

或者直接用js

import { addressList } from "@/api/cityData.js";

data() {
  return {
    addressList, 

---

搜索 

@change="areaList() 改变事件

<div class="block" >
  <el-cascader @change="areaList()"
    :options="options"
    v-model="queryParams.area"
    :props="{ checkStrictly: true }"
    clearable></el-cascader>
</div>

data() {
  return {

//搜索
queryParams:{
  area: [],
  provinceId: null,
  cityId: null,
  districtId: null,
},

}

}

methods: {
// 改变调用方法事件
  areaList(){
    this.handleQuery();
  },
  /** 搜索按钮操作 */
  handleQuery() {
    if (this.queryParams.area != null) {
      //级联选择器搜索处理
      if (this.queryParams.area.length == 1) {
        this.queryParams.provinceId = this.queryParams.area[0]
      } else if (this.queryParams.area.length == 2) {
        this.queryParams.cityId = this.queryParams.area[1]
      } else if (this.queryParams.area.length == 3) {
        this.queryParams.districtId = this.queryParams.area[2]
      } else {
        this.queryParams.provinceId = null
        this.queryParams.cityId = null
        this.queryParams.districtId = null
      }
    }
    this.getAppProjectList()
  },

/** 查询项目列表 */
getAppProjectList() {
  listProject(this.queryParams).then(response => {
    this.appProjectList = response.rows
  })
},

}，

---

另一种，通过sql

/**
 * 获取省市区列表
 * @return
 */
@NotAuth
@Api(value = "获取省市区列表")
@GetMapping(value = "/getTreeList")
public AjaxResult getTreeList() {
    return appProvinceService.getTreeList();
}

/**
 * 获取省市区列表
 * @return
 */
@Override
public AjaxResult getTreeList() {
    List<AppProvinceDTO> appProvinceDTOList  = appProvinceMapper.getTreeList();
    return AjaxResult.success(appProvinceDTOList);
}

select * from app_province   ap
                left join app_city  ac on ap.province_id = ac.province_id
                left join app_district ad on ac.city_id = ad.city_id

---

另一种

/**
 *  获取省市区List
 */
@Log(title = "获取省市区List")
@GetMapping("/getTreeList")
public AjaxResult getTreeList() {
    return cdsProvinceService.getTreeList();
}

/**
 *  获取省市区List
 */
@Log(title = "获取省市区List")
@GetMapping("/getTreeList")
public AjaxResult getTreeList() {
    return cdsProvinceService.getTreeList();
}

@Data
public class CdsProvinceVo extends CdsProvince {

    private List<CdsCityVo>  childrenList;

}

@Data
public class CdsCityVo extends CdsCity {
    private List<CdsDistrictVo> childrenList;
    private CdsDistrictVo cdsDistrictVo;
    private String name;
}

@Data
public class CdsDistrictVo extends CdsDistrict {
    private String name;
}

 @Override
    public AjaxResult getTreeList() {

        //先读redis缓存。没有再查
        List<CdsProvinceVo> cascaderList = redisCache.getCacheList("areaCascaderList");

        if (cascaderList.size() < 1) {

            List<CdsProvinceVo> appProvinceList = cdsProvinceMapper.selectAll();
            List<CdsCityVo> appCityList = cdsCityMapper.selectAll();
            List<CdsDistrictVo> appDistrictList = cdsDistrictMapper.selectAll();

            List<CdsCityVo> appCityDtoList = new ArrayList<>();
            List<CdsDistrictVo> appDistrictDtoList = JSONArray.parseArray(JSONArray.toJSONString(appDistrictList), CdsDistrictVo.class);
            for (CdsCity appCity : appCityList) {
                List<CdsDistrictVo> childrenList = appDistrictDtoList.stream().filter(t -> t.getCityId().equals(appCity.getCityId())).collect(Collectors.toList());
                CdsCityVo appCityDto = new CdsCityVo();
                BeanUtils.copyProperties(appCity, appCityDto);
                appCityDto.setChildrenList(childrenList);
                appCityDtoList.add(appCityDto);
            }

            List<CdsProvinceVo> appProvinceDtoList = new ArrayList<>();
            for (CdsProvince appProvince : appProvinceList) {
                List<CdsCityVo> childrenList = appCityDtoList.stream().filter(t -> t.getProvinceId().equals(appProvince.getProvinceId())).collect(Collectors.toList());
                CdsProvinceVo appProvinceDto = new CdsProvinceVo();
                BeanUtils.copyProperties(appProvince, appProvinceDto);
                appProvinceDto.setChildrenList(childrenList);
                appProvinceDtoList.add(appProvinceDto);
            }
            // 将 firstLevels（区域集合）存到redis中
            redisCache.setCacheList("areaCascaderList", appProvinceDtoList);

            cascaderList = appProvinceDtoList;
        }

        return AjaxResult.success(cascaderList);
    }

---

遇到我问题 Failed to serialize object using DefaultSerializer; nested exception is java.lang.IllegalArgumentException: DefaultSerializer requires a Serializable payload but