Springboot+vue realizes the selection of provinces and cities

Back-end technology: springboot, mysql, mybatis-plus

Front-end technology: vue, element ui

One, database and sql

Download SQL, import database

Sql file download for provinces and cities: https://download.csdn.net/download/qq_29752857/15350918

Two, background interface

springboot dependency

<dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency> 
<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</version>
        </dependency>
<dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.28</version>
            <scope>runtime</scope>
        </dependency>

Provincial and municipal entities

import lombok.Data;

import java.io.Serializable;

@Data
public class Region  implements Serializable {
    private String id;
    private String code;
    private String name;
    private String parentId;
    private String levelId;
    }

Provincial City Mapper

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jzkj.model.Region;

public interface RegionMapper  extends BaseMapper<Region> {
}

Return entity class

import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.LinkedHashMap;
import java.util.List;


/**
 * $.ajax后需要接受的JSON
 *
 */
public class AjaxJson {

	private boolean success = true;// 是否成功
	private String errorCode = "-1";//错误代码
	private String msg = "操作成功";// 提示信息
    private Long count;             //返回表格记录数量
    private List<?> data;           //返回表格数据
	private LinkedHashMap<String, Object> body = new LinkedHashMap<String, Object>();//封装json的map

	public static AjaxJson ok(){
		AjaxJson j = new AjaxJson();
		return j;
	}

	public static AjaxJson ok(String msg){
		AjaxJson j = new AjaxJson();
		j.setMsg(msg);
		return j;
	}

	public static AjaxJson ok(String msg, Object object){
		AjaxJson j = new AjaxJson();
		j.setMsg(msg);
		j.setResult(object);
		return j;
	}

	public static AjaxJson ok(Object object){
		AjaxJson j = new AjaxJson();
		j.setResult(object);
		return j;
	}

	public static AjaxJson fail(String errorMsg){
		AjaxJson j = new AjaxJson();
		j.setSuccess(false);
		j.setErrorCode("999");//默认错误码
		j.setMsg(errorMsg);
		return j;
	}

	public static AjaxJson fail(String errorCode,String errorMsg){
		AjaxJson j = new AjaxJson();
		j.setSuccess(false);
		j.setErrorCode(errorCode);
		j.setMsg(errorMsg);
		return j;
	}
	//返回不分页的layui表数据
    public static AjaxJson layuiTable(List<?> list){
        AjaxJson j = new AjaxJson();
        j.setSuccess(true);
        j.setCount(Long.valueOf(list.size()));
        j.setData(list);
        return j;
    }
	public LinkedHashMap<String, Object> getBody() {
		return body;
	}

	public void setBody(LinkedHashMap<String, Object> body) {
		this.body = body;
	}

	public void put(String key, Object value){//向json中添加属性，在js中访问，请调用data.map.key
		body.put(key, value);
	}
	
	public void remove(String key){
		body.remove(key);
	}

	/**
	 * 直接设置result内容
	 * @param result
	 */
	public void setResult(Object result){
		body.put("result", result);
	}
	@JsonIgnore//返回对象时忽略此属性
	public Object getResult(){
		return body.get("result");
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {//向json中添加属性，在js中访问，请调用data.msg
		this.msg = msg;
	}


	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}
	

	public void setErrorCode(String errorCode) {
		this.errorCode = errorCode;
	}

	public String getErrorCode() {
		return errorCode;
	}

    public Long getCount() {
        return count;
    }

    public void setCount(Long count) {
        this.count = count;
    }

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
}

Write backend interface

import com.xxxx.common.AjaxJson;
import com.xxxx.mapper.RegionMapper;
import com.xxxx.model.Region;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;

@Api(tags = "省市区")
@RestController
@RequestMapping({"/weixin","/admin"})
public class AWController {
    @Autowired
    RegionMapper regionMapper;
    @GetMapping("/provincelist")
    @ApiOperation("获取省份")
    public AjaxJson provincelist() {
        HashMap<String ,Object> hashMap=new HashMap<>();
        hashMap.put("level_id","1");
        List<Region> regions = regionMapper.selectByMap(hashMap);
        return AjaxJson.ok(regions);
    }
    @GetMapping("/provinceCitylist")
    @ApiOperation("获取市")
    public AjaxJson provinceCitylist(String province) {
        HashMap<String ,Object> hashMap=new HashMap<>();
        hashMap.put("name",province);
        List<Region> regions = regionMapper.selectByMap(hashMap);
        HashMap<String ,Object> hashMapt=new HashMap<>();
        hashMapt.put("parent_id",regions.get(0).getId());
        hashMap.put("level_id","2");
        List<Region> regions1 = regionMapper.selectByMap(hashMapt);
        return AjaxJson.ok(regions1);
    }
    @GetMapping("/cityCountylist")
    @ApiOperation("获取区")
    public AjaxJson cityCountylist(String city) {
        HashMap<String ,Object> hashMap=new HashMap<>();
        hashMap.put("name",city);
        List<Region> regions = regionMapper.selectByMap(hashMap);
        HashMap<String ,Object> hashMapt=new HashMap<>();
        hashMapt.put("parent_id",regions.get(0).getId());
        hashMap.put("level_id","2");
        List<Region> regions1 = regionMapper.selectByMap(hashMapt);
        return AjaxJson.ok(regions1);
    }
}

 Generate interface

Third, the front-end code

<template>
    <div>
        <el-form  label-width="140px" label-position="left">

            <el-form-item label="省份：" required="true">
                <el-select v-model="doctor.province" filterable placeholder="请选择" @change="handleChange">
                    <el-option v-for="item in provincelist" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="城市：" required="true">
                <el-select v-model="doctor.city" filterable placeholder="请选择">
                    <el-option v-for="item in citylist" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Useredit",
        data() {
            return {
                id: "",
                provincelist: [],
                citylist: [],
                doctor: {
                    province: "",
                    city: "",
                }


            };
        },
        mounted() {
            this.findprovincelist();
        },
        methods: {
            findprovincelist() {
                this.getRequest("/admin/provincelist").then(res => {
                    if (res.errorCode == -1) {
                        var data = res.body.result
                        this.provincelist = data;
                    }
                    console.log(res)
                });
            },           
            handleChange() {
                this.doctor.city = ""
                this.getRequest("/admin/provinceCitylist?province=" + this.doctor.province).then(res => {
                    if (res.errorCode == -1) {
                        var data = res.body.result
                        this.citylist = data;
                    }
                    console.log(res)
                });
            },
        }
    }
</script>

<style lang='stylus' scoped>
    el-form-item {
        width: 50%;
    }

    <style>