springBoot加Mp加vue实现三级联动

dxjzs

已于 2022-11-24 12:26:05 修改

阅读量402

点赞数

文章标签： vue.js spring boot javascript

于 2022-11-23 11:11:21 首次发布

本文链接：https://blog.csdn.net/m0_66143538/article/details/127996520

版权

首先创建一个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='区县信息表';