springboot+mybatis+thymleft做省份的三级联动

第一步：创建一个SpringBoot项目

第二步导入pom依赖和配置application.yml文件

// 导入maven依赖
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                    <include>**/*.properties</include>
                </includes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*</include>
                </includes>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

// application.yml配置文件
server:
  port: 8081

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/club?serverTimezone=Asia/Shanghai
    username: root
    password: 123456

  thymeleaf:
    mode: HTML5
    cache: false
    suffix: .html
    prefix: classpath:/templates/
  main:
    allow-bean-definition-overriding: true
mybatis:
  mapper-locations: classpath:/mapper/*.xml
  type-aliases-package: com.example.springbootdemo2.entity

logging:
  level:
    com.example.springbootdemo2.mapper: trace

第三步 SpringBoot 项目架构

实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class City {

    private int id;

    private int code;

    private String name;

    private int provinceCode;

    private Province p;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Province {
    private Integer id;
    private String code;
    private String name;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Town {
 private int id;

 private int code;

 private String name;

 private int cityCode;

 private City city;
}

创建Mapper接口和Mappe.xml

@Mapper
public interface ProvinceMapper {

 //查询所有省份
 public List<Province> findall();
 //根据省份code查找市级
 public List<City> findallBypid(int pcode);
 //根据市级code查找区
 public 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">
<!--namespace=绑定一个对应的Dao/Mapper接口-->
<mapper namespace="com.cskt.springbootdemo3.mapper.ProvinceMapper">

    <resultMap type="com.cskt.springbootdemo3.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.cskt.springbootdemo3.entity.Province">
            <id column="id" property="id" />
            <result column="code" property="code" />
            <result column="name" property="name" />
        </association>
    </resultMap>
    <resultMap type="com.cskt.springbootdemo3.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.cskt.springbootdemo3.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.cskt.springbootdemo3.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>

Service层 和ServiceImpl实现层

public interface ProvinceService {

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

@Service
public class ProvinceServiceImpl implements ProvinceService{
    @Autowired
    private ProvinceMapper provinceMapper;

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

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

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

Controller层

@RestController
public class procontroller {
    @Autowired
    private ProvinceServiceImpl provinceService;
    @GetMapping("findall")
    public List<Province> findall(){
        List<Province> list=provinceService.findall();
        return list;
    }

    @GetMapping("findbypid")
    public List<City> findBypid(@RequestParam("pid") Integer pcode){
        List<City> list=provinceService.findallBypid(pcode);
        return list;
    }

    @GetMapping("findbycid")
    public List<Town> findBycid(@RequestParam("cid") Integer ccode){
        List<Town> list=provinceService.findallBycid(ccode);
        return list;
    }

}

第四步 thymleft页面

index界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
<form action="">
    <select class="a"></select>
    <select class="b"></select>
    <select class="c"></select>
</form>
<script src="/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $.getJSON('http://localhost:8081/findall', '', function(data) {
            for ( var a = 0; a < data.length; a++) {
                var b = "<option value="+data[a].code+">" + data[a].name+ "</option>";
                $(".a").append(b);
            };
        });
        $(".a").blur(function() {
            var z = $(this).val();
            alert(z)
            $.getJSON('http://localhost:8081/findbypid', 'pid=' + z, function(data) {
                console.log(data)
                $(".b").children().remove();
                $(".c").children().remove();
                for ( var a = 0; a < data.length; a++) {
                    var b = "<option value="+data[a].code+">"+ data[a].name + "</option>";
                    $(".b").append(b);
                }
            });
        });
        $(".b").blur(function() {
            var c = $(this).val();
            $.getJSON('http://localhost:8081/findbycid', 'cid=' + c, function(data) {
                console.log(data)
                $(".c").children().remove();
                for ( var a = 0; a < data.length; a++) {
                    var city = "<option value="+data[a].code+">"+ data[a].name + "</option>";
                    $(".c").append(city);
                }
            });
        });
    })
</script>
</body>
</html>

数据库链接(https://www.ssfiction.com/sqljc/616147.html)
如有疑问请联系QQ：1904523251@qq.com