全国省市区三级联动（简单易懂）

最新推荐文章于 2024-07-26 12:28:02 发布

程序猿阿文

最新推荐文章于 2024-07-26 12:28:02 发布

阅读量806

点赞数 1

文章标签： java mybatis 开发语言

本文链接：https://blog.csdn.net/m0_64887345/article/details/130755024

版权

实现全国省市区三级联动

1.数据库

脚本下载地址链接：https://pan.baidu.com/s/1099yqKDeLMCBrTfw9qo-QA
提取码：942y

2.服务端实现

2.1控制器

@RestController
@CrossOrigin
@RequestMapping("/api")
@Api(value = "省市区联动接口",tags = "介绍管理")
public class AreaController {
    @Autowired
    private getAreaService getAreaService;


    @GetMapping("/cities/{provinceId}")
    @ApiOperation("查找省所在的市")
    @ResponseBody
    public ResultVO listCity(@PathVariable("provinceId") String provinceId){
        List<City> cities = getAreaService.getCityByProvince(provinceId);
        return new ResultVO(ResStatus.OK,"success",cities);
    }

    @GetMapping("/districts/{cityId}")
    @ApiOperation("查找市所在的区")
    @ResponseBody
    public ResultVO listArea(@PathVariable("cityId") String cityId){
        List<Area> areas = getAreaService.getAreaByCity(cityId);
        return new ResultVO(ResStatus.OK,"success",areas);
    }

    @GetMapping("/provinces")
    @ApiOperation("查找全国所有的省份")
    @ResponseBody
    public ResultVO listProvince(){
        List<Province> provinceList = getAreaService.getAllProvince();
        return new ResultVO(ResStatus.OK,"success",provinceList);
    }
}

2.2service层

import com.qfedu.fmmall.entity.Area;
import com.qfedu.fmmall.entity.City;
import com.qfedu.fmmall.entity.Province;

import java.util.List;

public interface getAreaService {
    public List<City> getCityByProvince(String id);

    public List<Area> getAreaByCity(String id);

    public List<Province> getAllProvince();
}

@Service
public class getAreaServiceImpl implements getAreaService {
   @Autowired
   private GetAreaMapper getAreaMapper;

    @Override
    public List<City> getCityByProvince(String provinceId) {
       return getAreaMapper.getCityByProvince(provinceId);
    }

    @Override
    public List<Area> getAreaByCity(String cityId) {
        return getAreaMapper.getAreaByCity(cityId);
    }

    @Override
    public List<Province> getAllProvince() {
        List<Province> provinceList = getAreaMapper.getAllProvince();
        return provinceList;
    }
}

2.3mapper层

<resultMap id="getCityByProvince" type="com.qfedu.fmmall.entity.City">
    <id column="id" property="id" jdbcType="INTEGER" />
    <result column="cityID" property="cityID"/>
    <result column="city" property="city" jdbcType="VARCHAR" />
    <result column="father" property="father" jdbcType="VARCHAR" />
</resultMap>

<resultMap id="getAreaByCity" type="com.qfedu.fmmall.entity.Area">
        <id column="id" property="id" jdbcType="INTEGER" />
        <result column="areaID" property="areaID"/>
        <result column="area" property="area" jdbcType="VARCHAR" />
        <result column="father" property="father" jdbcType="VARCHAR" />
</resultMap>

<resultMap id="getAllProvince" type="com.qfedu.fmmall.entity.Province">
        <id column="id" property="id" jdbcType="INTEGER" />
        <result column="provinceID" property="provinceID"/>
        <result column="province" property="province" jdbcType="VARCHAR" />
</resultMap>

<select id="getCityByProvince" resultType="com.qfedu.fmmall.entity.City" resultMap="getCityByProvince">
    select id,cityID,city,father
    from hat_city c where c.father=#{id}
</select>

<select id="getAreaByCity" resultType="com.qfedu.fmmall.entity.Area" resultMap="getAreaByCity">
        select
            id,areaID,area,father
        from hat_area a where a.father =#{id}
</select>

<select id="getAllProvince" resultType="com.qfedu.fmmall.entity.Province">
    select id,provinceID,province
    from hat_province
</select>

3.前端实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue ElementUI CityData</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <label>
        <select v-model="selectedProvince" @change="getCities">
            <option value="">请选择省份</option>
            <option v-for="province in provinces" :value="province.provinceID">{{province.province}}</option>
        </select>
    </label>

    <label>
        <select v-model="selectedCity" @change="getDistricts">
            <option value="city.name">请选择城市</option>
            <option v-for="city in cities" :value="city.cityID">{{city.city}}</option>
        </select>
    </label>

    <label>
        <select v-model="selectedDistrict">
            <option value="district.name">请选择区县</option>
            <option v-for="district in districts" :value="district.areaID">{{district.area}}</option>
        </select>
    </label>

</div>
<script src="/js/Vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
                provinces: [],
                cities: [],
                districts: [],
                selectedProvince: '',
                selectedCity: '',
                selectedDistrict: '',
        },
        methods: {
            getProvinces() {
                axios.get('http://localhost:8080/api/provinces')
                    .then(response => {
                        this.provinces = response.data.data;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            getCities() {
                const provinceId = this.selectedProvince;
                if (!provinceId) {
                    this.cities = [];
                    this.districts = [];
                    return;
                }
                axios.get('http://localhost:8080/api/cities/'+provinceId)
                    .then(response => {
                        this.cities = response.data.data;
                        this.districts = [];
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            getDistricts() {
                const cityId = this.selectedCity;
                if (!cityId) {
                    this.districts = [];
                    return;
                }
                axios.get('http://localhost:8080/api/districts/'+cityId)
                    .then(response => {
                        this.districts = response.data.data;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
        },
        mounted() {
            this.getProvinces();
        }
    });
</script>
</body>
</html>

程序猿阿文

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
全国省市区三级联动（简单易懂）

脚本下载地址链接：https://pan.baidu.com/s/1099yqKDeLMCBrTfw9qo-QA提取码：942y。
复制链接

扫一扫