spring boot +vue 实现三级联动

基于vue三级联动下拉框

<template>
  <div id='addAddress'>
    <div class="content">
        <span class="title">省span>
        <select v-model="selectedProvince" @change='getCity(selectedProvince)'>
          <option value="0">-- 请选择 --option>
          <option :value="province" v-for='(province,index) in regin' :key='index'>{{province.name}}option>
        select>
        <span class="title">市span>
        <select v-model="selectedCity" @change='getCountry(selectedCity)'>
          <option value="0">-- 请选择 --option>
          <option :value="city" v-for='(city,index) in cityList' :key='index'>{{city.name}}option>
        select>
        <span class="title">县span>
        <select v-model="selectedCountry" @change='getChild(selectedCountry)'>
          <option value="0">-- 请选择 --option>
          <option :value="country" v-for='(country,index) in countryList' :key='index'>{{country.name}}option>
        select>
      div>
    <div class="border">div>
  div>
template>
<script>
  const axios = require('axios')
  export default{
    name:'addAddress',
    data(){
      return{
        value:true,  //是否设置为默认
        regin:[{
          base_areaid:1,
          name: '北京市',
          nodes: [{
            base_areaid: 7180682,
            name: '北京市',
            nodes:[{
              base_areaid: 3,
              name: '京城区'
            }]
          }]
        }],  //省市县三级的json
        selectedProvince:0,  //选中的省份
        selectedCity:0,  //选中的市
        selectedCountry:0, //选中的县
        provinceList:[],
        cityList:[],
        countryList:[],
      }
    },
    methods:{
      getCity(selectedProvince){ //点击省份获取下面的市
        //将市、县变成‘请选择’
        this.selectedCity = 0 ;
        this.selectedCountry = 0 ;
        this.cityList = selectedProvince.nodes ;
        // console.log(this.city,this.selectedProvince,this.userInfo.provinceId) ;
      },
      getCountry(selectedCity){ //点击市获取下面的县
        this.selectedCountry = 0 ;
        this.countryList = selectedCity.nodes ;
        // console.log(this.countryList);
      },
      getChild(selectedCountry){ //点击县保存
      }
    },
    created(){
      axios//调用查询三级关系并绑定数据
        .get('http://localhost:8081/list')
        .then(res=>this.regin=res.data)
    }
  }
script>

效果图如下：

基于Spring boot 实现后端

想必创建工程大家都会把，这里我就直接上代码了

pojo层

实体类BaseArea

@Data
@ToString
public class BaseArea {
    private Integer baseAreaid;

    private String name;

    private Integer parentid;

    private Short vieworder;
}

由于我数据库是使用的单表来做的，后面查询关系会用到自连接，所以还要再建一个BaseAreaNode类，该类继承了BaseArea，拥有BaseArea 的所有特征，用于做返回对象

@Data
@ToString
public class BaseAreaNode extends BaseArea {
    List<BaseArea> nodes;
}

dao层

BaseAreaMapper 接口，定义一个三级关系查询

@Mapper
@Repository
public interface BaseAreaMapper {
    /**
     * 三级分类查询
     * @return
     */
     List<BaseAreaNode> selectList();
}

BaseAreaMapper.xml 映射文件

<mapper namespace="cn.lm.dao.BaseAreaMapper">
  <resultMap type="cn.lm.pojo.BaseAreaNode" id="baseAreaMap">
      <id property="baseAreaid" column="one_id"/>
      <result property="name" column="one_name"/>
      <result property="parentid" column="one_parentid"/>
      <collection property="nodes"
                  ofType="cn.lm.pojo.BaseAreaNode">
          <id property="baseAreaid" column="two_id"/>
          <result property="name" column="two_name"/>
          <result property="parentid" column="two_parentid"/>
          <collection property="nodes"
                      ofType="cn.lm.pojo.BaseAreaNode">
              <id property="baseAreaid" column="three_id"/>
              <result property="name" column="three_name"/>
              <result property="parentid" column="three_parentid"/>
          collection>
      collection>
  resultMap>

  <select id="selectList" resultMap="baseAreaMap" >
       SELECT
        a.base_areaid one_id,
        a.name one_name,
        a.parentid one_parentid,
        b.base_areaid two_id,
        b.name two_name,
        b.parentid two_parentid,
        c.base_areaid three_id,
        c.name three_name,
        c.parentid three_parentid
        FROM
        base_area a LEFT JOIN base_area b
        ON a.base_areaid = b.parentid
        LEFT JOIN base_area c
        ON b.base_areaid = c.parentid
        WHERE a.parentid = '0'
    select>
mapper>

service层

BaseAreaService类 实现dao接口

@Service
public class BaseAreaService {
    @Autowired
    BaseAreaMapper baseAreaMapper;

    public List<BaseAreaNode> getList() {
        return baseAreaMapper.selectList();
    }
}

controller层

@RestController
public class BaseAreaController {
    @Autowired
    BaseAreaService baseAreaService;

    @GetMapping("/list")
    @CrossOrigin(origins = "*")//跨域
    public List<BaseAreaNode> getList() {
        return baseAreaService.getList();
    }
}

sql

由于数据庞大，这里我就省略很多了

-- ----------------------------
-- Table structure for base_area
-- ----------------------------
DROP TABLE IF EXISTS `base_area`;
CREATE TABLE `base_area` (
  `base_areaid` mediumint(8) unsigned NOT NULL AUTO_INCREMENT COMMENT '地址ID',
  `name` varchar(50) NOT NULL DEFAULT '' COMMENT '地区名字',
  `parentid` mediumint(8) unsigned NOT NULL DEFAULT '0' COMMENT '上级路径ID',
  `vieworder` smallint(5) unsigned NOT NULL DEFAULT '0' COMMENT '顺序',
  PRIMARY KEY (`base_areaid`),
  KEY `idx_name` (`name`),
  KEY `idx_parentid_vieworder` (`parentid`,`vieworder`)
) ENGINE=MyISAM AUTO_INCREMENT=820792 DEFAULT CHARSET=gbk COMMENT='统一地区库';
 
-- ----------------------------
-- Records of base_area
-- ----------------------------
INSERT INTO `base_area` VALUES ('11', '北京', '0', '1');
INSERT INTO `base_area` VALUES ('31', '上海', '0', '2');
INSERT INTO `base_area` VALUES ('44', '广东', '0', '3');
INSERT INTO `base_area` VALUES ('34', '安徽', '0', '4');
INSERT INTO `base_area` VALUES ('50', '重庆', '0', '5');
INSERT INTO `base_area` VALUES ('35', '福建', '0', '6');
INSERT INTO `base_area` VALUES ('46', '海南', '0', '7');
INSERT INTO `base_area` VALUES ('13', '河北', '0', '8');
INSERT INTO `base_area` VALUES ('41', '河南', '0', '9');
INSERT INTO `base_area` VALUES ('23', '黑龙江', '0', '10');
INSERT INTO `base_area` VALUES ('42', '湖北', '0', '11');
INSERT INTO `base_area` VALUES ('43', '湖南', '0', '12');
INSERT INTO `base_area` VALUES ('62', '甘肃', '0', '13');
INSERT INTO `base_area` VALUES ('45', '广西', '0', '14');
INSERT INTO `base_area` VALUES ('52', '贵州', '0', '15');
INSERT INTO `base_area` VALUES ('22', '吉林', '0', '16');
INSERT INTO `base_area` VALUES ('36', '江西', '0', '17');
INSERT INTO `base_area` VALUES ('32', '江苏', '0', '18');
INSERT INTO `base_area` VALUES ('21', '辽宁', '0', '19');
INSERT INTO `base_area` VALUES ('15', '内蒙古', '0', '20');
INSERT INTO `base_area` VALUES ('64', '宁夏', '0', '21');
INSERT INTO `base_area` VALUES ('63', '青海', '0', '22');
INSERT INTO `base_area` VALUES ('37', '山东', '0', '23');
INSERT INTO `base_area` VALUES ('14', '山西', '0', '24');
INSERT INTO `base_area` VALUES ('61', '陕西', '0', '25');
INSERT INTO `base_area` VALUES ('51', '四川', '0', '26');
INSERT INTO `base_area` VALUES ('12', '天津', '0', '27');
INSERT INTO `base_area` VALUES ('54', '西藏', '0', '28');
INSERT INTO `base_area` VALUES ('65', '新疆', '0', '29');
INSERT INTO `base_area` VALUES ('53', '云南', '0', '30');
INSERT INTO `base_area` VALUES ('33', '浙江', '0', '31');
INSERT INTO `base_area` VALUES ('71', '台湾', '0', '32');
INSERT INTO `base_area` VALUES ('81', '香港', '0', '33');
INSERT INTO `base_area` VALUES ('82', '澳门', '0', '34');
INSERT INTO `base_area` VALUES ('1129', '延庆', '11', '18');
INSERT INTO `base_area` VALUES ('1128', '密云', '11', '17');
INSERT INTO `base_area` VALUES ('1127', '怀柔', '11', '16');
INSERT INTO `base_area` VALUES ('1126', '平谷', '11', '15');