一、数据库文件
在数据库中创建省、市、县三张表(t_address_province、t_address_city 、t_address_town )。
二、编写后端代码
- 使用idea新建一个springboot项目并添加 lombok、web、jpa、jdbc、mysql依赖
- 根据数据库表编写实体类。 注:(@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;
}
- 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);
}
- 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;
}
}
- 添加功能帮助类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;
}
}
- 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,显示结果。
至此,就完成了一个简单的三级联动查询了!!!