1. 程式人生 > >Spring-SpringMVC-Mybatis框架下的 省市區 三級聯動

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>

效果如下:

 

測試結果還可以,至少是資料取回來了.接下來我們就根據具體的要求來處理資料.

這個方法不僅僅可以做 省市區三級聯動  也可以做電商平臺的商品類別之類的.

類似於這樣的