SpringBoot+MyBatisPlus+vue 城市三级联动

首先导入我们需要的省，市，区，三张表的数据

表SQL: link

一，实体类（pojo）

省级实体表

//省表
@Data
public class T_address_province {
    private  int id;
    private String code;
    private String name;
}

市级实体表

//市表
@Data
public class T_address_city {
    private  int id ;
    private  String code;
    private  String name;
    private String  provincecode; //城市编码
}

区级实体表

import lombok.Data;
//区表
@Data
public class T_address_town {
    private int id;
    private String code;
    private String name;
    private String citycode;
}

二，数据访问层（DAO）

省份

@Mapper
public interface T_address_provinceDao extends BaseMapper<T_address_province> {
    //查询所有省份
    @Select("SELECT * FROM T_address_province ")
    public List<T_address_province> findall();
    //根据省份code查找市级
    @Select("SELECT * FROM t_address_city where code=#{code}")
    public List<T_address_city> findallBypid(String pcode);
    //根据市级code查找区
    @Select("SELECT * FROM t_address_town where code=#{code}")
    public List<T_address_town> findallBycid(String ccode);
}

市级

@Mapper
public interface T_address_cityDao extends BaseMapper<T_address_city> {
}

区级

@Mapper
public interface T_address_townDao extends BaseMapper<T_address_town> {
}

三，服务层(Service层)

省份

public interface T_address_provinceService extends IService<T_address_province> {
    //查询所有省份
    public List<T_address_province> findall();
    //根据省份code查找市级
    @Select("SELECT * FROM t_address_city where provincecode=#{provincecode}")
    public List<T_address_city> findallBypid(String pcode);
    //根据市级code查找区
    @Select("SELECT * FROM t_address_town where citycode=#{citycode}")
    public List<T_address_town> findallBycid(String ccode);
}

市级

public interface T_address_cityService extends IService<T_address_city> {
}

区级

public interface T_address_townSercvice extends IService<T_address_town> {
}

四，实现类（ServiceImpl）

省份

@Service
public class T_address_provinceServiceImpl extends ServiceImpl<T_address_provinceDao,T_address_province> implements T_address_provinceService {
    @Autowired
    private T_address_provinceDao t_address_provinceDao;

    @Override
    public List<T_address_province> findall() {
        return t_address_provinceDao.findall();
    }

    @Override
    public List<T_address_city> findallBypid(String pcode) {
        return t_address_provinceDao.findallBypid(pcode);
    }

    @Override
    public List<T_address_town> findallBycid(String ccode) {
        return t_address_provinceDao.findallBycid(ccode);
    }
}

市级

@Service
public class T_address_cityServiceImpl extends ServiceImpl<T_address_cityDao, T_address_city> implements T_address_cityService {
}

区级

@Service
public class T_address_townSercviceImpl  extends ServiceImpl<T_address_townDao, T_address_town> implements T_address_townSercvice {
}

五，控制层(controller)

应该写在实现类里，这里不太规范

@CrossOrigin
@RestController
@RequestMapping("/admins")
public class T_address_provinceController {

    @Autowired
    private T_address_provinceService t_address_provinceService;
   @Autowired
   private T_address_cityService t_address_cityService;
   @Autowired
   private T_address_townSercvice t_address_townSercvice;
   
    @GetMapping("findall")
    public List<T_address_province> findall(){
        List<T_address_province> list=t_address_provinceService.findall();
        for (T_address_province t_address_province : list) {
            System.out.println(t_address_province);
        }
        return list;
    }

    @GetMapping("findbypid")
    public List<T_address_city> findBypid(String name){
        LambdaQueryWrapper<T_address_city> queryWrapper2=new LambdaQueryWrapper<>();
        queryWrapper2.eq(T_address_city::getProvincecode,name);
        List<T_address_city> list = t_address_cityService.list(queryWrapper2);
        return list;
    }

    @GetMapping("findbycid")
    public List<T_address_town> findBycid(String name){
        LambdaQueryWrapper<T_address_town> queryWrapper3=new LambdaQueryWrapper<>();
        queryWrapper3.eq(T_address_town::getCitycode,name);
        List<T_address_town> list1 = t_address_townSercvice.list(queryWrapper3);
        return list1;
    }
}

六，前端代码（HTML）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">

  <!--表单-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">

    <el-form-item  label="省">
      <el-select @change="list1(formInline.sf)" v-model="formInline.sf">
        <el-option
                v-for= "list in Listsf "
                :key="list.name"
                :value="list.code"
                :label="list.name"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="市">
      <el-select @change="list2(formInline.sj)" v-model="formInline.sj">
        <el-option v-for="list2 in Listsj"
                   :key="list2.name"
                   :value="list2.code"
                   :label="list2.name"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="区">
      <el-select @change="list2(formInline.sq)" v-model="formInline.sq" >
        <el-option v-for="list2 in Listsq"
                   :key="list2.name"
                   :value="list2.code"
                   :label="list2.name"/>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary">查询</el-button>
    </el-form-item>
  </el-form>
      </el-table-column>
    </el-table>
  </template>



</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="axios/axios.min.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"/>
<script>
  new Vue({
    el:"#app",
    data() {
    
      return {
        Listsf:[],
        Listsj:[],
        Listsq:[],
        
        //查询的条件
        formInline: {
          sf: '',
          sj: '',
          sq:'',
        },
        
        //设置对话框的 :visible.sync 属性 达到点击新增弹出对话框的效果
        addDialogVisible: false,
        updateDialogVisible: false,

      }
    },

    created(){  //钩子函数  意
      this.getOptions();
    },

    methods:{
      //获取下拉框中内容
      getOptions(){
        var _this = this
        axios({
          methods: "get",
          url:"http://localhost:/admins/findall",
        }).then(function (resp){
          console.log(resp.data);
          _this.Listsf=resp.data
        })
      },

      list1(name){
        var _this = this
        axios({
          methods: "get",
          url:"http://localhost:/admins/findbypid",
          params:{
            name:name
          }
        }).then(function (resp){
          _this.Listsj=resp.data
        })
      },
      
      list2(name){
        var _this = this
        axios({
          methods: "get",
          url:"http://localhost:/admins/findbycid",
          params:{
            name:name
          }
        }).then(function (resp){
          _this.Listsq=resp.data
        })
      }, 
    }
   })

</script>
</body>
</html>

七，最后运行项目就可以辣！

（新手上路，代码有点不规范，请包涵😀）