SpringBoot + thymeleaf 实现省市区三级联动

一、什么是省市区联动?

在收货地址的录入，考试考区的选择…等场景中都会用到省市区三级联动，即:页面加载后，向后端请求省份数据，用户选择省份后，向后端请求该省份的市级信息，当用户选择市级后，向后端请求该市下的所有区县信息，我们把这个过程称为省市区三级联动。

二、sql建表语句

三、创建boot项目

        1.选择依赖 

2.修改配置文件(yml格式)

logging:
  level:
    com.liwei.account.mapper: DEBUG

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/three?serverTimezone=UTC
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver



server:
  port: 8181

mybatis:
  configuration:
    map-underscore-to-camel-case: true
#config-location:  classpath:mybatis-config.xml
  #标注mybatis配置文件的位置
  #标注待解析的mapper的xml文件位置
  mapper-locations: classpath:mapper/*.xml
  #标注实体类位置
  type-aliases-package: com.liwei.entity

 3.创建相对应的包(mapper、service、serviceImpl、pojo、controller ....)

4.创建实体类

  4.1省级实体类

@Data
public class Province {
    private int id;

    private int code;

    private String name;
}

    4.2市级实体类

@Data
public class City {
    private int id;

    private int code;

    private String name;

    private int provinceCode;

    private Province p;
}

   4.3区级实体类

@Data
public class Town {
    private int id;

    private int code;

    private String name;

    private int cityCode;

    private City city;
}

5.创建数据层

@Mapper
public interface ProMapper {

        //查询所有省份
        List<Province> findall();
        //根据省份code查找市级
        List<City> findallBypid(int pcode);
        //根据市级code查找区
        List<Town>  findallBycid(int ccode);

}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--
      myBaits面向接口编程两个一致性
      1.映射文件namespace要和mapper接口全类名保持一致
     2.映射文件中sql语句中id要和mapper接口中方法一致
-->
<mapper namespace="com.liwei.mapper.ProMapper">
    <resultMap type="com.liwei.entity.City" id="pp">
        <id column="id" property="id" />
        <result column="code" property="code" />
        <result column="name" property="name" />
        <result column="provinceCode" property="provinceCode" />
        <association property="p" javaType="com.liwei.entity.Province">
            <id column="id" property="id" />
            <result column="code" property="code" />
            <result column="name" property="name" />
        </association>
    </resultMap>
    <resultMap type="com.liwei.entity.Town" id="t">
        <id column="id" property="id" />
        <result column="code" property="code" />
        <result column="name" property="name" />
        <result column="cityCode" property="cityCode" />
        <association property="city" javaType="com.liwei.entity.City">
            <id column="id" property="id" />
            <result column="code" property="code" />
            <result column="name" property="name" />
            <result column="provinceCode" property="provinceCode" />
        </association>
    </resultMap>
    <select id="findall" resultType="com.liwei.entity.Province">
        select * from t_address_province
    </select>
    <select id="findallBypid" resultMap="pp">
         SELECT * from t_address_city cc JOIN t_address_province p on p.`code`=cc.provinceCode where cc.provinceCode=#{pid}
    </select>
    <select id="findallBycid" resultMap="t">
         SELECT * from t_address_town t JOIN t_address_city cc on t.cityCode =cc.`code`	where t.cityCode=#{cid}
    </select>

</mapper>

6.编辑业务层

public interface ProService {
    //查询所有省份
    List<Province> findall();
    //根据省份code查找市级
    List<City> findallBypid(int pcode);
    //根据市级code查找区
    List<Town>  findallBycid(int ccode);
}

@Service
public class ProServiceImpl implements ProService {

    @Autowired
    private ProMapper proMapper;

    @Override
    public List<Province> findall() {
        return proMapper.findall();
    }

    @Override
    public List<City> findallBypid(int pcode) {
        return proMapper.findallBypid(pcode);
    }

    @Override
    public List<Town> findallBycid(int ccode) {
        return proMapper.findallBycid(ccode);
    }
}

7.编写controller控制层

@Controller
@RequestMapping("/demo")
public class proViceController {



        @Autowired
        private ProService proService;



        @GetMapping
        public String home(Model model){
            List<Province> province = proService.findall();
            model.addAttribute("province",province);
            return "index";
        }


        @GetMapping("province")
        @ResponseBody
        public List<City> province(Integer id){
            List<City> TAddressCity = proService.findallBypid(id);
            return TAddressCity;
        }

        @GetMapping("city")
        @ResponseBody
        public List<Town> city(Integer id){
            List<Town> TAddressTown = proService.findallBycid(id);
            return TAddressTown;
        }
    }

8.编写前端thymeleaf页面 index.html

                                

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
<form>
    <select name="cid" id="province">
        <option value="0">请选择省</option>
        <option
                th:each="pro:${province}"
                th:value="${pro.code}"
                th:text="${pro.name}">
        </option>
    </select>
    <select id="city">
        <option value="0">请选择市</option>
    </select>
    <select id="town">
        <option value="0">请选择区</option>
    </select>
</form>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $("#province").bind("change", function () {
        $('#city option').not('option:first').remove();
        $('#town option').not('option:first').remove();
        // $("#select").empty();
        var id = $("#province option:selected").val();
        $.ajax({
            type: 'get',
            url: '/demo/province?id='+id,
            dataType:'json',
            success: function (data) {
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    $("#city").append("<option value="+data[i].code+">"+data[i].name+"</option>");
                }
            }
        })
    });


    $("#city").bind("change", function () {
        var id = $("#city option:selected").val();
        $.ajax({
            type: 'get',
            url: '/demo/city?id='+id,
            dataType:'json',
            success: function (data) {
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    $("#town").append("<option value="+data[i].code+">"+data[i].name+"</option>");
                }
            }
        })
    });
</script>
</html>

这里注意一点，我们每次发送异步请求的时候，一定要将option中的数据清除，不然会出现叠加数据...

方式一:

$('#city option').not('option:first').remove();

方式二:

$("#select").empty();

8.启动访问 http://localhost:8181/demo