1、创建API

import request from '@/utils/request'

export default {
    //1 课程分类列表
    getSubjectList(){
        return request({
            url:`/eduservice/subject/getAllSubject`,
            method:'get',
        })
    }
}

2、将api导入前端页面

import subject from '@/api/edu/subject.js'

3、完善list.vue中的方法

data2: [],//返回所有分类数据


created(){//在页面渲染之前执行，将信息查询出来
    this.getAllSubject()
},


getAllSubject(){//查询所有课程分类信息
      subject.getSubjectList()
          .then(response=>{
              this.data2 = response.data.list
          })
},

4、前端功能优化

框架在前端页面提供了一个可以模糊查询的功能，但该功能默认区别大小写，我们可以修改list.vue代码，使其查询时忽略大小写
在比较时将用户输入的字符和页面已存在的字符全部转换成大写字母或小写字母。
此处转成了小写字母。
另外下边红框中的值取的是分类中的名称的key的名字。即实体类中的title属性。
所有此处要改成title

5、测试

数据库中数据全部输出