实战演练-java+微信小程序实现省市区三级联动

最终效果图

官方的"省市区选择器"mode="region"里的数据是定死的由微信提供，不能做更改，好在同是picker组件mode=“multiSelector"时提供了自定义的"多列选择器”：
数据结构大致如下：

以下为完整代码：

vue 代码

wxml 部分

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="name" catchtap="save">
  {{multiArray[0][multiIndex[0]].name}}({{multiArray[0][multiIndex[0]].id}}){{multiArray[1].length > 0 ?("，" + multiArray[1][multiIndex[1]].name + "(" + multiArray[1][multiIndex[1]].id + ")"):""}}{{multiArray[2].length > 0 ?("，" + multiArray[2][multiIndex[2]].name + "(" + multiArray[2][multiIndex[2]].id + ")"):""}}
</picker>

js 部分

Page({
  data: {
    multiArray: [
      [{
        id: -1,
        name: "请选择省"
      }],
      [{
        id: -1,
        name: "市"
      }],
      [{
        id: -1,
        name: "区"
      }]
    ],
    multiIndex: [0, 0, 0]
  },
  getData() {
    wx.request({
      url: 'http://localhost:8081/chinas/getRegions',
      method: 'GET',
      success: res => {
        if (res.data.data) {
          var temp = res.data.data;
          this.setData({
            provinces: temp,
            multiArray: [temp, temp[0].cityList, temp[0].cityList[0].areaList],
            multiIndex: [0, 0, 0]
          })
        }
      }
    })
  },
  save() {
    this.getData()
  },
  //点击确定
  bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value
    })
  },
  //滑动
  bindMultiPickerColumnChange: function (e) {
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    //更新滑动的第几列e.detail.column的数组下标值e.detail.value
    data.multiIndex[e.detail.column] = e.detail.value;
    //如果更新的是第一列“省”，第二列“市”和第三列“区”的数组下标置为0
    if (e.detail.column == 0) {
      data.multiIndex = [e.detail.value, 0, 0];
    } else if (e.detail.column == 1) {
      //如果更新的是第二列“市”，第一列“省”的下标不变，第三列“区”的数组下标置为0
      data.multiIndex = [data.multiIndex[0], e.detail.value, 0];
    } else if (e.detail.column == 2) {
      //如果更新的是第三列“区”，第一列“省”和第二列“市”的值均不变。
      data.multiIndex = [data.multiIndex[0], data.multiIndex[1], e.detail.value];
    }
    var temp = this.data.provinces;
    data.multiArray[0] = temp;
    if ((temp[data.multiIndex[0]].cityList).length > 0) {
      //如果第二列“市”的个数大于0,通过multiIndex变更multiArray[1]的值
      data.multiArray[1] = temp[data.multiIndex[0]].cityList;
      var areaArr = (temp[data.multiIndex[0]].cityList[data.multiIndex[1]]).areaList;
      //如果第三列“区”的个数大于0,通过multiIndex变更multiArray[2]的值；否则赋值为空数组
      data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
    } else {
      //如果第二列“市”的个数不大于0，那么第二列“市”和第三列“区”都赋值为空数组
      data.multiArray[1] = [];
      data.multiArray[2] = [];
    }
    //setData更新数据
    this.setData(data);
  }
})

JAVA 代码

jar 包

<!-- 依赖包 -->
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
    </dependency>
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
    
    <dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.3.0</version>
    </dependency>
    
    <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.35</version>
    </dependency>
    
    <dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.3.0</version>
    </dependency>
    <dependency>
    <groupId>org.apache.velocity</groupId>
    <artifactId>velocity-engine-core</artifactId>
    <version>2.1</version>
    </dependency>

entity 实体类

package com.hn.yuan.city.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;
import java.util.List;

/**
 * <p>
 *
 * </p>
 *
 * @author XIAOCAO
 */
@Data
@Accessors(chain = true)
public class Chinas implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 主键
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    /**
     * 区域代码
     */
    private Long code;

    /**
     * 名称
     */
    private String name;

    /**
     * Pid
     */
    private Long pid;

    /**
     * 级别1省、2市、3县区
     */
    private String level;

    /*
     *  城市
     */
    @TableField(exist = false)
    private List<Chinas> cityList;

    /*
     *   县区
     */
    @TableField(exist = false)
    private List<Chinas> areaList;


    @TableField(exist = false)
    private List<Chinas> children;

}

controller _ 前端控制器_

package com.hn.yuan.city.controller;


import com.hn.yuan.city.common.ResultMsg;
import com.hn.yuan.city.entity.Chinas;
import com.hn.yuan.city.service.ChinasService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author XIAOCAO
 * 
 */
@RestController
@RequestMapping("/chinas")
@CrossOrigin
public class ChinasController{

    @Autowired
    private ChinasService chinasService;

    @GetMapping("/getRegions")
    public ResultMsg getRegions(){
        List<Chinas> jsonObject=chinasService.getRegions();
        return new ResultMsg(200,jsonObject,"查询成功");
    }

}

ChinasService _服务类 _

package com.hn.yuan.city.service;

import com.hn.yuan.city.entity.Chinas;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

/**
 * <p>
 *  服务类
 * </p>
 * @author XIAOCAO
 * 
 */
public interface ChinasService extends IService<Chinas> {

    public List<Chinas> getRegions();
}

ChinasServiceImpl 服务类实现类

package com.hn.yuan.city.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.hn.yuan.city.entity.Chinas;
import com.hn.yuan.city.mapper.ChinasMapper;
import com.hn.yuan.city.service.ChinasService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * <p>
 * 服务实现类
 * </p>
 *
 * @author XIAOCAO
 * 
 */
@Service
public class ChinasServiceImpl extends ServiceImpl<ChinasMapper, Chinas> implements ChinasService {


    @Autowired
    private ChinasMapper chinasMapper;


    /*
     *微信小程序 省市区对接
     */
    @Override
    public List<Chinas> getRegions() {

        // 全部省数据
        List<Chinas> chinas = chinasMapper.selectList(new QueryWrapper<Chinas>().eq("pid", 0L).eq("level", "1"));

        List<Long> pid = new ArrayList<>();
        chinas.forEach(item -> {
            pid.add(item.getCode());
        });
        //全部市数据
        List<Chinas> json1 = chinasMapper.selectList(new QueryWrapper<Chinas>().eq("level", "2").in("pid", pid));
        Map<Long,List<Chinas>> cdv=json1.stream().collect(Collectors.groupingBy(Chinas::getPid));

        chinas.stream().forEach(a ->a.setCityList(cdv.get(a.getCode())));

        List<Long> pid1=new ArrayList<>();
        json1.forEach(item ->{
            pid1.add(item.getCode());
        });
        //全部县 区数据
        List<Chinas> json2=chinasMapper.selectList(new QueryWrapper<Chinas>().eq("level","3").in("pid",pid1));
        Map<Long,List<Chinas>> cdv2=json2.stream().collect(Collectors.groupingBy(Chinas::getPid));
        chinas.stream().filter(a -> a.getCityList() != null).forEach(a -> a.getCityList().stream()
                .forEach(i -> i.setAreaList(cdv2.get(i.getCode()))));

        return chinas;
    }

}

注意：controller、service、mapper、entity层通过mybatis-plus自动生成的；回填操作根据前端code码查询即可，不再敖述。

Mysql数据表数据

百度网盘链接：https://pan.baidu.com/s/1fBIdWbBz_8bfjYpDRjR2rg
提取码：1101

---

各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

---

实战模式-微信小程序组件实现省市区三级联动
实战模式-Vue+Java后台实现省市区三级联动
爬虫java模式-拉取省市区数据