springBoot加Mp加vue实现三级联动

首先创建一个springboot工程,导入相关依赖，导入element-ui组件

设置值发生修改会触发的事件，@change，方法在vue对象中，

在组件el-option中通过v-for去循环遍历

item 是循环的变量  provinceList是通过异步方式请求获取的数据

code和name是对象中的属性值，显示的是name，值为code

选中一个该下拉框下的值，这个值他会赋给el-select中的模型对象name，

这个name值就是该省份的code值，，然后将name作为参数传入值方式修改时会触发的方法中，方法通过传入过去的code去作为条件查询

<div id="app">
    <template>
        <el-select v-model="name"  placeholder="请选择省份" @change="getCityList(name)">
            <el-option
                    v-for="item in provinceList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
            </el-option>
        </el-select>
    </template>
    <template>
        <el-select v-model="cityName"  placeholder="请选择城市" @change="getTownList(cityName)">
            <el-option
                    v-for="item in cityList"
                    :key="item.code"
                    :label="item.cityName"
                    :value="item.code">
            </el-option>
        </el-select>
    </template>
    <template>
        <el-select v-model="townName" placeholder="请选择区县">
            <el-option
                    v-for="item in townList"
                    :key="item.code"
                    :label="item.townName"
                    :value="item.code">
            </el-option>
        </el-select>
    </template>
</div>

页面效果：

然后在后面导入js，

<script src="../statics/axios/axios.min.js"></script>
<script src="../statics/vue/vue.js"></script>
<script src="../statics/element-ui/index.js"></script>
<script src="../statics/api/request.js"></script>

创建vue对象，created() 在钩子函数中，也就是页面加载时，发送了一个异步请求，去拿到所有的省份数据，通过回调函数赋给省份数据的模型对象，页面通过模型对象去循环遍历'

然后methods中创建两个方法，getProvinceList（）是修改省份去查询对应的城市数据

getTownList() 是修改城市去查询对应的区县数据

然后就通过回调函数赋给对象模型，页面去循环遍历显示

在更换省份时，查询城市数据之前，将城市和区县的下拉框的内容清空

<script>
    new Vue({
        el:"#app",
        data() {
            return{
                //省份数据
                provinceList:[],
                //城市数据
                cityList:[],
                //区县数据
                townList:[],
                //省份下拉框模型对象
                name:'',
                //城市下拉框模型对象
                cityName:'',
                //区县下拉框模型对象
                townName:''
            }
        },
        created(){
         $axios({
              url:"/province/provinceList",
              method:"get"
          }).then(res=>{
            this.provinceList=res;
         });

        },
        methods:{
           getCityList(code){
               //清空市级和区县的下拉框中内容
               this.cityName='';
               this.townName='';
               //接收省级的code作为条件去查，拿到数据，将数据给城市变量
               $axios({
                   url:"/province/cityList?code="+code,
                   method: 'get',
               }).then(res=>{
                   this.cityList=res;
               })
           },
           getTownList(code){
               //接收城市的code作为条件去查，拿到数据，将数据给区县变量
               $axios({
                   url:"/province/townList?code="+code,
                   method: 'get',
               }).then(res=>{
                   this.townList=res;
               })
           }
        }
    })
</script>

目录

后端

---

后端

provinceList是页面加载时查询所有的省份数据，将数据返回给前端

cityList以省份的code作为条件查询城市表，有多个城市所以用list接收，然后返回

townList就是以城市的code作为条件查询区县表，与查询城市一样，查询后返回

    @GetMapping("/provinceList")
    @ResponseBody
    public List<Province> provinceList(){
       return provinceService.list();
    }

    @GetMapping("/cityList")
    @ResponseBody
    public List<City> cityList(String code){
        LambdaQueryWrapper<City> queryWrapper=new LambdaQueryWrapper<>();
        queryWrapper.eq(code!=null,City::getProvincecode,code);
        return cityService.list(queryWrapper);
    }
    @GetMapping("/townList")
    @ResponseBody
    public List<Town> townList(String code){
        LambdaQueryWrapper<Town> queryWrapper=new LambdaQueryWrapper<>();
        queryWrapper.eq(code!=null,Town::getCitycode,code);
        return townService.list(queryWrapper);
    }

因为我是通过maven去搭建的springboot项目，所以我资源目录都是加载不到的，要通过一个配置类进行开启，如果加载得到就不需要加这个配置类

@Slf4j
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/statics/**").addResourceLocations("classpath:/statics/");
    }
}

项目结构 

 yml配置文件

#配置端口
server:
  port: 8080
#配置数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/sjldzy?characterEncoding=GBK&serverTimezone=UTC
    username: root
    password: root
#    模版配置
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
mybatis-plus:
#  开启运行日期
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
#开启实体类别名扫描
  type-aliases-package: com.hk.entity
# 给表加入前缀
  global-config:
    db-config:
      table-prefix: t_address_

数据库：因为数据库有前缀，所以在mybatisplus中配置一下

 省份表：

CREATE TABLE `t_address_province` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `code` char(6) NOT NULL COMMENT '省份编码',
  `name` varchar(40) NOT NULL COMMENT '省份名称',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8 COMMENT='省份信息表';

城市表：

CREATE TABLE `t_address_city` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `code` char(6) NOT NULL COMMENT '城市编码',
  `name` varchar(40) NOT NULL COMMENT '城市名称',
  `provincecode` char(6) NOT NULL COMMENT '所属省份编码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=346 DEFAULT CHARSET=utf8 COMMENT='城市信息表';

区县表：

CREATE TABLE `t_address_town` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `code` char(6) NOT NULL COMMENT '区县编码',
  `name` varchar(40) NOT NULL COMMENT '区县名称',
  `citycode` char(6) NOT NULL COMMENT '所属城市编码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3145 DEFAULT CHARSET=utf8 COMMENT='区县信息表';