Spring boot整合jpa Jquery实现三级联动

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 #驼峰命名

数据库下载连接

如有问题 发至邮箱 2010944641@qq.com

• 点赞
• 收藏
• 分享
• 文章举报