第一步:创建一个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