Spring-SpringMVC-Mybatis框架下的 省市区 三级联动

 初学者学习SSM框架,若有问题,请留言.

    首先看一下项目结构.

    

    配置文件Web.xml,  spring-dao.xml,   springmvc-servlet.xml,  configuration.properties 等就是常规没有特殊的,具体内容可以看我上一篇博客.

    首先看一下Mysql的表

         

       省市区三张表,市通过p_id与省相连,区通过c_id与市相连.

    通过Mybatis代码自动生成工具自动生成dao层和entity层.也就是     

    我们要做的是   在Province(后简称P)类中建立一个List<city>字段,用来储存对应的City对象,然后再City(后简称C)类中建立一个List<area>字段用来储存对应的Area(后简称A)对象. 

    

    

    P类,C类,A类属于接口,所以只需要定义方法即可. 具体如何实现,我们要在对应的Mapper.xml文件中写出来.

    这样,只要通过数据库查出所有的P,也就同时能够查出City和Area.

    在PMapper.java中建立 搜索所有P 的方法,  在CMapper.java中建立 根据pid搜索 的方法,  在AMapper.java中建立 根据cid搜索 的方法.如下图:

    

    

在P.xml中 添加这样的方法

 <!-- 返回里面有集合的话,就需要添加<collection> -->
  <resultMap id="BaseResultMapProvinceAll" type="com.test.entity.Province" >
    <id column="province_id" property="provinceId" jdbcType="INTEGER" />
    <result column="province_name" property="provinceName" jdbcType="VARCHAR" />
  	<!-- property为对应的字段名,ofType为对应集合存储对象实体类的全限定名 -->
  	<!-- column为对应的下一级搜索的参数列名 -->
  	<!-- select为对应的下一级搜索的<select>的id,这样做就能相当于嵌套搜索 -->
  	<!-- collection中的内容为集合中实体类所对应的表中列名与实体类对应的关系 -->
  	<collection property="citys" ofType="com.test.entity.City" column="province_id" select="com.test.dao.CityMapper.selectByPrivinceId" >
		 <id column="city_id" property="cityId"  />
		 <result column="city_name" property="cityName"  />
		 <result column="province_id" property="provinceId"  />
  	</collection>
  </resultMap>
  <!-- 因为P类中有个字段类型是集合,且对应的xml也有方法返回时集合,所以需要重写resultMap -->
  <select id="selectProvinceAll" resultMap="BaseResultMapProvinceAll"  >
    select 
    <!-- <include/>属于是该表的所有字段,自动生成的,如果需要,我们可以修改 -->
    <include refid="Base_Column_List" />
    from provincedb
  </select>

在C.xml文件中添加方法:

 <resultMap id="BaseResultMapCity" type="com.test.entity.City" >
    <id column="city_id" property="cityId" jdbcType="INTEGER" />
    <result column="city_name" property="cityName" jdbcType="VARCHAR" />
    <result column="province_id" property="provinceId" jdbcType="INTEGER" />
    
    <collection property="areas" ofType="com.test.entity.Area" column="city_id" select="com.test.dao.AreaMapper.selectByCityId" >
		 <id column="area_id" property="areaId" />
   		 <result column="area_name" property="areaName"  />
   		 <result column="city_id" property="cityId"  />
  	</collection>
  </resultMap>
  
  <select id="selectByPrivinceId" resultMap="BaseResultMapCity" parameterType="java.lang.Integer" >
    select 
    <include refid="Base_Column_List" />
    from citydb
    where province_id = #{privince_id,jdbcType=INTEGER}
  </select>

在A.xml文件中添加方法:

 
  <select id="selectByCityId" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
    select 
    <include refid="Base_Column_List" />
    from areadb
    where city_id = #{city_id,jdbcType=INTEGER}
  </select>

这样,只要我们一搜索省份所有的信息,就能得到所对应的市区数据.

下面我们建立测试方法在controller层和service层的内容,以及前端

Controller层:

package com.test.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.test.entity.Province;
import com.test.service.IndexServcie;

@Controller
@RequestMapping("/con")
public class IndexController {	
	@Autowired
	private IndexServcie service;

	@RequestMapping("/get")
	public String getPCA(HttpServletRequest req) {
		List<Province> list = service.getPCAs();
		req.getSession().setAttribute("list", list);
		return "wel";
	}
}

service层:

package com.test.service;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.test.dao.ProvinceMapper;
import com.test.entity.Province;

@Service
public class IndexServcie {
	@Autowired
	private ProvinceMapper dao;

	public List<Province> getPCAs() {
		return dao.selectProvinceAll();
	}
}

哦,对了.我这里是以一个空白页的jsp为起点,跳入到后台,后台获取数据后,在跳入另一个jsp页面中.

起始页index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<body>

</body>
<script type="text/javascript">
	$(function(){
		window.location.replace("con/get");
	})
</script>
</html>

获取数据后的跳转的页面 wel.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" 
           uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		<dl>
			<c:forEach items="${list }" var="temp">
				<dt>${temp.provinceName }</dt>
				<c:forEach items="${temp.citys }" var="temp2">
					<dd>${temp2.cityName }
						<c:forEach items="${temp2.areas }" var="temp3">
						    <p>&nbsp;&nbsp;&nbsp;&nbsp;${temp3.areaName }</p>
						</c:forEach>
					</dd>
				</c:forEach>
			</c:forEach>
		</dl>
	</div>
</body>
</html>

效果如下:

 

测试结果还可以,至少是数据取回来了.接下来我们就根据具体的要求来处理数据.

这个方法不仅仅可以做 省市区三级联动  也可以做电商平台的商品类别之类的.

类似于这样的