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

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

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中去匹配值

目录
相关文章
|
SQL 关系型数据库 MySQL
省市区管理sql数据表设计、以及全国省市区全部最新数据
省市区管理sql数据表设计、以及全国省市区全部最新数据
3457 0
省市区管理sql数据表设计、以及全国省市区全部最新数据
|
前端开发 easyexcel Java
Java+EasyExcel实现文件导入导出,导入导出如此简单
项目中需要Excel文件的导入与导出Excel并下载,例如,导入员工信息,导出员工信息,手动输入比较繁琐,所以本篇博文教大家如何在Java中导入Excel文件与导出Excel文件
15564 3
Java+EasyExcel实现文件导入导出,导入导出如此简单
|
数据采集 前端开发 数据库
省市区三级联动后台接口调用与数据预处理
省市区三级联动后台接口调用与数据预处理
498 0
|
SQL XML JavaScript
【若依Java】15分钟玩转若依二次开发,新手小白半小时实现前后端分离项目,springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
摘要: 本文档详细介绍了如何使用若依框架快速搭建一个基于SpringBoot和Vue3的前后端分离的Java管理后台。教程涵盖了技术点、准备工作、启动项目、自动生成代码、数据库配置、菜单管理、代码下载和导入、自定义主题样式、代码生成、启动Vue3项目、修改代码、以及对代码进行自定义和扩展,例如单表和主子表的代码生成、树形表的实现、商品列表和分类列表的改造等。整个过程详细地指导了如何从下载项目到配置数据库,再到生成Java和Vue3代码,最后实现前后端的运行和功能定制。此外,还提供了关于软件安装、环境变量配置和代码自动生成的注意事项。
28187 73
|
Java 微服务
SpringBoot整合SMS短信服务
本文介绍了如何在SpringBoot项目中整合阿里云SMS短信服务,包括添加依赖、配置文件、配置类、服务层接口和实现类,以及控制器层的实现,用于发送短信验证码。
SpringBoot整合SMS短信服务
响应式高端家居装修网站源码pbootcms模板
分享一款黄色的响应式高端家居装修网站源码pbootcms模板,该模板能自适应手机端,响应式的设计可让您自由编辑,适合任何关于装修,空间设计,家装,家居等业务的企业。
711 1
|
Java
SpringBoot java 一个接口,多个实现,客户定制化
SpringBoot java 一个接口,多个实现,客户定制化
182 0
|
数据采集 前端开发 数据库
实时动态实现省市区三级联动选择器
实时动态实现省市区三级联动选择器
248 0
|
存储 安全 Java
springboot把图片上传到阿里云OSS
springboot把图片上传到阿里云OSS
1176 0
|
网络协议 文件存储
如何公网远程连接本地群晖NAS中的WebDAV
如何公网远程连接本地群晖NAS中的WebDAV
1420 0