SpringBoot+mybatisplus【省市区三级联动】

最新推荐文章于 2022-11-23 15:29:30 发布

很幸运482

最新推荐文章于 2022-11-23 15:29:30 发布

阅读量590

点赞数 1

文章标签： spring boot intellij-idea java

本文链接：https://blog.csdn.net/qq_62185920/article/details/127993639

版权

第一步：搭建项目

mybatis-plus包：

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.2</version>
</dependency>

第二步：编写application.yml文件

#指定端口号
server:
  port: 8080
#配置数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf-8&serverTimezone=UTC
    data-username: root
    data-password:
#配置模板引擎
  thymeleaf:
    mode: HTML5
    cache: false
    prefix: classpath:/templates/
    suffix: .html
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #开启日志
  global-config:
    banner: false #隐藏图标

第三步：pojo,dao,service,controller

pojo

dao

@Mapper
public interface ProvinceMapper {
    @Select("SELECT * FROM `t_address_province` ")
    List<Province> province();//查询省份
    @Select("SELECT *,b.name as name1,b.code as code1 FROM `t_address_province` a,`t_address_city` b where a.code=b.provincecode and b.provincecode=#{pid}")
    List<City>city(Integer id);//根据省份id查询城市
    @Select("SELECT *,a.name as name1 FROM `t_address_town` a,`t_address_city` b where a.citycode=b.`code`  and a.citycode=#{id}")
    List<Town>town(Integer id);//根据城市id查询区域
}

controller

@RestController
public class ProvinceController {

    @Autowired
    private ProvinceServiceImpl provinceService;

    @RequestMapping("getAllProvince")
    public List<Province> getAllProvince(){
        List<Province> province = provinceService.province();
        return province;
    }

    @RequestMapping("getAllCity")
    public List getAllCity(@RequestParam("pid")Integer pid){
        List<City> city = provinceService.city(pid);
        return city;
    }

    @RequestMapping("getAllTown")
    public List getAllTown(@RequestParam("id") Integer pid){
        List<Town> town = provinceService.town(pid);
        return town;
    }

    @RequestMapping("toIndex")
    @ResponseBody
    public ModelAndView toIndex(ModelAndView model){
        model.setViewName("index");
        return model;
    }

    @RequestMapping("/{page}.html")
    public ModelAndView toPage(@PathVariable("page") String page,ModelAndView model){
        model.setViewName("page");
        return model;
    }
}

前台页面展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<script src="/jquery-3.3.1.min.js"></script>
<body>
<form action="">
    <select class="a"></select>
    <select class="b"></select>
    <select class="c"></select>
</form>

<script>
    $(function () {
        $.getJSON('http://localhost:8080/getAllProvince', '', function(data) {
            console.log(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();
            $.getJSON('http://localhost:8080/getAllCity', '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].code1+">"+ data[a].name1 + "</option>";
                    $(".b").append(b);
                }
            });
        });
        $(".b").blur(function() {
            var c = $(this).val();
            $.getJSON('http://localhost:8080/getAllTown', 'id=' + 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>

jquery文件存放路径很重要的，不能轻视

效果展示