在线教育项目第九天

一、课程列表

与讲师列表类似
有查询表单和分页条
每条数据之后有编辑课程基本信息、编辑课程大纲、删除按钮

后端

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;//注意，这里使用的是String类型，前端传过来的数据无需进行类型转换
    @ApiModelProperty(value = "查询结束时间", example = "2019-12-01 10:10:10")
    private String end;
}

2、EduCourseController创建查询课程列表接口、分页查询课程列表接口、带多条件组合的分页查询课程列表接口

/**
 * 查询课程表中所有数据
 * rest风格 每种操作使用不同的请求方式或提交方式
 * 查询get 添加post 修改put 删除delete
 */
//课程列表
@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对象
    Page<EduCourse> pageCourse = new Page<EduCourse>(current , size);
    //调用service的分页查询方法 参数是page对象和查询条件
    //调用方法的时候，底层会将分页的所有数据封装到pageCourse对象中
    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对象
    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");
    //调用service的方法
    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,
    url:`/eduservice/course/pageCourseCondition/${
     current}/${
     size}`,
    method: 'post',
    data: condition //后端使用RequestBody获取json数据,需要在这里加上data表示将condition对象转为json数据传递到接口中
  })
}

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