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”
}
]
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的方式,一次性查询出所有的地址信息,返回数据,前端处理。考虑到每次触发方法都要查询所有信息,对数据库请求压力大,所以这样设计。
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