三级联动（springboot+vue.jsajax+mysql+SpringDataJp。。。三级联动
写三级联动可能是⼀张表也可能是三张
下⾯我就分两种情况，做出个⼈不同的思路操作
情况⼀：联动表为三张
假如是三张表，那么它们⼀定是通过某⼀个列名所关联的。
那么我们可以采⽤spring data jpa。
(下⾯是我做的⼀个省市县的三级联动demo)
mysql数据库设计:
⼀共三张表,province,city,town ，通过code进⾏联动
后端:
重点在于dao层，所以其他层就没有贴出来了,service,controller注⼊调⽤即可。
当然联动可以在实体类⽤@OneToMany来⼀次性返回⼀个json数据给前端，个⼈喜欢把jpa⽤于简单的crud
dao层:
在dao层创建三个接⼝ ProvinceRepository,CityRepository,TownRepository 继承JpaRepository<(对应的实体),String> 因为code,provincecode,citycode字段都是String类型，所以后⾯放String
public interface ProvinceRepository extends JpaRepository<Province, String> {
}
public interface CityRepository extends JpaRepository<City, String> {
//⾃定义需要的⽅法，根据省级code来得到所关联的市集合
List<City> findByProvincecode(String provinceCode);
}
public interface TownRepository extends JpaRepository<Town, String> {
//⾃定义需要的⽅法，根据市级code来得到所关联的城县集合
List<Town> findByCitycode(String cityCode);
}
前端:
ajax:
本⼈不专研前端，所以代码不是很精湛，但是亲测可⽤
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.input-lg {
height: 25px;
}
</style>
</head>
<body>
<span>三级联动</span>  
<select class="form-control input-lg province">
<option value="0">--请选择--</option>
</select>
<select class="form-control input-lg city">
<option value="0">--请选择--</option>
</select>
<select class="form-control input-lg town">
<option value="0">--请选择--</option>
</select>
</body>
<script src="/js/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function () {
init();
//初始化数据
// ⼀级分类
function init() {
$.ajax({
url: "/getProvince", //获取省集合⽅法的请求
dataType: "json",
success: function (data) {
var html = "";
for (var i = 0; i < data.length; i++) {
html = "<option value='" + data[i].code + "'>" + data[i].name + "</option>"
$(".province").append(html);
}
change();
},
error: function () {
alert("⼀级分类错误");
}
})
}
//⼆级分类
function change() {
$(".province").change(function () {
$(".town").empty().append("<option value='0'>--请选择--</option>");
$(".city").empty().append("<option value='0'>--请选择--</option>");
var provinceCode = $(".province option:selected").val();
$.ajax({
url: "/getCity", //根据provinceCode获取市集合⽅法的请求
dataType: "json",
data: {"provinceCode": provinceCode},
success: function (data) {
var city = data;
var html = "";
for (var i = 0; i < city.length; i++) {
html = "<option value='" + city[i].code + "'>" + city[i].name + "</option>"                            $(".city").append(html);
}
change2();
},
error: function () {
alert("⼆级分类错误");
}
})
})
}
jquery框架使用//三级分类
function change2() {
$(".city").change(function () {
$(".town").empty().append("<option value='0'>--请选择--</option>");
var cityCode = $(".city option:selected").val();
$.ajax({
url: "/getTown",//根据cityCode获取城县集合⽅法的请求
dataType: "json",
data: {"cityCode": cityCode},
success: function (data) {
var city = data;
var html = "";
for (var i = 0; i < city.length; i++) {
html = "<option value='" + city[i].code + "'>" + city[i].name + "</option>"                            $(".town").append(html);
}
},
error: function () {
alert("三级分类错误");
}
})
})
}
})
</script>
</html>
vue.js:
这⾥我使⽤的是vuejs框架。
可以⽤指令⽣成脚⼿架⽂件后拖⼊vscode，也可以⽤webstorm⽣成脚⼿架。
需要有node.js,webpack,vue.js否则⽆法创建脚⼿架。
注意：实现前后端分离的时候需要解决跨域问题，在config包下到index.js 设置proxyTable
页⾯展⽰:
vue代码:
<template>
<div>
<el-select v-model="province" placeholder="请选择">
<el-option
v-for="item in provinceOptions"
:key="de"
:label="item.name"
:value="de"
></el-option>
</el-select>
<el-select v-model="city" placeholder="请选择">
<el-option v-for="item in cityOptions" :key="de" :label="item.name" :value="de"></el-option>    </el-select>
<el-select v-model="town" placeholder="请选择">
<el-option v-for="item in townOptions" :key="de" :label="item.name" :value="de"></el-option>    </el-select>
</div>
</template>
<script>
const axios = require("axios");
export default {
data() {
return {
province: "",
city: "",
town: "",
provinceOptions: [],
cityOptions: [],
townOptions: []
};
},
methods: {
init() {
axios
.get("/apis/getProvince")
.then(res => (this.provinceOptions = res.data));    },
getCity() {
var province = this;
axios
.get("/apis/getCity", {
params: {
provinceCode: province.province
}
})
.then(res => (province.cityOptions = res.data));    },
getTown() {
var city = this;
axios
.
get("/apis/getTown", {
params: {
cityCode: city.city
}
})
.then(res => (wnOptions = res.data));
}
},
created() {
this.init();
},
watch: {
province: {
handler() {
this.cityOptions = [];
this.city = "";
}
},
city: {
handler() {
}
}
}
};
</script>
<style scoped>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。