最近工作有一个工作需求是实现省市区联动,点击省下拉框,选中一个省,然后再选市,最后选区,当然最重要的首先自然是数据了,没数据怎么测试接口,我数据是在 https://hxkj.vip/demo/echartsMap/ 这里拿的,得到一个json文件,里面是一个list的结构,每一条数据都是省市区树级展示。
那么有数据之后,就要导入库中,之所以选用redis而不是mysql,是因为省市区数据是比较固定的,很难会有改动,所以放在redis反而更好
python脚本将json数据导入redis
import redis
import json
r = redis.Redis(host='127.0.0.1', port=6379, db=4)
with open("C:\\Users\\10926\Desktop\\pca-code.json", 'r',encoding='utf-8-sig') as file:
data = json.load(file)
for item in data:
r.lpush('regionData', json.dumps(item))
只需要改个文件路径名即可
省市区联动下拉框展示
此时redis中的数据是这种格式,通过code来实现父子关联:
那么我们就可以通过code来实现省市区联动:
/**
* 没传code就是省,有就是市区
* 分别查询省市区
* @param regions
* @param code
* @return
*/
public List<RegionVO> getRegionsByCode(List<RegionVO> regions, String code, RegionFlag flag) {
List<RegionVO> result = new ArrayList<>();
for (RegionVO region : regions) {
// 不传code时查询所有省
if (code == null) {
result.add(new RegionVO(region.getCode(), region.getName(), null));
} else if (region.getCode().equals(code)) {
// 传入省或市的code时
if (region.getChildren() != null) {
for (RegionVO child : region.getChildren()) {
result.add(new RegionVO(child.getCode(), child.getName(), null));
}
flag.setValue(true);
}
}
// 递归查询子区域
else if (region.getChildren() != null) {
result.addAll(getRegionsByCode(region.getChildren(), code, flag));
}
// 当查到指定数据后,退出循环
if(flag.getValue()) {
break;
}
}
return result;
}
这样,我们就实现了,省市区三级联动,点击省,会展示出所有的省份,选中一个省,就会展示所有的市,选中一个市,就会展示所有的区。