###
实现 Spring Boot 中的省市区
三级联动
#### 项目初始化与配置
为了
实现省市区
三级联动，首先需要创建一个新的
Spring Boot 项目并添加必要的依赖项。这包括 `web`, `jpa`, `lombok`, `mysql` 和 `jdbc` 启动器[^1]。
```xml
<dependencies>
<dependency>
<groupId>org.
springframework.
boot</groupId>
<artifactId>
spring-
boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.
springframework.
boot</groupId>
<artifactId>
spring-
boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-
java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.
springframework.
boot</groupId>
<artifactId>
spring-
boot-starter-jdbc</artifactId>
</dependency>
</dependencies>
```
#### 数据库表设计
假设已经有一个包含省份、城市和区县的数据表结构。这些数据可以通过 SQL 脚本预先填充到 MySQL 数据库中。
#### Mapper 接口定义
对于每一个级别的区域（省/市/区），都需要编写相应的
MyBatis 或 JPA 的 Repository 来操作数据库。这里以
MyBatis 为例：
```
java
public interface TAddressProvinceMapper {
@Select("SELECT * FROM t_address_province")
List<TAddressProvince> getAllProvinces();
}
public interface TAddressCityMapper {
@Select("SELECT * FROM t_address_city WHERE province_code = #{provinceCode}")
List<TAddressCity> getCitiesByProvinceCode(@Param("provinceCode") String provinceCode);
}
public interface TAddressTownMapper {
@Select("SELECT * FROM t_address_town WHERE city_code = #{cityCode}")
List<TAddressTown> getTownsByCityCode(@Param("cityCode") String cityCode);
}
```
#### 修改启动类扫描包路径
为了让
Spring 自动发现所有的 Mapper 接口，可以在应用入口处通过 `@MapperScan` 注解指定 mapper 文件所在的包名[^2]。
```
java
@
SpringBootApplication
@MapperScan(basePackages = "com.example.mapper")
public class ProvinceApplication {
public static void main(String[] args) {
SpringApplication.run(ProvinceApplication.class, args);
}
}
```
#### 控制器层处理请求
控制器负责接收来自前端的选择变化事件，并返回对应下一级别的选项列表给前端展示。
```
java
@RestController
@RequestMapping("/api/address")
public class AddressController {
private final TAddressProvinceMapper provinceMapper;
private final TAddressCityMapper cityMapper;
private final TAddressTownMapper townMapper;
@Autowired
public AddressController(TAddressProvinceMapper provinceMapper,
TAddressCityMapper cityMapper,
TAddressTownMapper townMapper) {
this.provinceMapper = provinceMapper;
this.cityMapper = cityMapper;
this.townMapper = townMapper;
}
@GetMapping("/provinces")
public ResponseEntity<List<TAddressProvince>> listProvinces() {
return new ResponseEntity<>(provinceMapper.getAllProvinces(), HttpStatus.OK);
}
@GetMapping("/cities/{provinceCode}")
public ResponseEntity<List<TAddressCity>> listCities(@PathVariable String provinceCode) {
return new ResponseEntity<>(cityMapper.getCitiesByProvinceCode(provinceCode), HttpStatus.OK);
}
@GetMapping("/towns/{cityCode}")
public ResponseEntity<List<TAddressTown>> listTowns(@PathVariable String cityCode) {
return new ResponseEntity<>(townMapper.getTownsByCityCode(cityCode), HttpStatus.OK);
}
}
```
#### 前端 Vue.js 集成
在前端部分可以采用 Vue.js 框架来构建交互界面。当用户选择不同的级别时触发 AJAX 请求获取新的子集数据更新视图[^4]。
```html
<div id="app">
<select v-model="selectedProvince" @change="fetchCities()">
<option value="">请选择省份...</option>
<option v-for="item in provinces" :value="item.code">{{ item.name }}</option>
</select>
<select v-if="selectedProvince" v-model="selectedCity" @change="fetchDistricts()">
<option value="">请选择城市...</option>
<option v-for="item in cities" :value="item.code">{{ item.name }}</option>
</select>
<select v-if="selectedCity" v-model="selectedDistrict">
<option value="">请选择区县...</option>
<option v-for="item in districts" :value="item.code">{{ item.name }}</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: () => ({
selectedProvince: '',
selectedCity: '',
selectedDistrict: '',
provinces: [],
cities: [],
districts: []
}),
methods: {
fetchProvinces() {
axios.get('/api/address/provinces')
.then(response => (this.provinces = response.data));
},
fetchCities() {
if (!this.selectedProvince) return;
const url = `/api/address/cities/${this.selectedProvince}`;
axios.get(url).then(response => (this.cities = response.data));
},
fetchDistricts() {
if (!this.selectedCity) return;
const url = `/api/address/towns/${this.selectedCity}`;
axios.get(url).then(response => (this.districts = response.data));
}
},
created() {
this.fetchProvinces();
}
});
</script>
```
本文详细介绍了计算机软件著作权（软著）的免费登记流程、自行申请步骤和找代理的优缺点。从2017年起，软著登记不再收费，但申请人可以选择自行申请或找代理以节省时间和精力。自行申请涉及在线注册、填写申请表、准备材料和邮寄。找代理则可以提供加急服务和材料撰写，但会产生费用。此外，文章还提供了说明书模板供参考。
最低0.47元/天 解锁文章
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
