前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >地址管理之省市区三级联动菜单

地址管理之省市区三级联动菜单

作者头像
爱撒谎的男孩
发布2018-05-25 16:21:19
4.1K1
发布2018-05-25 16:21:19
举报
文章被收录于专栏:码猿技术专栏

地址管理之省市区三级联动菜单

三级联动表单
三级联动表单

三级联动表单

导入省市区的数据

  • 下载sql语句的文件
  • 在数据库中执行:source 文件路径即可导入
  • 导入成功之后,在数据库中会出现三张表,分别代表省,市,区

创建实体类

  • getset方法
  • hashCodeequals方法
  • 实现序列化接口,生成安全码

Province

代码语言:javascript
复制
/**
 * 省的实体类
 * @author chenjiabing
 */
public class Province implements Serializable {
	private static final long serialVersionUID = -4983640220555245518L;
	private Integer id;  //主键
	private String provinceCode;  //编号
	private String provinceName;  //名称
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getProvinceCode() {
		return provinceCode;
	}
	public void setProvinceCode(String provinceCode) {
		this.provinceCode = provinceCode;
	}
	public String getProvinceName() {
		return provinceName;
	}
	public void setProvinceName(String provinceName) {
		this.provinceName = provinceName;
	}
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((id == null) ? 0 : id.hashCode());
		result = prime * result
				+ ((provinceCode == null) ? 0 : provinceCode.hashCode());
		result = prime * result
				+ ((provinceName == null) ? 0 : provinceName.hashCode());
		return result;
	}
	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		Province other = (Province) obj;
		if (id == null) {
			if (other.id != null)
				return false;
		} else if (!id.equals(other.id))
			return false;
		if (provinceCode == null) {
			if (other.provinceCode != null)
				return false;
		} else if (!provinceCode.equals(other.provinceCode))
			return false;
		if (provinceName == null) {
			if (other.provinceName != null)
				return false;
		} else if (!provinceName.equals(other.provinceName))
			return false;
		return true;
	}
	@Override
	public String toString() {
		return "Province [id=" + id + ", provinceCode=" + provinceCode
				+ ", provinceName=" + provinceName + "]";
	}
}

City

代码语言:javascript
复制
/**
 * 城市的实体类
 * @author chenjiabing
 */
public class City implements Serializable {
	private static final long serialVersionUID = -6530707564192968718L;
	private Integer id;  //主键
	private String provinceCode;  //省的编号
	private String cityCode;  //编号
	private String CityName;  //名称
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getProvinceCode() {
		return provinceCode;
	}
	public void setProvinceCode(String provinceCode) {
		this.provinceCode = provinceCode;
	}
	public String getCityCode() {
		return cityCode;
	}
	public void setCityCode(String cityCode) {
		this.cityCode = cityCode;
	}
	public String getCityName() {
		return CityName;
	}
	public void setCityName(String cityName) {
		CityName = cityName;
	}
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result
				+ ((CityName == null) ? 0 : CityName.hashCode());
		result = prime * result
				+ ((cityCode == null) ? 0 : cityCode.hashCode());
		result = prime * result + ((id == null) ? 0 : id.hashCode());
		result = prime * result
				+ ((provinceCode == null) ? 0 : provinceCode.hashCode());
		return result;
	}
	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		City other = (City) obj;
		if (CityName == null) {
			if (other.CityName != null)
				return false;
		} else if (!CityName.equals(other.CityName))
			return false;
		if (cityCode == null) {
			if (other.cityCode != null)
				return false;
		} else if (!cityCode.equals(other.cityCode))
			return false;
		if (id == null) {
			if (other.id != null)
				return false;
		} else if (!id.equals(other.id))
			return false;
		if (provinceCode == null) {
			if (other.provinceCode != null)
				return false;
		} else if (!provinceCode.equals(other.provinceCode))
			return false;
		return true;
	}
	@Override
	public String toString() {
		return "City [id=" + id + ", provinceCode=" + provinceCode
				+ ", cityCode=" + cityCode + ", CityName=" + CityName + "]";
	}
	
}

Area

代码语言:javascript
复制
/**
 * 区/县的实体类
 * @author chenjiabing
 */
public class Area implements Serializable {
	private static final long serialVersionUID = -7024097434624454416L;
	private Integer id;  //主键
	private String areaCode; //编号
	private String cityCode;  //城市的编号
	private String areaName;  //名称
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getAreaCode() {
		return areaCode;
	}
	public void setAreaCode(String areaCode) {
		this.areaCode = areaCode;
	}
	public String getCityCode() {
		return cityCode;
	}
	public void setCityCode(String cityCode) {
		this.cityCode = cityCode;
	}
	public String getAreaName() {
		return areaName;
	}
	public void setAreaName(String areaName) {
		this.areaName = areaName;
	}
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result
				+ ((areaCode == null) ? 0 : areaCode.hashCode());
		result = prime * result
				+ ((areaName == null) ? 0 : areaName.hashCode());
		result = prime * result
				+ ((cityCode == null) ? 0 : cityCode.hashCode());
		result = prime * result + ((id == null) ? 0 : id.hashCode());
		return result;
	}
	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		Area other = (Area) obj;
		if (areaCode == null) {
			if (other.areaCode != null)
				return false;
		} else if (!areaCode.equals(other.areaCode))
			return false;
		if (areaName == null) {
			if (other.areaName != null)
				return false;
		} else if (!areaName.equals(other.areaName))
			return false;
		if (cityCode == null) {
			if (other.cityCode != null)
				return false;
		} else if (!cityCode.equals(other.cityCode))
			return false;
		if (id == null) {
			if (other.id != null)
				return false;
		} else if (!id.equals(other.id))
			return false;
		return true;
	}
	@Override
	public String toString() {
		return "Area [id=" + id + ", areaCode=" + areaCode + ", cityCode="
				+ cityCode + ", areaName=" + areaName + "]";
	}
	
}

持久层

功能分析

  1. 获取获取所有的省份信息
  2. 根据选择的省份传回的省份编号查询所有的城市信息
  3. 根据选择的城市传回的城市编码查询所有的县区的信息

新建DictMapper接口

  • 完成上面的三个功能,因此需要定义三个方法
代码语言:javascript
复制
/**
 * 省市区的接口
 * @author chenjiabing
 */
public interface DictMapper {
	/**
	 * 查询所有的省份
	 * @return  省份集合
	 */
	List<Province> selectProvince();
	
	/**
	 * 
	 * @param provinceCode
	 * @return
	 */
	List<City> selectCityByProvinceCode(String provinceCode);
	
	/**
	 * 根据城市的编码查询所有的县区
	 * @param cityCode
	 * @return
	 */
	List<Area> selectAreaByCityCode(String cityCode);
	
}

src/resource/mainmappers文件夹创建DictMapper.xml文件

代码语言:javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"      
 "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
 <!-- namespace指定的DictMapper接口的全类名 -->
 <mapper namespace="cn.tedu.store.mapper.DictMapper">
 	<!-- 
 		List<Province> selectProvince();
 		查询所有的省份
 	 -->
 	<select id="selectProvince" resultType="cn.tedu.store.bean.Province">
 		select id,
 		province_code as provinceCode,
 		province_name as provinceName 
 		from t_dict_provinces
 	</select>
 	
 	<!-- 
 		List<City> selectCityByProvinceCode(String provinceCode);
 		根据省份的编码查询所有的城市信息
 	 -->
 	 <select id="selectCityByProvinceCode" resultType="cn.tedu.store.bean.City">
 	 	select id,
 	 	province_code as provinceCode,
 	 	city_code as cityCode,
 	 	city_name as cityName
 	 	from t_dict_cities where province_code=#{province_code}
 	 </select>
 	 
 	 
 	 <!-- 
 	 	List<Area> selectAreaByCityCode(String cityCode);
 	 	根据城市的编码查询所有的县区
 	  -->
 	  <select id="selectAreaByCityCode" resultType="cn.tedu.store.bean.Area">
 	  	select id,
 	  	area_code as areaCode,
 	  	area_name as areaName,
 	  	city_code as cityCode
 	  	from t_dict_areas where city_code=#{cityCode}
 	  </select>
 </mapper>

业务层

功能分析

  1. 获取获取所有的省份信息
  2. 根据选择的省份传回的省份编号获取所有的城市信息
  3. 根据选择的城市传回的城市编码获取所有的县区的信息

cn.tedu.store.service中新建IDictService接口

代码语言:javascript
复制
/**
 * 省市区的业务接口
 * @author chenjiabing
 */
public interface IDictService {
	/**
	 * 获取所有的省份信息,返回对象集合
	 * @return  Province对象集合
	 */
	List<Province> getProvinces();
    
    /**
	 * 根据省份的编码获取所有的城市信息
	 * @param provinceCode   省份的编码
	 * @return   所有的城市的集合
	 */
	List<City> getCities(String provinceCode);
	
	/**
	 * 根据城市的编码获取所有的县区的信息
	 * @param cityCode  城市的编码
	 * @return  所有县区的集合
	 */
	List<Area> getAreas(String cityCode);
}

cn.tedu.store.service中新建DictServiceImpl实现类

  • 使用@service注解来控制反转,新建对象
代码语言:javascript
复制
/**
 * 省市区的业务实现类
 * @author chenjiabing
 */
@Service //控制反转,创建对象
public class DictServiceImpl implements IDictService {
	@Resource   //自动注入对象
	private DictMapper dictMapper;
	public List<Province> getProvinces() {
		return dictMapper.selectProvince();
	}
    
    /**
	 * 获取所有的城市信息
	 */
	public List<City> getCities(String provinceCode) {
		return dictMapper.selectCityByProvinceCode(provinceCode);
	}
	
	/**
	 * 获取所有的县区信息
	 */
	public List<Area> getAreas(String cityCode) {
		return dictMapper.selectAreaByCityCode(cityCode);
	}
    
}

控制层

功能分析

  1. 获取所有的省份信息(省份下拉选择文本改变发出异步请求)
    1. /dict/getProvince.do
    2. 请求方式:GET
    3. 响应方式:@ResponseBody
  2. 获取对应的城市信息
    1. /dict/getCities.do
    2. 请求方式:GET
    3. 请求参数:ProvinceCode:省份编码
    4. 响应方式:@ResponseBody
  3. 获取对应的县区信息
    1. /dict/getArea.do
    2. 请求方式:GET
    3. 请求参数:cityCode:城市编码
    4. 响应方式:@ResponseBody

cn.tedu.store.controller中新建一个DictController

  • 使用@Controller注解
  • 使用@RequestMapping
代码语言:javascript
复制
/**
 * 省市区的controller层
 * 继承父类BaseController
 * @author chenjiabing
 */
@Controller
@RequestMapping("/dict")
public class DictController extends BaseController {
	@Resource  
	private IDictService dictService;  //自动创建service对象
	
	/**
	 * 异步获取所有的省份信息,返回给页面
	 * @return 结果集,省份信息
	 */
	@RequestMapping("/getProvince.do")
	@ResponseBody
	public ResponseResult<List<Province>> getProvince(){
		//创建结果集对象
		ResponseResult<List<Province>> result=new ResponseResult<List<Province>>();
		List<Province> provinces=dictService.getProvinces();
		result.setState(1);  //设置响应码
		result.setMessage("响应成功");
		result.setData(provinces);  //添加返回的数据
		return result;
	}
	
    	/**
	 * 获取城市信息
	 * @param provinceCode  省份的编码
	 * @return  返回结果集
	 */
	@RequestMapping("/getCity.do")
	@ResponseBody
	public ResponseResult<List<City>> getCity(String provinceCode){
		ResponseResult<List<City>> result=new ResponseResult<List<City>>();  //创建结果集对象
		List<City> cities=dictService.getCities(provinceCode);   //获取城市信息
		result.setData(cities);   //将城市信息封装到结果集中
		return result;
	}
	
	/**
	 * 异步获取所有县区的信息
	 * @param cityCode  城市编码
	 * @return  结果集,其中封装了县区的信息
	 */
	@RequestMapping("/getArea.do")
	@ResponseBody
	public ResponseResult<List<Area>> getAreas(String cityCode){
		ResponseResult<List<Area>> result=new ResponseResult<List<Area>>();
		List<Area> areas=dictService.getAreas(cityCode);
		result.setData(areas);
		return result;
	}
}

JSP页面

功能分析

  1. 当页面加载的时候调用getProvinces()方法,发送异步请求,这样所有的省份信息都加载出来了
  2. 省份信息的下拉列表select选择改变了,那么调用getCities()方法,这样对应省份的市就加载出来了
    1. onchange=getCities()
  3. 市的下拉列表select选择改变了,那么调用getAreas()方法,这样对应的县区就加载出来了
    1. onchange=getAreas()

实现

代码语言:javascript
复制
$(function(){
    getProvinces();  //页面加载完成之后就调用该方法获取所有的省份信息
})

	//获取所有的省份信息
	function getProvinces(){
		var url="<%=request.getContextPath()%>/dict/getProvince.do";  //异步请求的url
		//发出异步请求
		$.get(url,function(data,status,xhr){
			if(status=="success"){
				for(var i=0;i<data.data.length;i++){
					var option="<option value="+data.data[i].provinceCode+">"+data.data[i].provinceName+"</option>";
					$("#receiverState").append(option);
				}
			}
		});
	}
	
	
	//获取所有的城市信息
	function getCities(){
		var provinceCode=$("#receiverState").val();  //请求的数据
		var url="<%=request.getContextPath()%>/dict/getCity.do?provinceCode="+provinceCode;  //异步请求的url
		
		$("#receiverCity").html("<option value='-1'>-------请选择城市---------</option>");
		
		//如果其中的provinceCode==-1,表示选择了请选择省份的那个选项,此时就不许需要发出异步请求了
		if(provinceCode==-1){
			return;
		}
		//发送异步请求
		$.get(url,function(data,status,xhr){
			if(status=="success"){
				for(var i=0;i<data.data.length;i++){
					//新建option节点,第一个是文本的值,第二个是value属性的值
					var option=new Option(data.data[i].cityName,data.data[i].cityCode);
					$("#receiverCity").append(option);  
				}
			}
		})
		
	}
	
	//获取所有县区的异步请求
	function getAreas(){
		var cityCode=$("#receiverCity").val();  //请求的数据
		var url="<%=request.getContextPath()%>/dict/getArea.do?cityCode="+cityCode;  // 异步请求的url
		
		$("#receiverDistrict").html("<option value='-1'>-------请选择县区---------</option>");
		
		//如果其中的cityCode==-1,表示选择了请选择省份的那个选项,此时就不许需要发出异步请求了
		if(cityCode==-1){
			return;
		}
		//发送异步请求
		$.get(url,function(data,status,xhr){
			if(status=="success"){
				for(var i=0;i<data.data.length;i++){
					//新建option节点,第一个是文本的值,第二个是value属性的值
					var option=new Option(data.data[i].areaName,data.data[i].areaCode);
					$("#receiverDistrict").append(option);  
				}
			}
		})
	}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 地址管理之省市区三级联动菜单
    • 导入省市区的数据
      • 创建实体类
        • Province
        • City
        • Area
      • 持久层
        • 功能分析
        • 新建DictMapper接口
        • 在src/resource/main的mappers文件夹创建DictMapper.xml文件
      • 业务层
        • 功能分析
        • 在cn.tedu.store.service中新建IDictService接口
        • 在cn.tedu.store.service中新建DictServiceImpl实现类
      • 控制层
        • 功能分析
        • 在cn.tedu.store.controller中新建一个DictController类
      • JSP页面
        • 功能分析
        • 实现
    相关产品与服务
    数据库
    云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档