springDataJpa+vue实现三级联动

springdatajpa+vue实现省市区三级联动

一，编写后端代码

1、创建springboot项目，添加 web、jpa、lombok、mysql、jdbc 启动器，并创建对应的层

2、编写省，市，区的实体（idea使用了lombok插件），SQL等项目文件文末自取
省份实体类：AddressProvince.java

@Data
@Entity
@Table(name = "t_address_province")
public class AddressProvince {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id",unique = true,nullable = false,length = 50)
    private  Integer id;

    @Column(name = "code",nullable = false,length = 50)
    private String code;

    @Column(name = "name",nullable = false,length = 50)
    private String name;
}

城市实体类：AddressCity.java

@Data
@Entity
@Table(name = "t_address_city")
public class AddressCity {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id",unique = true,nullable = false,length = 50)
    private  Integer id;

    @Column(name = "code",nullable = false,length = 50)
    private String code;

    @Column(name = "name",nullable = false,length = 50)
    private String name;

    @Column(name = "provincecode",nullable = false,length = 50)
    private String provinceCode;
}

区域实体类：AddressTown.java

@Data
@Entity
@Table(name ="t_address_town")
public class AddressTown {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id",unique = true,nullable = false,length = 50)
    private  Integer id;

    @Column(name = "code",nullable = false,length = 50)
    private String code;

    @Column(name = "name",nullable = false,length = 50)
    private String name;

    @Column(name = "citycode",nullable = false,length = 50)
    private String cityCode;
}

3、编写dao

/**
 * 省份dao
 */
public interface ProvinceDao extends JpaRepository<AddressProvince,Integer> {
}

/**
 * 城市dao
 */
public interface CityDao extends JpaRepository<AddressCity,Integer> {
    /**
     * 实现jpa的基本方法，根据省份编号查询城市信息
     * @param provinceCode
     * @return
     */
    public List<AddressCity> findAddressCityByProvinceCode(String provinceCode);
}

/**
 * 区域dao
 */
public interface TownDao extends JpaRepository<AddressTown,Integer> {
    /**
     * 实现jpa基本方法，根据城市编号查询区域信息
     * @param cityCode
     * @return
     */
    public List<AddressTown> findAddressTownByCityCode(String cityCode);
}

4、编写service，调用dao接口方法，返回信息（省略…）
5、编写web，调用service方法，编写省，市，区各个接口

/**
 * 三级联动controller
 */
@RestController
public class AddressController {

    @Autowired
    private ProvinceService provinceService;

    @Autowired
    private CityService cityService;

    @Autowired
    private TownService townService;

    /**
     * 查询所有省份信息
     * @return
     */
    @GetMapping("address")
    public List<AddressProvince> findAll(){
        return provinceService.findAll();
    }

    /**
     * 根据省份编号查询市级信息
     * @param provinceCode
     * @return
     */
    @GetMapping("addressCity/{provinceCode}")
    public List<AddressCity> findByprovinceCode(@PathVariable("provinceCode") String provinceCode){
        return  cityService.findByprovinceCode(provinceCode);
    }

    /**
     * 根据市级编号查询区域信息
     * @param cityCode
     * @return
     */
    @GetMapping("addressTown/{cityCode}")
    public List<AddressTown> findBycityCode(@PathVariable("cityCode") String cityCode){
        return townService.findBycityCode(cityCode);
    }
}

6、使用工具Postman测试接口，返回json数据格式

6_1、部分返回的省份json数据

[
{
“id”: 1,
“code”: “110000”,
“name”: “北京市”
},
{
“id”: 2,
“code”: “120000”,
“name”: “天津市”
},
{
“id”: 3,
“code”: “130000”,
“name”: “河北省”
}
]

6_2、部分返回的城市json数据

[
{
“id”: 5,
“code”: “130100”,
“name”: “石家庄市”,
“provinceCode”: “130000”
},
{
“id”: 6,
“code”: “130200”,
“name”: “唐山市”,
“provinceCode”: “130000”
},
{
“id”: 7,
“code”: “130300”,
“name”: “秦皇岛市”,
“provinceCode”: “130000”
}
]

扫描二维码关注公众号，回复： 11099009 查看本文章

6_3、返回的部分区域json数据

[
{
“id”: 37,
“code”: “130101”,
“name”: “市辖区”,
“cityCode”: “130100”
},
{
“id”: 38,
“code”: “130102”,
“name”: “长安区”,
“cityCode”: “130100”
},
{
“id”: 39,
“code”: “130103”,
“name”: “桥东区”,
“cityCode”: “130100”
}
]

后端总结：后端比较简单，采用的是先查询所有省份信息，如何根据选中的省份，得到省份对应的编号，如何查询对应的城市和区域。当然后端也可以采用jpa的OneToMany的方式，一次性查询出所有的地址信息，返回数据，前端处理。考虑到每次触发方法都要查询所有信息，对数据库请求压力大，所以这样设计。

二，前端VUE+ELEMENT

1、创建vue项目
2、安装 axios 插件，在当前项目下的终端输入命令: npm install --save axios vue-axios
安装 Element 插件，在当前项目下的终端输入命令:npm i element-ui -S
3、在 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';
//注册 VueAxios, axios
Vue.use(VueAxios, axios)
Vue.use(ElementUI)

4、创建vue文件，编写代码
4_1、使用element下拉组件，编写三级下拉框，具体参数示例可参考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>

4_2、上方页面使用了vue.js的v-model和v-for绑定了下方data

  data () {
    return {
      AddressCity: [],//城市集合
      AddressProvince: [],//省份集合
      AddressTown: [],//区域集合
      provinceCode: '',//获取选中时的省份编号
      cityCode: '',//获取选中时的城市编号
      value: ''}//获取选中时区域的编号

4_3、在config文件夹下的index.js中配置跨域请求路径

 proxyTable: {
      // 表示以后以/pctapi 开头的请求，代理请求 http://localhost:8888
      '/pctapi': {
        target: 'http://localhost:8888', //后端接口地址
        changeOrigin: true, //是否允许跨越
        pathRewrite: {
          '^/pctapi': '', //重写,
        }
      }
    }

5、编写请求方法
5_1、在methods中编写加载init方法

 init () {
      var app = this;
      axios.get("pctapi/address").then(resp => {
        // handle success
        app.AddressProvince = resp.data;//绑定到省份集合
      })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    }

5_2、在methods在编写，查询城市findByprovinceCode 和查询区域findBycityCode 方法

//查询城市信息
    findByprovinceCode () {
      var app = this;
      axios.get("/pctapi/addressCity/" + app.provinceCode).then(resp => {
        app.AddressCity = resp.data;
      })
        .catch(function (error) {
          console.log(error);
        });
    },
    //查询区域信息
    findBycityCode () {
      var app = this;
      axios.get("/pctapi/addressTown/" + app.cityCode).then(resp => {
        app.AddressTown = resp.data;
      })
        .catch(function (error) {
          console.log(error);
        });
    }

6、在created中调用init方法，实现初始化请求，使页面加载时查询省份信息，并绑定到AddressProvince 省份集合中，使省份下拉框具有初始值

  created () {
    this.init();
  },

7、在watch中编写监控省份和城市编号的方法，实现当选中省份使provinceCode值发生变化时，触发对应方法查询城市信息，区域同上

  watch: {//监控一个值的变换
    provinceCode: { // 
      handler () {
      //在选中省份发生变化时，清空后方城市和区域集合的值，和绑定编号的值，
      //重新查询对应选中编号的城市和区域值
        this.AddressCity = [];
        this.AddressTown = [];
        this.cityCode = "";
        this.value = "";
        this.findByprovinceCode();
      }
    },
    cityCode: {
      handler () {
        this.findBycityCode();
      }
    }
  }

8、运行截图

9、总结：前端vue项目，主要使用了element的页面，使用了axios的ajax发送请求，获取数据，v-for,v-model绑定数据。整体操作较简单。

后端项目源码和vue页面源码和SQL文件需要自取：

链接：https://pan.baidu.com/s/15yT8iuJK_STvxgQxs-Rsxg
提取码：ljal