vue+mybatis二级联动案例

好的，下面是一个简单的vue+mybatis二级联动案例：

前端 Vue 代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="selectCity">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province.id">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :value="city.id">{{ city.name }}</option>
    </select>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      provinces: [],
      cities: [],
      selectedProvince: '',
      selectedCity: ''
    }
  },
  mounted() {
    axios.get('/api/provinces').then(res => {
      this.provinces = res.data;
    });
  },
  methods: {
    selectCity() {
      axios.get('/api/cities', {
        params: {
          provinceId: this.selectedProvince
        }
      }).then(res => {
        this.cities = res.data;
      });
    }
  }
}
</script>

后端 Java 代码：

省份和城市实体类：

public class Province {
    private Integer id;
    private String name;
    // 省份对应的城市列表
    private List<City> cities;
    // getter 和 setter 省略
}

public class City {
    private Integer id;
    private String name;
    private Integer provinceId;
    // getter 和 setter 省略
}

省份和城市 DAO：

public interface ProvinceMapper {
    List<Province> findAll();
}

public interface CityMapper {
    List<City> findByProvinceId(Integer provinceId);
}

省份和城市 Service：

@Service
public class ProvinceService {
    @Autowired
    private ProvinceMapper provinceMapper;

    public List<Province> findAll() {
        return provinceMapper.findAll();
    }
}

@Service
public class CityService {
    @Autowired
    private CityMapper cityMapper;

    public List<City> findByProvinceId(Integer provinceId) {
        return cityMapper.findByProvinceId(provinceId);
    }
}

Controller：

@RestController
@RequestMapping("/api")
public class AddressController {
    @Autowired
    private ProvinceService provinceService;
    @Autowired
    private CityService cityService;

    @GetMapping("/provinces")
    public List<Province> findAllProvinces() {
        return provinceService.findAll();
    }

    @GetMapping("/cities")
    public List<City> findByProvinceId(Integer provinceId) {
        return cityService.findByProvinceId(provinceId);
    }
}

这样，我们就完成了一个简单的vue+mybatis二级联动案例。