实战演练-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.valuedata.multiIndex[e.detail.column] = e.detail.value;//如果更新的是第一列“省”，第二列“市”和第三列“区”的数组下标置为0if (e.detail.column == 0) {data.multiIndex = [e.detail.value, 0, 0];} else if (e.detail.column == 1) {//如果更新的是第二列“市”，第一列“省”的下标不变，第三列“区”的数组下标置为0data.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{@Autowiredprivate 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 {@Autowiredprivate ChinasMapper chinasMapper;/**微信小程序 省市区对接*/@Overridepublic 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模式-拉取省市区数据

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

微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
微信小程序的省市区三级地址mysql_微信小程序实现三级联动-省市区
序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数据,可根据个人需要做一些更改,我比较懒就不改了. wxml {{province}} {{city}} {{c ...
支付宝小程序JS省市区三级联动
1.citysJSON.js //地区js文件 var citys = [{"name": "北京市","subList": [ ...
基于java微信小程序的校园二手商城设计与实现
基于java微信小程序的二手商城设计与实现首先介绍一下SpringSecurity安全登陆框架微信小程序我用的是mysql数据库这是我小程序的用例图系统总体功能架构图系统功能模块设计数据 ...
牛逼的uniapp+Java微信小程序商城来了
牛逼的uniapp+Java微信小程序商城来了减少重复造轮子,开源微信小程序商城(前后端开源:uniapp+Java),秒杀.优惠券.多商户.直播卖货.分销等功能.快速搭建一个属于自己的微信小程序商 ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...
实现微信小程序picker 省市区自定义数据支持三级联动
再使用微信小程序时发现当 mode="region" 时数据选择的省市区的数据不支持后台返回的数据以下实现后台返回数据操作先设置HTML name 字段名字要替换掉 ...
撸个微信小程序的省市区选择器
起因微信小程序虽然已经有现成的封装好的省市区选择器给开发者使用,然鹅不幸的是,微信地址库的数据和公司用的地址库数据很难一一对上,那就只能撸起袖子自己写个组件了. 最终效果思维导图主要代码组件 ...

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

最终效果图

vue 代码

JAVA 代码

Mysql数据表数据

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

最新文章

热门文章