省市区三级联动功能实现(前端+后端)

一.后端部分

1.建表存放省市区三级数据

DROP TABLE IF EXISTS `ldaddress`;CREATE TABLE `ldaddress`  (                              `PLACETYPE` varchar(2) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '地域类型 ',                              `PLACECODE` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '地域代码 ',                              `PLACENAME` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '地域名称 ',                              `UPPLACENAME` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '上级地域代码 ',                              `ZIPCODE` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '邮编',                              PRIMARY KEY (`PLACETYPE`, `PLACECODE`) USING BTREE) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Compact;

2.插入省市区数据

其中,placetype表示省市区标记,分别用01,02,03表示.

placecode表示省市区编码

upplacename表示市区上一级的编码

3.建立三个类存放查出来的市区级数据

1)存放基本信息的类EnumVO

@Datapublic class EnumVO {    private String name;    private String type;}

2)存放区县数据的类CountryVO

@Datapublic class CountryVO {    private String type;    private String name;    private List countryArr;}

其中,countryArr集合存放的就是查询出来的一个个区县,type和name分别存放某一个市的信息

3)存放市级数据的类CityVO

@Datapublic class CityVO {    private String type;    private String name;    private List cityArr;}

原理同上

4.开始全量查询省市区三级信息

1)Mapper层

                                                    select                from ld_address        where        PLACETYPE = #{placeType}                select                from ld_address        where PLACETYPE = #{placeType}        and UPPLACENAME = #{placeCode}    

2)调用mapper查询省市区数据

public List getAddress(){        List provinceArr = new ArrayList();        // 先查询出省        List provinces = ldAddressMapper.getByPlaceType("01");        for (LdAddress province : provinces) {            // 根据省查询市的信息            List cities = ldAddressMapper.getByPrimaryKey("02", province.getPlaceCode());            CityVO cityVO = new CityVO();            List countryVOS = new ArrayList();            for (LdAddress city : cities) {                List countries = ldAddressMapper.getByPrimaryKey("03", city.getPlaceCode());                CountryVO countryVO = new CountryVO();                List enumVOS = new ArrayList();                // 一个市对应的多少个区countryArr集合                for (LdAddress country : countries) {                    EnumVO enumVO = new EnumVO();                    enumVO.setType(country.getPlaceCode());                    enumVO.setName(country.getPlaceName());                    enumVOS.add(enumVO);                }                countryVO.setCountryArr(enumVOS);                countryVO.setType(city.getPlaceCode());                countryVO.setName(city.getPlaceName());                countryVOS.add(countryVO);            }            cityVO.setCityArr(countryVOS);            cityVO.setType(province.getPlaceCode());            cityVO.setName(province.getPlaceName());            provinceArr.add(cityVO);        }        return provinceArr;    }

5.Controller层返回查询到的数据

@RestController@RequestMapping("code")public class CodeController {    @Autowired    private CodeService codeService;    /**     * 获取枚举值     */    @GetMapping("getEnums")    public JsonResult getEnums(){        return JsonResult.ok(codeService.getAddress());    }}

二.前端部分

1.使用vue框架以及ElementUI建立一个下拉框

                                                                                                                                                                -                                                                                                                                                                -                                                                                                                                                            

该下拉框包含在表单中,表单部分不赘述.

2.写javaScript语句

1)获取后端传值

getCode() {            let url = "http://localhost:8888/code/getEnums";            this.axios.get(url).then(response => {                let codeVO = response.data.data;                this.provinceArr = codeVO.provinceArr;            })        },

我是封装在了codeVO里面传递给前端的,所以我接受数据的时候使用了相同的名字;

后端端口我修改成了8888,不修改的话是8080

2)前端获得数据之后开始循环

provinceChange(that) {            let provinceCode = that;            for (let i = 0; i  
 方法中的参数that就是用户点击了下拉框以后返回的值,直接取来用就行
 
三.实现三级联动
 
1)效果图
  
 2)选择省
  
3)根据省选择市
  
4)根据市选择区县