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

1,651 阅读2分钟

这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战

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)

代码地址: github.com/Dr-Water/Le… 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中去匹配值