开发笔记：uniapp+vue+微信小程序 picker +后端 省市区三级联动

写在前面

未采用: 前端放置js 或者 json文件进行 省市区三级联动

采用： 前端组件 + 后端接口实现三级联动

原因：首先微信小程序有大小限制，能省则省，其次：方便后台维护省市区数据，完整省市区每年更新好像还是挺频繁的

方案

后端保存数据格式

例如

前端要展示 “福建省-厦门市-集美区“ 直接根据 - 分割截取就行

12,1,3 ：代表选择数据 对应项中的第几个
9261586716360729,9261586716360744：代表选择省跟市的id

这两个数组串 主要是回显数据用 ，如下，点击展开回显

前端实现代码 [有注释说明]

template

	<uni-popup ref="cityDialog" type="bottom">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						当前选择
					</view>
					<view class="uni-list-cell-db">
						<picker @columnchange="columnchange" @change="changeAddress" range-key="name" :value="value"
							:range="addressList" mode="multiSelector">
								<view class="uni-input">{{cityValue}}</view>
						</picker>
					</view>
				</view>
			</view>
		</uni-popup>

data

export default {
   data() { 
     return { 
       //存放三级联动数据
       addressList: [[],[],[]],
       //选择的省回显id
       province: "",
       //选择的市回显id
	   city: "",
	   //回显值
	   value: [],
	   //前端展示数据
	   cityValue:'',
	   timer:null
     }
   }
}

create

	created() {
			console.log("created...")
			this.userInfo = uni.getStorageSync("userInfo");
			const info = this.userInfo.city
			if (info) {
			//info 就是上面方案里说的数据库city字段值  
			// 福建省-厦门市-集美区-12,1,3-9261586716360729,9261586716360744
			//前端展示数据
			this.cityValue = info.split('-').slice(0, 3).join('-');
			//数据库 省市表主键 id
			const idPart = info.split('-')[4].split(',');
			this.province = idPart[0]
			this.city = idPart[1]			
			this.value = []
			// 添加回显id 
			this.value.push(...info.split('-')[3].split(',').map(Number));	
            }
			//初始化省数据
			this.initProvince(); 		
		},

methods

columnchange(e) {
				clearTimeout(this.timer)
				const _this = this
				this.timer = setTimeout(() => {
					const {
						column,
						value
					} = e.detail
					const item = {
						..._this.addressList[column][value]
					}
					if (column === 0) {
						this.province = item.id
						//清楚选择二级数据，不然切换别的省，第三级永远是上一次选择
						this.city = ''
						_this.loadCity(item.id)
					} else if (column === 1) {
						this.city = item.id
						_this.loadThird(item.id)
					}
				}, 500)
			},
		initProvince() {
		      //调用接口获取省数据
				listProvince().then(res => {
					if (res.code == 200) {
						this.addressList.splice(0, 1, [...res.data])
						//如果this.province 数据没有，表示数据库没有记录
						if (!this.province) {
							this.province = res.data[0].id
						}
						this.loadCity(this.province)
					}

				})
			},
			loadCity(parentId) {
				listCity(parentId).then(res => {
					if (res.code == 200) {
						this.addressList.splice(1, 1, [...res.data])
						if(!this.city) {
							this.city = res.data[0].id
						}
						this.loadThird(this.city)
					}

				})
			},

			loadThird(parentId) {
				listCity(parentId).then(res => {
					if (res.code == 200) {
						this.addressList.splice(2, 1, [...res.data])
					}

				})
			},
	changeAddress(e) {
				console.log("e", e)
				const _this = this
				_this.value = []
				_this.value.push(...e.detail.value)
				const arr = e.detail.value
				let str = ''
				arr.forEach((el, index) => {
					const {
						name
					} = _this.addressList[index][el]

					str += `${index ? '-':''}${name}`
				})
				this.cityValue = str
				// 最终数据 省-市-区-选择数据第几个(逗号隔开)- 选择数据id(逗号隔开) 
				//例:福建省-厦门市-集美区-12,1,3-9261586716360729,9261586716360744
				str = str + "-" + e.detail.value + "-" + this.province + "," + this.city
				//TODO 保存，或者修改 数据 
				this.editInfo.city = str
			},

后端实现代码

后端就两个接口 简单接口

 /**
     *  获取省份
     * @return  province
     */
   @GetMapping("listProvince")
    public AjaxResult  listProvince () {
        return AjaxResult.success(sysProvinceCityDistrictService.listProvince());
    }


```bash
 /**
     *  获取市/区县
     * @return  province
     */
    @GetMapping("listCity")
    public AjaxResult  listCity (@RequestParam("parentId") String parentId) {
        return AjaxResult.success(sysProvinceCityDistrictService.listCity(parentId));
    }

service接口文件这边就忽略了，直接impl逻辑

逻辑也很简单，查缓存 ，没有就数据库，有就缓存

Constants.NUMBER_ZERO 常量 0

@Override
public List<CityVo> listProvince() {
        if (Boolean.TRUE.equals(redisTemplate.hasKey(CacheConstants.CITY_CACHE_KEY))) {
            //从缓存获取
            return (List<CityVo>) redisTemplate.opsForValue().get(CacheConstants.CITY_CACHE_KEY);
        }
        List<CityVo> cityVos = sysProvinceCityDistrictMapper.listProvince();
        if (CollectionUtils.isEmpty(cityVos)) {
            return null;
        }
        redisTemplate.opsForValue().set(CacheConstants.CITY_CACHE_KEY, cityVos);
        return cityVos;
    }

    @Override
    public List<CityVo> listCity(String parentId) {
        List<CityVo> list = new ArrayList<>();
        List<SysProvinceCityDistrict> reultList;
        if (Boolean.TRUE.equals(redisTemplate.hasKey(CacheConstants.CITY_CACHE_KEY_CITY))) {
            //从缓存获取
            reultList = (List<SysProvinceCityDistrict>) redisTemplate.opsForValue().get(CacheConstants.CITY_CACHE_KEY_CITY);
        } else {
            QueryWrapper<SysProvinceCityDistrict> query = new QueryWrapper<>();
            query.ne("parent_id", Constants.NUMBER_ZERO);
            reultList = sysProvinceCityDistrictMapper.selectList(query);
        }
        if (CollectionUtils.isEmpty(reultList)) {
            return list;
        }
        reultList.stream().filter(s -> s.getParentId().equals(parentId))
                .forEach(info -> {
                    CityVo cityVo = new CityVo();
                    cityVo.setId(info.getId());
                    cityVo.setName(info.getName());
                    list.add(cityVo);
                });
        redisTemplate.opsForValue().set(CacheConstants.CITY_CACHE_KEY_CITY, reultList);
        return list;
    }

CityVo

/**
 * @author rongpeng.xia
 * @date 2024-08-13 10:33:59
 */
@Data
public class CityVo  implements Serializable {
    private static final long serialVersionUID = 1L;

    private String id;

    private String name;
}

(SysProvinceCityDistrict)表实体类

/**
 * (SysProvinceCityDistrict)表实体类
 *
 * @author xiarp
 * @since 2024-08-12 15:58:13
 */
@SuppressWarnings("serial")
@Data
public class SysProvinceCityDistrict implements Serializable {

    private static final long serialVersionUID = 286422671100375146L;

    /**
     * id
     */
    private String id;
    /**
     * 名字
     */
    private String name;

    /**
     * 父id
     */
    private String parentId;
    /**
     * 编码
     */
    private String code;
    /**
     * 父编码
     */
    private String parentCode;
    /**
     * 创建者
     */
    private Long createId;
    /**
     * 创建时间
     */
    private Date createTime;
    /**
     * 修改者
     */
    private Long updateId;
    /**
     * 修改时间
     */
    private Date updateTime;
}

前端参考的连接：https://blog.csdn.net/m0_73205643/article/details/140954162