74 课程列表前端获取后端数据

src/api/edu/subject.js实现前端接口。

import request from '@/utils/request' 

export default {
  // 课程分类：查询所有课程分类
  getAllSubject() {
    return request({
      url: `/eduservice/edu-subject/getAllSubject`,
      method: 'get'
    })
  }
}

edu/subject/list.vue.

<script>
import subject from "@/api/edu/subject.js"
export default {

  data() {
    return {
      filterText: '',
      data2: [],
      defaultProps: {
        children: "children",
        label: "title", // 这里的title与后端的属性名保持一致
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  created() {
    this.getAllSubject()
  },
  methods: {
    getAllSubject() {
      subject.getAllSubject()
      .then(Response => {
        this.data2 = Response.data.list
      })
    },
    // 课程分类的搜索索
     filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
  }
}
</script>

效果如下图。

上面的检索功能是可用的，不过，它严格区分大小写，为了提高用户体验，我们继续完善下检索方法:不管用户输入什么值，我们都转换为小写进行比较。

 // 课程分类的搜索索
     filterNode(value, data) {
      if (!value) return true;
      return data.title.toLowerCase().indexOf(value) !== -1;
    }

最后回过头完善下save.vue，让课程分类添加成功后实现自动跳转到课程列表。