简单的三级联动

通过spring data jpa+JQuery实现省、市、县三级联动

一 首先了解数据库

分为三张表,分别存储省、市、县的信息,且每张表通过属性code进行相连。

数据表链接：
https://www.jb51.net/article/49540.htm

二 使用springdatajpa编写后端代码

我的项目结构如下:

maven自行添加。

yml配置：

server:
  port: 8080
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/city?useUnicode=true&characterEncoding=utf-8&useSSL=false
    username: root
    password: xxx
    type: com.alibaba.druid.pool.DruidDataSource
  jpa:
    hibernate:
      ddl-auto: update #自动更新
    show-sql: true
    database: mysql
  resources:
      static-locations: classpath:/

实体层

package com.dy.city.pojo;

import lombok.Data;

import javax.persistence.*;
import java.io.Serializable;

@Data
@Entity
@Table(name = "city")
public class City  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 com.dy.city.pojo;
import lombok.Data;

import javax.persistence.*;
import java.io.Serializable;

@Data
@Entity
@Table(name = "province")
public class Province  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 com.dy.city.pojo;

import lombok.Data;

import javax.persistence.*;
import java.io.Serializable;

@Data
@Entity
@Table(name = "town")
public class Town  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层,创建三个Repository接口并继承Jpa

@Repository
public interface ProvinceRepository extends JpaRepository<Province,Integer> {
 //该处不需要自定义方法
}
@Repository
public interface CityRepository extends JpaRepository<City,Integer> {
//根据provincecode获取到city集合
   public List<City> findByProvincecode(String provincecode);
}

@Repository
public interface TownRepository extends JpaRepository<Town,Integer> {
//根据citycode获取到Town集合
   public List<Town> findByCitycode(String citycode);
}

Service 层

package com.dy.city.service;

import com.dy.city.dao.CityRepository;
import com.dy.city.dao.ProvinceRepository;
import com.dy.city.dao.TownRepository;
import com.dy.city.pojo.City;
import com.dy.city.pojo.Province;
import com.dy.city.pojo.Town;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service("linkService")
public class linkService {
    @Autowired
    CityRepository cityRepository;
    @Autowired
    ProvinceRepository provinceRepository;
    @Autowired
    TownRepository townRepository;
   //返回Province集合
    public List<Province> getProvince(){
       return provinceRepository.findAll();
    }

    //返回City集合
    public List<City> getCity(String provinceCode){
        List<City> cityList = cityRepository.findByProvincecode(provinceCode);
       return cityList;
    }
    //返回Town集合
    public List<Town> getTown(String cityCode) {
        List<Town> townList = townRepository.findByCitycode(cityCode);
        return  townList;
    }
}

Controller层

package com.dy.city.controller;

import com.dy.city.pojo.City;
import com.dy.city.pojo.Province;
import com.dy.city.pojo.Town;
import com.dy.city.service.linkService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class linkController {
    @Autowired
    linkService linkService;

    //返回Province集合
    @GetMapping("/getProvince")
    public List<Province> getProvince(){
        return linkService.getProvince();
    }

    //返回City集合
    @GetMapping("/getCity/{provincecode}")
    public List<City> getCity(@PathVariable String provincecode){
        return linkService.getCity(provincecode);
    }
    //返回Town集合
    @GetMapping("/getTown/{citycode}")
    public List<Town> getTown(@PathVariable String citycode) {
        return linkService.getTown(citycode);
    }
}

三 通过JQuery实现前端

在项目结构中resources\templates\下创建index.html页面

页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
   籍贯:<select id="province">
    </select>
    <select  id="city">
    </select>
    <select  id="town">
    </select>
</div>
</body>
<script src="../js/jquery-1.8.3.js"></script>
<script>
    $(function() {
       //初始化省市县
        init();
        //二级联动
        $("#province").change(function() {
            var provinceCode = $("#province").val();
            getCity(provinceCode);

        });
        //三级联动
        $("#city").change(function() {
            var cityCode = $("#city").val();
            getArea(cityCode)
        });
        //初始化方法
        function init() {
            var firstProvCode;
            $.ajax({
                url: "/getProvince",
                dataType: "json",
                success: function (data) {
                    var str="";
                    for(var i=0;i<data.length;i++){
                        str += "<option value='" + data[i].code + "'>" + data[i].name + "</option>";
                    }
                    $("#province").append(str);
                    // 获取第一个省份的code
                    firstProvCode = data[0].code;
                    // 根据第一个省份code获取对应城市列表
                    getCity(firstProvCode);
                }
            });
        }
        //二级联动
      function getCity(ProvCode) {
          var firstCityCode;
          $.ajax({
              url: "/getCity/"+ProvCode+"",
              dataType: "json",
              success: function (data) {
                  $("#city").empty();
                  var str="";
                  for(var i=0;i<data.length;i++){
                      str += "<option value='" + data[i].code + "'>" + data[i].name + "</option>";
                  }
                  $("#city").append(str);
                  // 获取第一个城市的code
                  firstCityCode = data[0].code;
                  // 根据第一个城市code获取对应区县列表
                  getArea(firstCityCode);
              }
          });
      }
      //三级联动
        function getArea(CityCode) {
            $.ajax({
                url: "/getTown/"+CityCode+"",
                dataType: "json",
                success: function (data) {
                    $("#town").empty();
                    var str="";
                    for(var i=0;i<data.length;i++){
                        str += "<option value='" + data[i].code + "'>" + data[i].name + "</option>";
                    }
                    $("#town").append(str);
                }
            });
        }
    });
</script>
</html>

四 实现效果

效果图如下:

到此，简单的三级联动就完成了！