springboot+mybatisplus【省市区三级联动】_很幸运482的博客-爱代码爱编程
第一步:搭建项目
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文件存放路径很重要的,不能轻视
效果展示