当前位置：首页 > 知识库 > 正文内容

SpringBoot + thymeleaf 实现省市区三级联动保姆级教程

51税知网1年前 (2022-11-23)知识库81

一、什么是省市区联动?

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

二、sql建表语句

数据库技术:省市县三级联动的SQL语句()

三、创建boot项目 1.选择依赖

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

server:
  port: 80
  servlet:
    encoding:
      charset: UTF-8
      enabled: true
      force: true
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/province
    username: root
    password: root
  thymeleaf:
    cache: false
  main:
    allow-circular-references: true
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countsql

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

4.创建实体类

4.1省级实体类

@Data
public class TAddressProvince {
  private long id;
  private String code;
  private String name;
}

4.2市级实体类

@Data
public class TAddressCity {
  private long id;
  private String code;
  private String name;
  private String provincecode;
}

4.3区级实体类

@Data
public class TAddressTown {
  private long id;
  private String code;
  private String name;
  private String citycode;
}

5.创建数据层

5.1省级Mapper

public interface TAddressProvinceMapper {
    @Select("SELECT * FROM `t_address_province`")
    List getAll();
}

5.2市级Mapper

public interface TAddressCityMapper {
    @Select("SELECT * FROM `t_address_city` where provincecode = #{code}")
    List getByCode(String code);
}

5.3区级Mapper

public interface TAddressTownMapper {
    @Select("SELECT * FROM `t_address_town` where citycode = #{code}")
    List getByCode(String code);
}

6.修改启动类

@SpringBootApplication
@MapperScan(basePackages = "com.gitkeki.mapper")
public class ProvinceApplication {
    public static void main(String[] args) {
        SpringApplication.run(ProvinceApplication.class, args);
    }
}

7.编辑业务层

7.1省级service

public interface TAddressProvinceService {
    List getAll();
}

7.2省级serviceImpl

public class TAddressProvinceServiceImpl implements TAddressProvinceService {
    
    @Autowired
    private TAddressProvinceMapper provinceMapper;
        
    List getAll(){
        return provinceMapper.getAll();
    }
}

7.3市级service

public interface TAddressCityService {
    List getByCode(String code);
}

7.4市级serviceImpl

public class TAddressCityServiceImpl implements TAddressCityService{
    
    @Autowired
    private TAddressCityMapper cityMapper;
        
    List getByCode(String code){
        return cityMapper.getByCode(code);
    }
}

7.5区级service

public interface TAddressTownService {
    List getByCode(String code);
}

7.6区级serviceImpl

public class TAddressTownServiceImpl implements TAddressTownService{
    
    @Autowired
    private TAddressTownMapper townMapper;
        
     List getByCode(String code){
        return townMapper.getByCode(code);
    }
}

7.编写controller控制层

@Controller
@RequestMapping("/demo")
public class AppController {
    
    @Autowired
    private TAddressProvinceService tAddressProvinceService;
    @Autowired
    private TAddressCityService tAddressCityService;
    @Autowired
    private TAddressTownService tAddressTownService;
    
    @GetMapping
    public String home(Model model){
        List province = tAddressProvinceService.getAll();
        model.addAttribute("province",province);
        return "index";
    }
    @GetMapping("province")
    @ResponseBody
    public List province(String id){
        List TAddressCity = tAddressCityService.getByCode(id);
        return TAddressCity;
    }
    @GetMapping("city")
    @ResponseBody
    public List city(String id){
        List TAddressTown = tAddressTownService.getByCode(id);
        return TAddressTown;
    }
}

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