java js vue 实现三级联查

Java后端代码：

1.定义一个Java类作为数据源，包括省份（province）、城市（city）和区县（county）：

public class Area {
    private String province;
    private String city;
    private String county;

    public Area(String province, String city, String county) {
        this.province = province;
        this.city = city;
        this.county = county;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getCounty() {
        return county;
    }

    public void setCounty(String county) {
        this.county = county;
    }
}

2.定义一个Java类作为数据操作类，实现获取数据的方法：

import java.util.ArrayList;
import java.util.List;

public class AreaData {
    public static List<Area> getAreaData() {
        List<Area> data = new ArrayList<>();
        data.add(new Area("北京市", "北京市", "东城区"));
        data.add(new Area("北京市", "北京市", "西城区"));
        data.add(new Area("北京市", "北京市", "朝阳区"));
        data.add(new Area("北京市", "北京市", "丰台区"));
        data.add(new Area("北京市", "北京市", "石景山区"));
        data.add(new Area("北京市", "北京市", "海淀区"));
        data.add(new Area("北京市", "北京市", "门头沟区"));
        data.add(new Area("北京市", "北京市", "房山区"));
        data.add(new Area("北京市", "北京市", "通州区"));
        data.add(new Area("北京市", "北京市", "顺义区"));
        data.add(new Area("北京市", "北京市", "昌平区"));
        data.add(new Area("北京市", "北京市", "大兴区"));
        data.add(new Area("北京市", "北京市", "怀柔区"));
        data.add(new Area("北京市", "北京市", "平谷区"));
        data.add(new Area("北京市", "北京市", "密云区"));
        data.add(new Area("北京市", "北京市", "延庆区"));
        data.add(new Area("天津市", "天津市", "和平区"));
        data.add(new Area("天津市", "天津市", "河东区"));
        data.add(new Area("天津市", "天津市", "河西区"));
        data.add(new Area("天津市", "天津市", "南开区"));
        data.add(new Area("天津市", "天津市", "河北区"));
        data.add(new Area("天津市", "天津市", "红桥区"));
        data.add(new Area("天津市", "天津市", "东丽区"));
        data.add(new Area("天津市", "天津市", "西青区"));
        data.add(new Area("天津市", "天津市", "津南区"));
        data.add(new Area("天津市", "天津市", "北辰区"));
        data.add(new Area("天津市", "天津市", "武清区"));
        data.add(new Area("天津市", "天津市", "宝坻区"));
        data.add(new Area("天津市", "天津市", "滨海新区"));
        data.add(new Area("天津市", "天津市", "宁河区"));
        data.add(new Area("天津市", "天津市", "静海区"));
        data.add(new Area("天津市", "天津市", "蓟州区"));
        return data;
    }
}

3.定义一个Java类作为接口，提供获取数据的方法：

import java.util.List;

public interface AreaService {
    List<Area> getAreaData();
}

4.实现接口：

import java.util.List;

public class AreaServiceImpl implements AreaService {
    @Override
    public List<Area> getAreaData() {
        return AreaData.getAreaData();
    }
}

5.使用Spring框架，配置Bean：

<bean id="areaService" class="com.example.AreaServiceImpl"/>

6.使用Spring注入Bean：

@Autowired
private AreaService areaService;

7.在Controller中实现获取数据的接口：

@RequestMapping("/getAreaData")
@ResponseBody
public List<Area> getAreaData() {
    return areaService.getAreaData();
}

Vue前端代码：

1.使用axios插件实现前端请求数据：

import axios from 'axios'

export function getAreaData() {
  return axios({
    url: '/getAreaData',
    method: 'get'
  })
}

2.定义一个vue组件作为三级联动的实现：

<template>
  <div>
    <select v-model="province" @change="provinceChange">
      <option value="">请选择省份</option>
      <option v-for="item in provinceList" :value="item">{{item.province}}</option>
    </select>
    <select v-model="city" @change="cityChange">
      <option value="">请选择城市</option>
      <option v-for="item in cityList" :value="item">{{item.city}}</option>
    </select>
    <select v-model="county">
      <option value="">请选择区县</option>
      <option v-for="item in countyList" :value="item">{{item.county}}</option>
    </select>
  </div>
</template>

<script>
import {getAreaData} from '@/api/area'

export default {
  name: 'AreaSelect',
  data() {
    return {
      province: '',
      city: '',
      county: '',
      provinceList: [],
      cityList: [],
      countyList: []
    }
  },
  created() {
    getAreaData().then(res => {
      this.provinceList = res
    })
  },
  methods: {
    provinceChange() {
      this.city = ''
      this.county = ''
      this.cityList = this.province.cityList || []
    },
    cityChange() {
      this.county = ''
      this.countyList = this.city.countyList || []
    }
  }
}
</script>

3.在需要使用的页面中使用组件：

<template>
  <div>
    <area-select></area-select>
  </div>
</template>

<script>
import AreaSelect from '@/components/AreaSelect'

export default {
  name: 'Demo',
  components: {
    AreaSelect
  }
}
</script>