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

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

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 先把全国的省和直辖市查出来,



  1. 拿到省或者直辖市的id再去请求接口这样就能将本省的下的市或者区全查出来



2.4数据的存储以及回显

1.在使用的时候最好将省市县的主键idname都存到数据库中

2. 前端回显的时候可以直接拿name去展示省市县的名称,也可以使用id从数据库中请求

3. 当数据量特别大的时候,如果使用id去请求数据库可能会对数据库造成很大的压力,这个时候可以将所有的省市县全查出来放到redis中,减轻数据库的压力

4. 如果值列表的数据不是很大,可以直接将数据以id为key,name 为value 的大map的形式全给前端, 前端回显的时候使用id去map中去匹配值

目录
相关文章
|
JavaScript 前端开发 API
省市县三级联动
上次找到地区编码后,就测试省市县。网上找到例子感觉不是很合适,然后修改了下。 本来是从自己数据库查询,但做测试的话,在网上找到了一个地区编码的api,然后就是跨域问题。原来用ajax访问失败,getJSON可以,但getJson有同步问题,设置了全局参数也不管用,只好重复使用了。
1320 0
|
定位技术
echart 全国地图 下钻省、市、区
echart 全国地图 下钻省、市、区
566 0
|
5月前
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
6月前
|
JavaScript
省、市、区三级联动
省、市、区三级联动
|
索引
三级联动---城市地区选择
三级联动---城市地区选择有关数据源指给出了部分,仅作参考,其中提供了北京和天津两组数据作为测试用。   示例展示:   选择城市选择区县选择地区             示例代码: 三级联动 ...
979 0
|
JavaScript 数据库 前端开发
|
SQL 关系型数据库 数据库
|
6月前
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
335 0
|
6月前
|
小程序 JavaScript
微信小程序获取省市县
微信小程序获取省市县
89 0