本篇主要记录一下vue中从后台获取数据后,在前台利用下拉栏对数据进行分类筛选显示
开发工具,环境nacos,idea,springboot,vscode,vue
流程首先背景是后台提供课程的数据,前台要显示这些课程,每个课程就是一个基本块
要写两个下拉框,第一个对课程科目分类,筛选课程数据显示到前台;第二个对科目下进一步分类,同时显示数据到前台;例如首先我们在第一个下拉框里选编程,第二个下拉框里选java,python这些细分,下面显示的数据随之变化
- 那么先要在前台创建出这两个下拉框,先创建科目,这里应该是一行,先创建一行,放进去文字,使用element ui来做
然后要做下拉栏
这里的原理是,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分类下有四个课程，测试前台，成功
