Vue前台两级下拉栏分类内容

简介

本篇主要记录一下vue中从后台获取数据后,在前台利用下拉栏对数据进行分类筛选显示

开发工具,环境

nacos,idea,springboot,vscode,vue

流程

首先背景是后台提供课程的数据,前台要显示这些课程,每个课程就是一个基本块
要写两个下拉框,第一个对课程科目分类,筛选课程数据显示到前台;第二个对科目下进一步分类,同时显示数据到前台;例如首先我们在第一个下拉框里选编程,第二个下拉框里选java,python这些细分,下面显示的数据随之变化

1. 那么先要在前台创建出这两个下拉框,先创建科目,这里应该是一行,先创建一行,放进去文字,使用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分类下有四个课程，测试前台，成功