Vue+SpringDataJpa+MySql实现省、市、县三级联动

一、数据库文件

在数据库中创建省、市、县三张表（t_address_province、t_address_city 、t_address_town ）。

二、编写后端代码

1. 使用idea新建一个springboot项目并添加 lombok、web、jpa、jdbc、mysql依赖
2. 根据数据库表编写实体类。 注：（@Data：自动生成getter,setter方法；@Entity：实体类注解；@Table：关联数据库表，name属性与数据库表同名，若表名和实体类同名，此注解可省：@Id:表主键;@GeneratedValue:字段自增；@Column:关联数据表中字段名，name属性与表中字段同名，全字母尽量小写，unique表示是否唯一，nullable是否为空，length属性长度）。
   2.1、省实体类。

@Data
@Entity
@Table(name = "t_address_province")
public class Province implements Serializable {
    /**
     * 版本号
     */
    private static final long serialVersionUID = 3416844643852851984L;
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", unique = true, nullable = false, length = 18)
    private int id;
    @Column(name = "code")
    private String code;
    @Column(name = "name")
    private String name;
}

2.2、城市实体类。

@Data
@Entity
@Table(name = "t_address_city")
public class City implements Serializable {
    /**
     * 版本号
     */
    private static final long serialVersionUID = 3416844643852851984L;
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", unique = true, nullable = false, length = 18)
    private int id;
    @Column(name = "code")
    private String code;
    @Column(name = "name")
    private String name;

    @Column(name = "provincecode")
    private String provinceCode;
}

2.3、县实体类

@Data
@Entity
@Table(name = "t_address_town")
public class Town implements Serializable {
    /**
     * 版本号
     */
    private static final long serialVersionUID = 3416844643852851984L;
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", unique = true, nullable = false, length = 18)
    private int id;
    @Column(name = "code")
    private String code;

    @Column(name = "name")
    private String name;
    @Column(name = "citycode")
    private String cityCode;
}

3. dao层。根据实体类添加相应的dao层接口，继承JpaRepository,Provinece表示实体类名，Integer表示主键类型。

public interface ProvinceDao extends JpaRepository<Province,Integer> {
    
}

public interface CityDao extends JpaRepository<City,Integer> {
    public List<City> findAllByProvinceCode(String code);
}

public interface TownDao extends JpaRepository<Town,Integer> {
    public List<Town> findAllByCityCode(String code);
}

4. service层

@Service
@Transactional
public class ProvinceService {
    @Resource
    private ProvinceDao provinceDao;

    /**
     * 查询所有省份
     * @return
     */
    public List<Province> findAll(){
        List<Province> list = provinceDao.findAll();
        return list;
    }
}

@Service
@Transactional
public class CityService {
    @Resource
    private CityDao cityDao;
    /**
     * 查询所有城市
     * @return
     */
    public List<City> findAll(){
        List<City> list = cityDao.findAll();
        return list;
    }
    /**
     * 根据省份查询城市
     * @param code
     * @return
     */
    public List<City> findAllByProvince_Code(String code){
        List<City> cityList = cityDao.findAllByProvinceCode(code);
        return cityList;
    }
}

@Service
@Transactional
public class TownService {
    @Resource
    private TownDao townDao;

    /**
     * 查询所有县
     * @return
     */
    public List<Town> findAll(){
        List<Town> list = townDao.findAll();
        return list;
    }

    /**
     *根据城市查询县
     * @param code
     * @return
     */
    public List<Town> findAllByCity_Code(String code){
        List<Town> list = townDao.findAllByCityCode(code);
        return list;
    }
}

5. 添加功能帮助类ResponseResult

public class ResponseResult {
    private Integer state; //返回状态
    private String msg; //根据状态返回的信息
    private Object data;//返回的数据

    public ResponseResult() {
        this.state = 200;
        this.msg = "成功";
    }

    public ResponseResult(Integer state, String msg) {
        this.state = state;
        this.msg = msg;
    }

    public ResponseResult(Integer state, String msg, Object data) {
        this.state = state;
        this.msg = msg;
        this.data = data;
    }

    public Integer getState() {
        return state;
    }

    public void setState(Integer state) {
        this.state = state;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

}

6. controller层，调用service层方法，返回json数据。

@RestController
public class ProvinceController {
    @Resource
    private ProvinceService provinceService;
    @Resource
    private CityService cityService;
    @Resource
    private TownService townService;

    /**
     * 查询省份
     * @return
     */
    @GetMapping("/findAllProvince")
    @CrossOrigin(origins = "*")
    public ResponseResult findAll() {
        ResponseResult result = new ResponseResult();
        List<Province> provinceList = provinceService.findAll();
        result.setData(provinceList);
        return result;
    }

    /**
     * 查询城市
     * @param code
     * @return
     */
    @GetMapping("/findAllByProvince_Code")
    @CrossOrigin(origins = "*")
    public ResponseResult findAllByProvince_Code(@RequestParam(name = "provinceCode") String code) {
        ResponseResult result = new ResponseResult();
        List<City> provinceList = cityService.findAllByProvince_Code(code);
        result.setData(provinceList);
        return result;
    }

    /**
     * 查询县
     * @param code
     * @return
     */
    @GetMapping("/findAllByCity_Code")
    @CrossOrigin(origins = "*")
    public ResponseResult findAllByCity_Code(@RequestParam(name = "cityCode") String code) {
        ResponseResult result = new ResponseResult();
        List<Town> provinceList = townService.findAllByCity_Code(code);
        result.setData(provinceList);
        return result;
    }

}

三、编写前端代码

1、创建vue项目，并安装axios，Element插件 。
2、在 src 文件夹下的程序入口 main.js 中写入以下内容

import axios from 'axios'
import VueAxios from 'vue-axios'
// element-ui 引入文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueAxios, axios)
Vue.use(ElementUI)

3、创建vue文件
3.1、使用element下来组件，实现省市县三级下来框

<template>
  <div>
    <el-select v-model="provinceCode" placeholder="省份">
      <el-option
        v-for="item in AddressProvince"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>

    <el-select v-model="cityCode" placeholder="城市">
      <el-option
        v-for="item  in AddressCity"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
    <el-select v-model="value" placeholder="区域">
      <el-option
        v-for="item   in AddressTown"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
  </div>
</template>

3.2、使用vue.js的v-model和v-for绑定了下方data

<script>
const axios = require("axios");
export default {
 data () {
    return {
      AddressCity: [],//城市集合
      AddressProvince: [],//省份集合
      AddressTown: [],//县集合
      provinceCode: '',//省份编码
      cityCode: '',//城市编码
      value: ''//县编码
    }
  },
   watch: {//监控一个值的变换
    provinceCode: { // 
      handler () {
        this.AddressCity = [];
        this.AddressTown = [];
        this.cityCode = "";
        this.value = "";
        this.findByprovinceCode();
      }
    },
    cityCode: {//
      handler () {
        this.findBycityCode();
      }
    }
  },
  created () {
    this.init();
  },
  methods: {
    handleChange (value) {
      console.log(value);
    },

3.3、调用后端方法，显示数据。http://localhost:8888：后端IP地址

init () {//初始化数据，查询所有省份
      var app = this;
      axios.get('http://localhost:8888/findAllProvince').then(resp => {
        app.AddressProvince = resp.data.data;//将后端返回的json数据传给前端
        console.log(resp.data.data);
      })
        .catch(function (error) {
          console.log(error);
        });
    },

    findByprovinceCode () {//根据省份编码查询城市
      var app = this;
      axios.get("http://localhost:8888/findAllByProvince_Code?provinceCode=" + app.provinceCode).then(resp => {

        app.AddressCity = resp.data.data;
      })
        .catch(function (error) {
          console.log(error);
        });
    },
    findBycityCode () {//根据城市编码查询县
      var app = this;
      axios.get("http://localhost:8888/findAllByCity_Code?cityCode=" + app.cityCode).then(resp => {     
        app.AddressTown = resp.data.data;

      })
        .catch(function (error) {
          console.log(error);
        });
    },
  }
}
</script>

4.运行vue，显示结果。

至此，就完成了一个简单的三级联动查询了！！！