Spring boot 整合jpa JQuery 實現省，市，區， 三級聯動效果
三級聯動在很多項目都必不可少，尤其是在付款時，需要選取地址，爲了更好的用戶體驗感，從而出現了三級聯動。
實現三級聯動的方法有很多 看個人思路以及提供條件來 ，一張表和三張表都是有不同的寫法，這裏我們提供的是三個表
先來看看效果
前端實現 JQuery
這裏是一個初始化界面
當你改變省級下拉框時 同時會改變市區兩級的值 改變市級 區級也會改變
下面來看操作方法
1.idea 創建Spring Initializr 項目
創建開發模式相應的dao / Service / entity /Controller 層
下圖
大概demo目錄就是這個樣子
下面給大家把代碼貼上來
實體類
package cn.xiaohe.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "t_address_province")
public class TAddressProvince implements Serializable {
//省級實體
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "code")
private String code;
@Column(name = "name")
private String name;
}
package cn.xiaohe.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "t_address_city")
public class TAddressCity implements Serializable {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "code")
private String code;
@Column(name = "name")
private String name;
@Column(name = "provinceCode")
private String provinceCode;
}
package cn.xiaohe.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "t_address_town")
public class TAddressTown implements Serializable {
//區級實體
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "code")
private String code;
@Column(name = "name")
private String name;
@Column(name = "cityCode")
private String cityCode;
}
dao層
package cn.xiaohe.dao;
import cn.xiaohe.entity.TAddressProvince;
import org.springframework.data.jpa.repository.JpaRepository;
//這邊繼承JpaRepository 使用jpa方法 用於查詢省級
public interface AddressRepository extends JpaRepository<TAddressProvince, Integer> {
}
package cn.xiaohe.dao;
import cn.xiaohe.entity.TAddressCity;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Component;
import java.util.List;
public interface CityRepository extends JpaRepository<TAddressCity, Integer> {
//這邊自定義方法 用省級的provinceCode 來查詢出市級的信息
List<TAddressCity> findByProvinceCode(String provinceCode);
}
package cn.xiaohe.dao;
import cn.xiaohe.entity.TAddressCity;
import cn.xiaohe.entity.TAddressTown;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;
public interface townRepository extends JpaRepository<TAddressTown, Integer> {
//同樣自定義方法 使用省級CityCode 來查詢出區級信息
List<TAddressTown> findByCityCode(String CityCode);
}
Service 層
package cn.xiaohe.Service;
import cn.xiaohe.dao.AddressRepository;
import cn.xiaohe.dao.CityRepository;
import cn.xiaohe.dao.townRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import cn.xiaohe.entity.*;
import java.util.List;
@Service
public class AddressService {
@Autowired
AddressRepository AddressRepository;
@Autowired
CityRepository CityRepository;
@Autowired
townRepository townRepository;
//加載省級信息
public List<TAddressProvince> findAll(){
return AddressRepository.findAll();
}
//通過省級ProvinceCode 查詢出市級信息
public List<TAddressCity> findAlls(String ProvinceCode){
List<TAddressCity> allById = CityRepository.findByProvinceCode(ProvinceCode);
return allById;
}
//通過市級CityCode 查詢出區級信息
public List<TAddressTown> findAllss(String CityCode){
List<TAddressTown> byCode = townRepository.findByCityCode(CityCode);
return byCode;
}
}
Controller層
package cn.xiaohe.Controller;
import cn.xiaohe.Service.AddressService;
import cn.xiaohe.entity.TAddressCity;
import cn.xiaohe.entity.TAddressProvince;
import cn.xiaohe.entity.TAddressTown;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class AddressController {
@Autowired
AddressService AddressService;
//通過 index 跳入 index.html頁面
@RequestMapping("/index")
public String index(){
return "index";
}
//加載省級
@RequestMapping("/select")
@ResponseBody
public List<TAddressProvince> findAll(){
List<TAddressProvince> all = AddressService.findAll();
return all;
}
//加載市級
@RequestMapping("/selects")
@ResponseBody
public List<TAddressCity> findAlls(@RequestParam(value = "provinceCode",required = false,defaultValue = "0")String provinceCode){
List<TAddressCity> alls = AddressService.findAlls(provinceCode);
return alls;
}
//加載區級
@RequestMapping("/selectss")
@ResponseBody
public List<TAddressTown> findAllss(@RequestParam(value = "CityCode",required = false,defaultValue = "0")String CityCode){
List<TAddressTown> allss = AddressService.findAllss(CityCode);
return allss;
}
}
templates包下的頁面 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<select id="bb">
<option value="0">請選擇</option>
</select>
<select id="cc">
<option value="0">請選擇</option>
</select>
<select id="dd">
<option value="0">請選擇</option>
</select>
</body>
<script>
//初始化加載省級信息
$(function () {
$.ajax({
url:"select",
type:"GET",
success:function (data) {
$.each(data,function () {
var option = $("<option value='"+this.code+"'>"+this.name+"</option>");
option.appendTo("#bb");
})
}
})
})
//當變動一級下拉框時 動態獲取一級provinceCode
$("#bb").change(function(){
var cc= $("#bb").find("option:selected").val();
if (cc!=0){
$("#cc").empty().append("<option value='0'>請選擇</option>");
$("#dd").empty().append("<option value='0'>請選擇</option>");
$.ajax({
url:"selects?provinceCode="+cc,
type:"GET",
success:function (result) {
$.each(result,function () {
var option = $("<option value='"+this.code+"'>"+this.name+"</option>");
option.appendTo("#cc");
})
}
})
}else{
$("#cc").empty();
$("#dd").empty();
var option = $("<option value='0'>請選擇</option>");
var option1 = $("<option value='0'>請選擇</option>");
option1.appendTo("#cc");
option.appendTo("#dd");
}
});
//當變動二級聯動時 將二級 CityCode傳 三級方法 查出 區級信息
$("#cc").change(function () {
var dd = $("#cc").find("option:selected").val();
if (dd!=0){
$("#dd").empty();
$.ajax({
url:"selectss?CityCode="+dd,
type:"GET",
success:function (result) {
$.each(result,function () {
var option = $("<option value='"+this.code+"'>"+this.name+"</option>");
option.appendTo("#dd");
})
}
})
}
})
</script>
</html>
下面是一個整合jpa的 yml配置文件 修改數據庫 用戶密碼即可
server:
port: 8081
spring:
devtools:
restart:
enabled: true
thymeleaf:
prefix: "classpath:/templates/"
suffix: ".html"
cache: false
datasource:
username: root
password: hzy
url: jdbc:mysql://localhost:3306/threep?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=Asia/Shanghai
driver-class-name: com.mysql.jdbc.Driver
mvc:
date-format: "yyyy-MM-dd"
#showSql
jpa:
show-sql: true
database: mysql
hibernate:
ddl-auto: update
naming:
implicit-strategy: org.hibernate.boot.model.naming.ImplicitNamingStrategyComponentPathImpl #默認的命名策略
physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl #駝峯命名
如有問題 發至郵箱 [email protected]
