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 {@AutowiredAddressRepository AddressRepository;@AutowiredCityRepository CityRepository;@AutowiredtownRepository 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 {@AutowiredAddressService AddressService;//通过 index 跳入 index.html页面@RequestMapping("/index")public String index(){return "index";}//加载省级@RequestMapping("/select")@ResponseBodypublic List<TAddressProvince> findAll(){List<TAddressProvince> all = AddressService.findAll();return all;}//加载市级@RequestMapping("/selects")@ResponseBodypublic List<TAddressCity> findAlls(@RequestParam(value = "provinceCode",required = false,defaultValue = "0")String  provinceCode){List<TAddressCity> alls = AddressService.findAlls(provinceCode);return alls;}//加载区级@RequestMapping("/selectss")@ResponseBodypublic 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: 8081spring:devtools:restart:enabled: truethymeleaf:prefix: "classpath:/templates/"suffix: ".html"cache: falsedatasource:username: rootpassword: hzyurl: jdbc:mysql://localhost:3306/threep?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=Asia/Shanghaidriver-class-name: com.mysql.jdbc.Drivermvc:date-format: "yyyy-MM-dd"#showSqljpa:show-sql: truedatabase: mysqlhibernate:ddl-auto: updatenaming:implicit-strategy: org.hibernate.boot.model.naming.ImplicitNamingStrategyComponentPathImpl #默认的命名策略physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl #驼峰命名

数据库下载连接

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

Spring boot整合jpa Jquery实现三级联动相关推荐

spring boot 系列之四：spring boot 整合JPA
上一篇我们讲了spring boot 整合JdbcTemplate来进行数据的持久化, 这篇我们来说下怎么通过spring boot 整合JPA来实现数据的持久化. 一.代码实现修改pom,引入依赖 ...
Spring Boot基础学习笔记07：Spring Boot整合JPA
文章目录零.学习目标 1.熟悉Spring Data JPA基本语法和使用 2.掌握Spring Boot与JPA的整合使用一.Spring Data JPA概述 1.Spring Data JP ...
Spring Boot整合Jpa多数据源
Spring Boot整合Jpa多数据源本文是Spring Boot整合数据持久化方案的最后一篇,主要和大伙来聊聊Spring Boot整合Jpa多数据源问题.在Spring Boot整合JbdcT ...
Spring Boot整合JPA和人大金仓（Kingbase8）数据库
Spring Boot整合JPA和人大金仓(Kingbase8)数据库简介在开发Java应用程序时,使用JPA(Java Persistence API)可以方便地进行数据库操作.而人大金仓(Ki ...
spring boot 整合 jpa
1.在pom.xml中添加mysql 和 jpa 依赖 <dependency><groupId>org.springframework.boot</groupId> ...
Spring boot 整合Jpa 配置文件参数
#数据库驱动 spring.datasource.driverClassName = com.mysql.jdbc.Driver #数据库连接地址 spring.datasource.url = jd ...
spring boot整合JPA实现多条件查询并分页
1.在DAO中的实现代码: public Page<User> findAdminUserPage(PageRequest pr, String name) {String sql = & ...
springboot整合hibernate_峰哥说技术系列-17 .Spring Boot 整合 Spring Data JPA
今日份主题 Spring Boot 整合 Spring Data JPA JPA(Java Persistence API)是用于对象持久化的 API,是Java EE 5.0 平台标准的 ORM 规 ...
Spring Boot 整合 Spring Data JPA
JPA 是一个基于 O/R 映射的 Java 持久化规范,其定义了一系列对象持久化的标准,目前实现这一规范的产品有 Hibernate.EclipseLink.OpenJPA.TopLink 等,这也 ...

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

Spring boot 整合jpa JQuery 实现省，市，区，三级联动效果

前端实现 JQuery

1.idea 创建Spring Initializr 项目

Spring boot整合jpa Jquery实现三级联动相关推荐

最新文章

热门文章

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

Spring boot 整合jpa JQuery 实现省，市，区， 三级联动效果

前端实现 JQuery

1.idea 创建Spring Initializr 项目

Spring boot整合jpa Jquery实现三级联动相关推荐

最新文章

热门文章

Spring boot 整合jpa JQuery 实现省，市，区，三级联动效果