Java后端代码：
1.定义一个Java类作为数据源，包括
省份（province）、城
市（city）和
区县（county）：
```java
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类作为数据操作类，
实现获取数据的方法：
```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类作为接口，提供获取数据的方法：
```java
import java.util.List;
public interface AreaService {
List<Area> getAreaData();
}
```
4.
实现接口：
```java
import java.util.List;
public class AreaServiceImpl implements AreaService {
@Override
public List<Area> getAreaData() {
return AreaData.getAreaData();
}
}
```
5.使用Spring框架，配置Bean：
```xml
<bean id="areaService" class="com.example.AreaServiceImpl"/>
```
6.使用Spring注入Bean：
```java
@Autowired
private AreaService areaService;
```
7.在Controller中
实现获取数据的接口：
```java
@RequestMapping("/getAreaData")
@ResponseBody
public List<Area> getAreaData() {
return areaService.getAreaData();
}
```
Vue前端代码：
1.使用axios插件
实现前端请求数据：
```javascript
import axios from 'axios'
export function getAreaData() {
return axios({
url: '/getAreaData',
method: 'get'
})
}
```
2.定义一个vue组件作为三级联动的
实现：
```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.在需要使用的页面中使用组件：
```vue
<template>
<div>
<area-select></area-select>
</div>
</template>
<script>
import AreaSelect from '@/components/AreaSelect'
export default {
name: 'Demo',
components: {
AreaSelect
}
}
</script>
```
最低0.47元/天 解锁文章
1909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
