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、测试

数据库中数据全部输出

Day07-课程分类管理-课程分类显示前端-p104相关推荐

课程分类管理-添加课程分类
业务处理 SubjectAdminController @Api(description="课程分类管理") @CrossOrigin //跨域 @RestController @ ...
谷粒学苑 —— 5、课程分类管理
1.EasyExcel 的使用官方地址: GitHub:GitHub - alibaba/easyexcel: 快速.简洁.解决大文件内存溢出的java处理Excel工具官网:EasyExcel官 ...
学成在线--18.新增课程（课程分类查询）
文章目录一.需求分析二.课程分类查询介绍三.数据结构四.数据格式五.数据模型六.Api接口七.服务器端 1.Dao 1)定义mapper 2)定义mapper映射文件 2.Service ...
硅谷课堂 06_整合腾讯云对象存储和课程分类管理
硅谷课堂第六天-整合腾讯云对象存储和课程分类管理文章目录硅谷课堂第六天-整合腾讯云对象存储和课程分类管理一.讲师管理模块整合腾讯云对象存储 1.腾讯云对象存储介绍 1.1.开通"对象存 ...
硅谷课堂第五课-腾讯云对象存储和课程分类管理
硅谷课堂第六天-整合腾讯云对象存储和课程分类管理文章目录硅谷课堂第六天-整合腾讯云对象存储和课程分类管理一.讲师管理模块整合腾讯云对象存储 1.腾讯云对象存储介绍 1.1.开通"对象存 ...
3. 吴恩达机器学习课程-作业3-多分类和神经网络
fork了别人的项目,自己重新填写,我的代码如下 https://gitee.com/fakerlove/machine-learning/tree/master/code 代码原链接文章目录 3. ...
物联网-传输课程设计-数据采集与显示
物联网-传输课程设计-数据采集与显示 1.总结 2.效果展示 3.步骤说明一.环境准备 (1)Arduino.ESP8266 Node MCU的开发环境搭建(没有单片机就略过) (2)JDK.Ecl ...
数据库的多表查询操作-查询只选修了1门课程的学生，显示学号、姓名、课程名。
文章目录前言一.建立数据库和表二.数据库展示 2.查询只选修了1门课程的学生,显示学号.姓名.课程名. 总结前言在我看来数据库真的是一个神奇的东西,不但里面的只是点很深刻,而且对于我们学习起 ...
18、查询各科成绩最高分、最低分和平均分,以如下形式显示：课程ID,课程name,最高分,最低分,平均分,及格率,中等率, -- 优良率,优秀率
-- 18.查询各科成绩最高分.最低分和平均分:以如下形式显示:课程ID,课程name,最高分,最低分,平均分,及格率,中等率, -- 优良率,优秀率 -- 及格为>=60,中等为:70-80, ...

Day07-课程分类管理-课程分类显示前端-p104

课程分类显示前端

1、创建API

2、将api导入前端页面

3、完善list.vue中的方法

4、前端功能优化

5、测试

Day07-课程分类管理-课程分类显示前端-p104相关推荐

最新文章

热门文章