简介
本篇主要记录一下vue中从后台获取数据后,在前台利用下拉栏对数据进行分类筛选显示
开发工具,环境
nacos,idea,springboot,vscode,vue
流程
首先背景是后台提供课程的数据,前台要显示这些课程,每个课程就是一个基本块
要写两个下拉框,第一个对课程科目分类,筛选课程数据显示到前台;第二个对科目下进一步分类,同时显示数据到前台;例如首先我们在第一个下拉框里选编程,第二个下拉框里选java,python这些细分,下面显示的数据随之变化
- 那么先要在前台创建出这两个下拉框,先创建科目,这里应该是一行,先创建一行,放进去文字,使用element ui来做
<el-col :span="2">
<div class="grid-content bg-purple">
科目:
</div>
</el-col>
然后要做下拉栏
<el-col :span="3">
<div class="grid-content bg-purple-light">
<el-select v-model="subjectValue" placeholder="请选择" @change="selectCategory">
<el-option
v-for="item in subjects"
:key="item.subjectValue"
:label="item.subjectTitle"
:value="item.id">
</el-option>
</el-select>
</div>
</el-col>
这里的原理是,v-model将数据绑定到subjectvalue中, 这个subjectvalue在后台返回中的数据中不存在,只是作为当前显示的内容起个名字,placeholder是背景显示文字,@change是当点击了下拉栏中的值的时候触发的函数
export default {
data(){
return {
subjects:[],
subjectValue:{},
}
},
beforeMount(){
subject.selectAllSubject().then(res=>{
let sub = res.data;
let list = sub.dataList;
this.subjects = list;
});
},
}
}
然后需要在export default中data里,返回subjects和subjectvalue,并在下面把科目查出来,数据传过来,这里使用beforemount(),它是vue的八大生命周期之一,这八大是从四大中扩展出来的,分别是create,mount,update,destroy,前就加个before,后就加个ed,beforemounted就是模板已经在内存中编译好了,但是未挂载到页面中,selectALLsubject()是一个后台提供的api接口,查询了所有数据,这是其json格式
那么只要用item在subjects里遍历,就会显示每一个科目传进下拉栏里
查看前台,已经显示了
然后如法炮制,只是这次要用上一个下拉栏传过来的科目id来查科目下的课程分类,只需要在下面method里加入函数;前台部分和上一个下拉栏差不多,用v-for遍历,key作为选中的值,label是显示的后台传过来数据
methods:{
selectCategory(){
console.log(this.subjectValue);
course.selectCourseCategoryBySubjectId(this.subjectValue).then(res=>{
let category = res.data;
let list = category.dataList;
this.categorys = list;
console.log(list)
});
}
这是数据库的内容,科目表下:
课程分类表下
第二个数据的科目对应科目表里id为2的字段,如图,联动显示成功
之后改一下数据库里的数据,因为之前使用api测试软件批量插入的,这里手动把外键相互关联起来,编写一个根据课程分类查课程的接口,然后在课程分类里触发一个change函数,将之前前台显示课程的变量赋值
json数据(课程分类为1)
数据库数据:课程表
课程分类表
第二个下拉栏和调用的返回函数代码
从数据库数据来看,java分类下有四个课程,测试前台,成功