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

ゝ一纸荒年。 2024-04-08 08:16 71阅读 0赞

#### 最终效果图 ####

![在这里插入图片描述][f88015a594b6410f94ffc2c1a94f5440.png_pic_center]

官方的"省市区选择器"mode="region"里的数据是定死的由微信提供，不能做更改，好在同是picker组件mode=“multiSelector"时提供了自定义的"多列选择器”：  
数据结构大致如下：  
![在这里插入图片描述][70f28cf23ea54bfb867bd982b3df7ca9.png_pic_center]

以下为完整代码：

#### 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;
 
 /**
 * 
 *
 * 
 *
 * @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;
 
 /**
 * 
 * 前端控制器
 * 
 *
 * @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;
 
 /**
 * 
 * 服务类
 * 
 * @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;
 
 /**
 * 
 * 服务实现类
 * 
 *
 * @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**

--------------------

![在这里插入图片描述][81dccd5fa627421fa1772e48e65ebe55.jpeg_pic_center]

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

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

--------------------

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

[f88015a594b6410f94ffc2c1a94f5440.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8f720a00a58f46a799881d0de2984b01.png
[70f28cf23ea54bfb867bd982b3df7ca9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f2cddc8bc36b4aac80d3743b4f707a47.png
[81dccd5fa627421fa1772e48e65ebe55.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/00e1aee07a814b1eb4c86258ff2de1f2.jpeg
[-]: https://blog.csdn.net/SoulNone/article/details/126317657
[-Vue_Java]: https://blog.csdn.net/SoulNone/article/details/126317092
[java_-]: https://blog.csdn.net/SoulNone/article/details/126317591