一、课程列表
与讲师列表类似
有查询表单和分页条
每条数据之后有编辑课程基本信息、编辑课程大纲、删除按钮
后端
1、创建CourseQuery类,用于封装多条件组合查询课程信息的条件数据
public class CourseQuery {
@ApiModelProperty(value = "课程标题,模糊查询")
private String title;
@ApiModelProperty(value = "状态 Draft未发布 Normal已发布")
private String status;
@ApiModelProperty(value = "查询开始时间", example = "2019-01-01 10:10:10")
private String begin;
@ApiModelProperty(value = "查询结束时间", example = "2019-12-01 10:10:10")
private String end;
}
2、EduCourseController创建查询课程列表接口、分页查询课程列表接口、带多条件组合的分页查询课程列表接口
@ApiOperation(value = "所有课程列表")
@GetMapping("findAll")
public R findCourseById() {
List<EduCourse> courses = eduCourseService.list(null);
return R.ok().data("courses", courses);
}
@ApiOperation(value = "分页查询课程列表")
@GetMapping("pageCourse/{current}/{size}")
public R pageListTeacher(
@ApiParam(name = "current", value = "课程列表当前页码", required = true) @PathVariable long current,
@ApiParam(name = "size", value = "课程列表每页讲师数", required = true) @PathVariable long size) {
Page<EduCourse> pageCourse = new Page<EduCourse>(current , size);
eduCourseService.page(pageCourse, null);
return R.ok().data("total", pageCourse.getTotal()).data("courses", pageCourse.getRecords());
}
@ApiOperation(value = "带多条件组合的分页查询课程列表")
@PostMapping("pageCourseCondition/{current}/{size}")
public R pageTeacherCondition(
@ApiParam(name = "current", value = "课程列表当前页码", required = true) @PathVariable long current,
@ApiParam(name = "size", value = "课程列表每页课程数", required = true) @PathVariable long size,
@RequestBody(required = false) CourseQuery condition) {
Page<EduCourse> pageCourse = new Page<EduCourse>(current, size);
QueryWrapper<EduCourse> wrapper = new QueryWrapper<EduCourse>();
String title = condition.getTitle();
String status = condition.getStatus();
String begin = condition.getBegin();
String end = condition.getEnd();
if (!StringUtils.isEmpty(title)) {
wrapper.like("title", title);
}
if (!StringUtils.isEmpty(status)) {
wrapper.eq("status", status);
}
if (!StringUtils.isEmpty(begin)) {
wrapper.ge("gmt_create", begin);
}
if (!StringUtils.isEmpty(end)) {
wrapper.le("gmt_create", end);
}
wrapper.orderByDesc("gmt_create");
eduCourseService.page(pageCourse, wrapper);
return R.ok().data("total", pageCourse.getTotal()).data("courses", pageCourse.getRecords());
}
前端
1、course文件中加上查询课程列表的接口
getList(current, size, condition) {
return request({
url:`/eduservice/course/pageCourseCondition/${
current}/${
size}`,
method: 'post',
data: condition
})
}
2、views/edu/course/list.vue
参考讲师列表
<template>
<div class="app-container">
<!-- 条件查询表单 -->
<el-form :inline="true" class="demo-form-inline" align="center">
<el-form-item label="课程标题">
<el-input v-model="condition.title" placeholder="课程标题"></el-input>
</el-form-item>
<el-form-item label="课程状态">
<el-select v-model="condition.status" placeholder="课程状态">
<el-option label="未发布" :value="'Draft'"></el-option>
<el-option label="已发布" :value="'Normal'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="condition.begin" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" />
</el-form-item>
<el-form-item>
<el