省市县三级联动的实现方案

1. 问题的来源

  1. 在开发中经常需要进行一个页面级联效果,最经常使用莫过于省市级三级联动的效果,比如选完北京市然后把北京市下属的区丰台区,海淀区,昌平区…返回前端

2. 解决方案

本次解决方案仅涉及后端(ps:主要是前后端分离的项目写多,不会前端操作了)

2.1 数据库设计

CREATE TABLE `sys_china`  (
  `Id` int(11) NOT NULL COMMENT '主键id',
  `Name` varchar(40) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '名称',
  `Pid` int(11) NULL DEFAULT NULL,
  `status` varchar(2) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '1' COMMENT '1:启用,2:禁用',
  PRIMARY KEY (`Id`) USING BTREE,
  INDEX `FK_CHINA_REFERENCE_CHINA`(`Pid`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COMMENT = '省市区表' ;

2.2 后端代码(springboot+mysql)

代码地址:
https://github.com/Dr-Water/Level-3-linkage
sql代码也在项目的sql文件夹中
在这里插入图片描述
数据库一共四个字段:
在这里插入图片描述

含义
id主键id
name省市县的名称
pid本条记录父类id
status本条记录的启用状态

2.3 操作测试步骤

将项目启动起来使用postman进行测试:
请求路径:localhost:8010/link/city/queryById

  1. 前端第一次请求的时候id传成0 先把全国的省和直辖市查出来,
    在这里插入图片描述
  2. 拿到省或者直辖市的id再去请求接口这样就能将本省的下的市或者区全查出来
    在这里插入图片描述

2.4数据的存储以及回显

1.在使用的时候最好将省市县的主键idname都存到数据库中
2. 前端回显的时候可以直接拿name去展示省市县的名称,也可以使用id从数据库中请求
3. 当数据量特别大的时候,如果使用id去请求数据库可能会对数据库造成很大的压力,这个时候可以将所有的省市县全查出来放到redis中,减轻数据库的压力
4. 如果值列表的数据不是很大,可以直接将数据以id为key,name 为value 的大map的形式全给前端, 前端回显的时候使用id去map中去匹配值

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
首先,你需要准备好三个级别的数据,即份、城和区的数据。可以通过接口或者静态数据文件的方式获取这些数据。 然后,在Vue组件中,你可以使用v-model指令绑定一个变量来保存用户选择的信息。接着,你可以使用三个下拉框来实现三级,当用户选择份时,触发change事件,根据份的值态生成城下拉框的选项,当用户选择城时,再次触发change事件,态生成区的选项。 以下是实现三级的示例代码: ```html <template> <div> <select v-model="selectedProvince" @change="handleProvinceChange"> <option v-for="(province, index) in provinces" :key="index" :value="province">{{province}}</option> </select> <select v-model="selectedCity" @change="handleCityChange"> <option v-for="(city, index) in cities" :key="index" :value="city">{{city}}</option> </select> <select v-model="selectedCounty"> <option v-for="(county, index) in counties" :key="index" :value="county">{{county}}</option> </select> </div> </template> <script> export default { data() { return { selectedProvince: '', selectedCity: '', selectedCounty: '', provinces: ['北京', '上海', '广东'], // 假设这里是份数据 cities: [], // 城数据 counties: [] // 区数据 } }, methods: { handleProvinceChange() { // 根据选择的态生成城选项 // 假设这里是根据接口获取的城数据 this.cities = ['广州', '深圳', '珠海']; this.selectedCity = ''; this.counties = []; }, handleCityChange() { // 根据选择的城态生成区选项 // 假设这里是根据接口获取的区数据 this.counties = ['天河区', '越秀区', '海珠区']; this.selectedCounty = ''; } } } </script> ``` 当用户选择份时,会触发handleProvinceChange方法,根据选择的态生成城选项。当用户选择城时,会触发handleCityChange方法,根据选择的城态生成区选项。通过v-model指令和事件绑定的方式,实现三级功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

T-OPEN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值