1、数据库
CREATE TABLE `qxbm_district` (
`district_id` int NOT NULL AUTO_INCREMENT COMMENT '行政区ID',
`district_pid` int NOT NULL COMMENT '行政区父id',
`district_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '行政区名称',
`district_shortname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '行政区简称',
`district_lng_x` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '行政区纬度(y轴)',
`district_lat_y` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '行政区经度(x轴)',
`district_level` smallint NOT NULL COMMENT '行政区等级',
`district_sort` mediumint NOT NULL COMMENT '行政区排序',
`district_status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '行政区是否有效(0:无效,1:有效)',
PRIMARY KEY (`district_id`) USING BTREE,
KEY `district_index` (`district_pid`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=659004503 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci COMMENT='行政区';
2.JAVABean
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("qxbm_district")
public class DistrictEntity implements Serializable {
//id
private Integer districtId;
//父id
private Integer districtPid;
//省/市/区名字
private String districtName;
//省/市/区简称
private String districtShortname;
//省/市/区 经纬度 X
private String districtLngX;
//省/市/区 经纬度 Y
private String districtLngY;
//行政区等级
private Integer districtLevel;
//行政区排序
private Integer districtSort;
//行政区是否有效(0:无效,1:有效)
private Integer districtStatus;
}
Mapper
@Mapper
public interface DistrictMapper extends BaseMapper<DistrictEntity> {
/**
* Description: 查找省份
* @return 省级城市列表
*/
List<DistrictEntity> getProvinceList();
/**
* Description: 根据当前省份/城市 id(下级城市 parent_id) 查询下级城市列表
* @param lId 省份/城市 id(下级城市 parent_id)
* @return 下级城市列表
*/
List<DistrictEntity> getCityListByParentId(int lId);
/**
* Description: 根据 id 查询城市详情
* @param lId 城市 id
* @return 城市详细信息
*/
DistrictEntity getCityInfoById(int lId);
}
Mapper.xml
<resultMap id="base_Qxbmdistrict" type="com.sxzx.manage.domain.DistrictEntity">
<result property="districtId" column="district_id" />
<result property="districtPid" column="district_pid" />
<result property="districtName" column="district_name" />
<result property="districtShortname" column="district_shortname" />
<result property="districtLngX" column="district_lng_x" />
<result property="districtLngY" column="district_lng_x" />
<result property="districtLevel" column="district_level" />
<result property="districtSort" column="district_sort" />
<result property="districtStatus" column="district_status" />
</resultMap>
<select id="getProvinceList"
resultMap="base_Qxbmdistrict">
SELECT * FROM qxbm_district cd WHERE cd.district_id LIKE '%0000';
</select>
<!-- 根据当前省份/城市 id(下级城市 parent_id) 查询下级城市列表 -->
<select id="getCityListByParentId" parameterType="int" resultMap="base_Qxbmdistrict">
SELECT * FROM qxbm_district cd WHERE cd.district_pid = #{lId};
</select>
<!-- 根据 id 查询城市详情 -->
<select id="getCityInfoById" parameterType="long" resultMap="base_Qxbmdistrict">
SELECT * FROM qxbm_district cd WHERE cd.district_id = #{lId};
</select>
</mapper>
Service
@Service
public class DistrictServiceImpl extends ServiceImpl<DistrictMapper, DistrictEntity> implements IDistrictService {
@Autowired
private DistrictMapper districtMapper;
@Override
public List<DistrictEntity> getProvinceList() {
return districtMapper.getProvinceList();
}
@Override
public List<DistrictEntity> getCityListByParentId(int lId) {
return districtMapper.getCityListByParentId(lId);
}
@Override
public DistrictEntity getCityInfoById(int lId) {
return districtMapper.getCityInfoById(lId);
}
}
Controller
private final String mapResultSuccess = "isSuccess";
private final String mapResultErrorMsg = "errorMsg";
private final String mapResultData = "cityInfo";
* Description: 获取省市列表
*
* @return isSuccess 为 true 时,
* cityList 为列表内容; isSuccess
* 为 false 时 cityList 为空, errorMsg 为异常信息
*/
@PostMapping("/getProvinceList")
@ResponseBody
public Map<String, Object> getProvinceList() {
Map<String, Object> mapResult = new HashMap<>();
try {
List<DistrictEntity> cityInfoList = districtService.getProvinceList();
if (!CollectionUtils.isEmpty(cityInfoList)) {
mapResult.put("isSuccess", true);
mapResult.put("provinceList", JSONObject.toJSON(cityInfoList));
}
}
catch (Exception ex) {
mapResult.put("isSuccess", false);
mapResult.put("errorMsg", "系统异常");
LOGGER.error("Invoke getProvinceList happened Exception ==== {}", ex.getMessage(), ex);
}
return mapResult;
}
/**
* Description: 根据当前省份/城市 的id(下级城市 的parent_id) 查询下级城市列表
* @param lId 省份/城市 id(下级城市 parent_id)
* @return isSuccess 为 true 时,
* cityList 为列表内容; isSuccess 为 false 时 cityList 为空, errorMsg 为异常信息
*/
@ResponseBody
@PostMapping("/getCityListByParentId")
public Map<String, Object> getCityListByParentId(int lId) {
Map<String, Object> mapResult = new HashMap<>();
try {
List<DistrictEntity> cityInfoList = districtService.getCityListByParentId(lId);
if (!CollectionUtils.isEmpty(cityInfoList)) {
mapResult.put("cityList", cityInfoList);
}
else {
mapResult.put(mapResultSuccess, false);
mapResult.put(mapResultErrorMsg, "数据为空");
LOGGER.error("Invoke getCityListByParentId() happened ERROR!!! ==== {}", mapResult);
}
}
catch (Exception ex) {
mapResult.put(mapResultSuccess, false);
mapResult.put(mapResultErrorMsg, "系统异常");
LOGGER.error("Invoke getCityListByParentId() happened Exception ==== {}", ex.getMessage(), ex);
}
return mapResult;
}
/**
* Description: 根据 id 查询城市详情
* @param lId 城市 id
* @return isSuccess 为 true 时,
* cityInfo 为城市详细信息; isSuccess 为 false 时 cityInfo 为空, errorMsg 为异常信息
*/
@PostMapping("/getCityInfoById")
public Map<String, Object> getCityInfoById(int lId) {
Map<String, Object> mapResult = new HashMap<>();
try {
DistrictEntity cityInfo = districtService.getCityInfoById(lId);
if (null != cityInfo) {
mapResult.put(mapResultData, cityInfo);
}
else {
mapResult.put(mapResultSuccess, false);
mapResult.put(mapResultErrorMsg, "城市 id 不合法");
LOGGER.error("Invoke getCityInfoById() happened ERROR!!! ==== {}", mapResult);
}
}
catch (Exception ex) {
mapResult.put(mapResultSuccess, false);
mapResult.put(mapResultErrorMsg, "系统异常");
LOGGER.error("Invoke getCityInfoById() happened Exception ==== {}", ex.getMessage(), ex);
}
return mapResult;
}
后端总结
代码即取即用，部分代码参考其他博主，若有侵权，请联系我删除，谢谢。
ruoyi框架前端
对于若依框架，由于是刚进公司第一次接触，有很多不了解的地方，许多地方都是根据大佬们的文章进行修改而成，这里是楼主自己做笔记用，若有侵权处，请联系楼主删除。
第一次使用ruoyi，框架前端特殊出其自动生成的代码自动包括了list.html, add.html, edit.html 三部分。
本项目三级联动查询放置与add里吗，即点击list.html 的添加按钮后的弹出框。
add.html
代码来源： 行走中的少年
https://blog.csdn.net/qq_42751248
以下前端内容皆来源于以上bo主，这里楼主只做自己的说明方便自己记忆。由于本人基础较差，所以不对之处还请见谅。
<div class="form-group">
<!-- <select id="province" class="form-control m-b" name="provinceName">
name需要与若依框架自动生成的该html页面的名字一样，虽然生成的可能是输入框，换成下拉框之后更改name属性即可-->
<label class="col-sm-3 control-label">省份名称：</label>
<div class="col-sm-8">
<select id="province" class="form-control m-b" name="provinceName">
<option value="0">--请选择省份--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">省份名称：</label>
<div class="col-sm-8">
<input name="provinceName" id="belongAreaName" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">城市编码：</label> -->
<label class="col-sm-3 control-label">城市名称：</label>
<div class="col-sm-8">
<select id="city" class="form-control m-b" name="cityName">
<option value="0">--请选择市区--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">城市名称：</label>
<div class="col-sm-8">
<input name="cityName" id="ivtStr2" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">区县编码：</label> -->
<label class="col-sm-3 control-label">区县名称：</label>
<div class="col-sm-8">
<select id="area" class="form-control m-b" name="areaName">
<option value="0">--请选择县城--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">区县名称：</label>
<div class="col-sm-8">
<input name="areaName" id="ivtStr4" class="form-control" type="text">
</div>
</div>
add.html js
$(document).ready(function () {//页面加载时运行此函数 放在最前端
//三级联动
$.ajax({
url: prefix + "/getProvinceList",//请求路径
type: 'POST', //请求类型
dataType:"json", //数据格式
success:function(data){ //data 后端响应来的数据
//遍历输出并添加append
$(data.provinceList).each(function(a,b){
//由于后端响应的数据是json格式进行封装到data里，data.provinceList调取data里的provinceList属性。provinceList为需要与后端（controller）封装返回的名字一样
$("#province").append("<option value='"+b.districtId+"'>"+b.districtName+"</option>");
});
//前端打印查看数据格式
console.log("数据", data);
},
});
//选择省份，保存省份编码和对应名称，以及联动市级下拉框数据
$("#province").change(function(){
//定义变量，接收下拉框数据
var lId = 0;
//移除掉id为city/area的元素里面的所有内容，包括子节点和文本！
$("#city").empty();
$("#area").empty();
//把下拉框的值赋值到文本框内
var a = $("#province option:selected").text();
$("#belongAreaName").val(a);
//获取该节点的 id
var lId = $("#province").val();
$("#city").append("<option value='0'>--请选择市区--</option>");
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url:prefix + "/getCityListByParentId",
type:"post",
dataType:"json",
data:{
//传递参数到后端
"lId": lId,
},
success:function(data){
$(data.cityList).each(function(a,b){
$("#city").append("<option value='"+b.districtId+"'>"+b.districtName+"</option>");
});
console.log("cityList",data)
},
error:function(){
}
});
});
//选择城市，保存城市编码和对应名称，以及联动县级下拉框数据
$("#city").change(function(){
var lId = 0;
$("#area").empty();
var lId = $("#city").val();
var a = $("#city option:selected").text();
$("#ivtStr2").val(a);
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url:prefix + "/getCityListByParentId",
type:"post",
dataType:"json",
data:{
"lId": lId,
},
success:function(data){
$(data.cityList).each(function(a,b){
$("#area").append("<option value='"+b.districtId+"'>"+b.districtName+"</option>");
});
},
error:function(){
}
});
});
//选择区县，保存区县编码和对应名称
$("#area").change(function(){
$("#town").empty();
var a = $("#area option:selected").text();
$("#ivtStr4").val(a);
});
})
edit.html
<div class="form-group">
<!-- 跟add.html一样，name属性换为若以生成的name属性
th:field="*{XXXXXXX}" 也换为若依生成的 -->
<label class="col-sm-3 control-label">省份名称：</label>
<div class="col-sm-8">
<select id="province" class="form-control m-b" name="provinceName">
<option value="0">--请选择省份--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">省份名称：</label>
<div class="col-sm-8">
<input name="provinceName" id="belongAreaName" th:field="*{provinceName}" class="form-control"
type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">城市编码：</label> -->
<label class="col-sm-3 control-label">城市名称：</label>
<div class="col-sm-8">
<select id="city" class="form-control m-b" name="ivtStr1">
<option value="0">--请选择市区--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">城市名称：</label>
<div class="col-sm-8">
<input name="cityName" id="ivtStr2" th:field="*{cityName}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">区县编码：</label> -->
<label class="col-sm-3 control-label">区县名称：</label>
<div class="col-sm-8">
<select id="area" class="form-control m-b" name="ivtStr3">
<option value="0">--请选择县城--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">区县名称：</label>
<div class="col-sm-8">
<input name="areaName" id="ivtStr4" th:field="*{areaName}" class="form-control" type="text">
</div>
</div>
edit.html JS
//页面一加载查询后台数据，与数据库原先省市县保存的数据进行匹配，并显示三个在下拉框中
$.ajax({
url: prefix + "/getProvinceList",
type: "post",
dataType: "json",
success: function (data) {
//获取当前修改页面省份名称
var shenCode = $("#belongAreaName").val();
//遍历所有省份集合
$(data.provinceList).each(function (a, b) {
//把遍历的省份名称与当前进行匹配
if (b.districtName == shenCode) {
//加入标签操作
$("#province").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
//省份匹配成功后，以当前省份id作为条件，调取后台查询该省份下所有城市的方法
//b.districtId 是你点击修改的那一行的id和name
// debugger;
// console.log("当前城市id",b.districtId);
// console.log("当前城市name",b.districtName);
$.ajax({
url: prefix + "/getProvinceList",
type: "post",
dataType: "json",
success: function (data) {
//获取当前修改页面城市名称
var shiCode = $("#ivtStr2").val();
//遍历所有该省份下城市集合
$(data).each(function (a, b) {
//把遍历的城市名称与当前页面城市匹配
if (b.districtName == shiCode) {
//加入标签操作
$("#city").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
//城市匹配成功后，以当前城市id作为条件，调取后台查询该城市下所有区县的方法
debugger;
console.log("当前城市id",b.districtId);
console.log("当前城市name",b.districtName);
var lId = b.districtId;
$.ajax({
url: prefix + "/getCityListByParentId",
type: "post",
dataType: "json",
data: {
"lId": b.districtId,
},
success: function (data) {
//获取当前修改页面区县名称
var xianCode = $("#ivtStr4").val();
//遍历所有该城市下区县集合
$(data).each(function (a, b) {
//把遍历的区县名称与当前页面获取区县进行匹配
if (b.districtName == xianCode) {
//加入标签操作
$("#area").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
} else {
//加入标签操作（未匹配上当前区县）
$("#area").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
}
});
},
error: function () {
}
});
} else {
//加入标签操作（未匹配上当前城市）
$("#city").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
}
});
},
error: function () {
}
});
} else {
//加入标签操作（未匹配上当前省份）
$("#province").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
}
});
},
error: function () {
}
});
//选择省份，保存省份编码和对应名称，以及联动市级下拉框数据
$("#province").change(function () {
var lId = 0;
$("#city").empty();
$("#area").empty();
var a = $("#province option:selected").text();
$("#belongAreaName").val(a);
var lId = $("#province").val();
$("#city").append("<option value='0'>--请选择市区--</option>");
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url: prefix + "/getCityListByParentId",
type: "post",
dataType: "json",
data: {
"lId": lId,
},
success: function (data) {
$(data.cityList).each(function (a, b) {
$("#city").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
});
},
error: function () {
}
});
});
//选择城市，保存城市编码和对应名称，以及联动县级下拉框数据
$("#city").change(function () {
var lId = 0;
$("#area").empty();
var lId = $("#city").val();
var a = $("#city option:selected").text();
$("#ivtStr2").val(a);
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url: prefix + "/getCityListByParentId",
type: "post",
dataType: "json",
data: {
"lId": lId,
},
success: function (data) {
$(data.cityList).each(function (a, b) {
$("#area").append("<option value='" + b.districtId + "'>" + b.districtName + "</option>");
});
},
error: function () {
}
});
});
//选择区县，保存区县编码和对应名称
$("#area").change(function () {
$("#town").empty();
var a = $("#area option:selected").text();
$("#ivtStr4").val(a);
});
数据库数据
链接: https://pan.baidu.com/s/1LysI4FsQxdeqUoJI2d_HYw 密码: 0lgn
扫一扫
7998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
