课程列表前后端实现

骑猪看日落 2021-07-24 13:33 371阅读 0赞

# 一 后端实现 #

## 1 定义搜索对象 ##

/**
    * @className: CourseQueryVo
    * @description: 搜索对象
    * @date: 2020/12/6
    * @author: cakin
    */
    @Data
    public class CourseQueryVo implements Serializable {
        private static final long serialVersionUID = 1L;
        private String title; // 标题
        private String teacherId; // 讲师id
        private String subjectParentId; // 课程一级分类
        private String subjectId; // 课程二级分类
    }

## 2 对应查询结果对象 ##

@Data
    public class CourseVo implements Serializable {
        private static final long serialVersionUID = 1L;
        private String id; // 课程id
        private String title; // 课程标题
        private String subjectParentTitle; // 一级分类标题
        private String subjectTitle; // 二级分类标题
        private String teacherName; // 讲师姓名
        private Integer lessonNum; // 课时
        private String price; // 价格
        private String cover; // 封面
        private Long buyCount; // 购买数量
        private Long viewCount; // 预览数量
        private String status; // 课程状态
        private String gmtCreate; // 创建时间
    }

## 3 控制器 ##

/**
    * 功能描述：课程分页列表
    *
    * @author cakin
    * @date 2020/12/6
    * @param page 当前页码
    * @param limit 每页记录数
    * @return R 返回给前端数据
    */
    @ApiOperation("课程分页列表")
    @GetMapping("list/{page}/{limit}")
    public R listPage(@ApiParam(value = "当前页码", required = true) @PathVariable Long page,
                      @ApiParam(value = "每页记录数", required = true) @PathVariable Long limit,
                      @ApiParam("课程列表查询对象") CourseQueryVo courseQueryVo) {
        IPage<CourseVo> pageModel = courseService.selectPage(page, limit, courseQueryVo);
        List<CourseVo> records = pageModel.getRecords();
        long total = pageModel.getTotal();
        return R.ok().data("total", total).data("rows", records);
    }

## 4 service层 ##

> 点睛：使用MyBatis Plus的分页插件和QueryWrapper结合自定义mapper xml实现多表关联查询

接口

/**
    * 功能描述：查询课程列表
    *
    * @param page          页码
    * @param limit         每页记录数
    * @param courseQueryVo 查询条件
    * @return IPage<CourseVo> 返回分页
    * @author cakin
    * @date 2020/12/6
    */
    IPage<CourseVo> selectPage(Long page, Long limit, CourseQueryVo courseQueryVo);

实现

/**
    * 功能描述：查询课程列表
    *
    * @param page          页码
    * @param limit         每页记录数
    * @param courseQueryVo 查询条件
    * @return IPage<CourseVo> 返回分页
    * @author cakin
    * @date 2020/12/6
    */
    @Override
    public IPage<CourseVo> selectPage(Long page, Long limit, CourseQueryVo courseQueryVo) {
        // 组装查询条件
        QueryWrapper<CourseVo> queryWrapper = new QueryWrapper<>();
        // 按照创建时间降序排列
        queryWrapper.orderByDesc("c.gmt_create");
        // 获取查询条件
        String title = courseQueryVo.getTitle();
        String teacherId = courseQueryVo.getTeacherId();
        String subjectParentId = courseQueryVo.getSubjectParentId();
        String subjectId = courseQueryVo.getSubjectId();
        // 标题
        if (!StringUtils.isEmpty(title)) {
            queryWrapper.like("c.title", title);
        }
        // 讲师id
        if (!StringUtils.isEmpty(teacherId)) {
            queryWrapper.eq("c.teacher_id", teacherId);
        }
        // 一级分类id
        if (!StringUtils.isEmpty(subjectParentId)) {
            queryWrapper.eq("c.subject_parent_id", subjectParentId);
        }
        // 二级分类id
        if (!StringUtils.isEmpty(subjectId)) {
            queryWrapper.eq("c.subject_id", subjectId);
        }
        // 组装分页
        Page<CourseVo> pageParam = new Page<>(page, limit);
        // 执行分页查询
        // 只需要在mapper层传入封装好的分页组件即可，sql分页条件组装的过程由mp自动完成
        List<CourseVo> records = baseMapper.selectPageByCourseQueryVo(pageParam, queryWrapper);
        // 将records设置到pageParam中
        return pageParam.setRecords(records);
    }

## 5 mapper层 ##

接口

/**
    * 功能描述：根据分页和查询条件查询课程列表
    *
    * @author cakin
    * @date 2020/12/6
    * @param pageParam 分页参数
    * @param queryWrapper 查询条件
    * @return List<CourseVo> 课程列表
    */
    List<CourseVo> selectPageByCourseQueryVo(
            Page<CourseVo> pageParam,
            @Param(Constants.WRAPPER) QueryWrapper<CourseVo> queryWrapper);

xml

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.atguigu.guli.service.edu.mapper.CourseMapper">
        
        <sql id="columns">
          c.id,
          c.title,
          c.lesson_num AS lessonNum,
          CONVERT(c.price, DECIMAL(8,2)) AS price,
          c.cover,
          c.buy_count AS buyCount,
          c.view_count AS viewCount,
          c.status,
          c.gmt_create AS gmtCreate,
          t.name AS teacherName,
          s1.title AS subjectParentTitle,
          s2.title AS subjectTitle
        </sql>
        
        <sql id="tables">
            edu_course c
            LEFT JOIN edu_teacher t ON c.teacher_id = t.id
            LEFT JOIN edu_subject s1 ON c.subject_parent_id = s1.id
            LEFT JOIN edu_subject s2 ON c.subject_id = s2.id
        </sql>
    
    
        <select id="selectPageByCourseQueryVo" resultType="com.atguigu.guli.service.edu.entity.vo.CourseVo">
            SELECT
            <include refid="columns"/>
            FROM
            <include refid="tables"/>
            ${ew.customSqlSegment}
        </select>
    </mapper>

# 二 前端实现 #

## 1 定义 api ##

// 课程列表
      getPageList(page, limit, searchObj) {
        return request({
          url: `/admin/edu/course/list/${page}/${limit}`,
          method: 'get',
          params: searchObj
        })
      },

## 2 组件中的js ##

## 3 组件模板 ##

<template>
      <div class="app-container">
        
        <el-form :inline="true" class="demo-form-inline">
          
          
          <el-form-item label="课程类别">
            <el-select
              v-model="searchObj.subjectParentId"
              placeholder="请选择"
              @change="subjectLevelOneChanged">
              <el-option
                v-for="subject in subjectList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>
            
            <el-select v-model="searchObj.subjectId" placeholder="请选择">
              <el-option
                v-for="subject in subjectLevelTwoList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-input v-model="searchObj.title" placeholder="课程标题"/>
          </el-form-item>
          
          <el-form-item>
            <el-select
              v-model="searchObj.teacherId"
              placeholder="请选择讲师">
              <el-option
                v-for="teacher in teacherList"
                :key="teacher.id"
                :label="teacher.name"
                :value="teacher.id"/>
            </el-select>
          </el-form-item>
          
          <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
          
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>
    
    
        
        <el-table :data="list" border stripe >
          
          <el-table-column label="#" width="50">
            <template slot-scope="scope">
              {
       { (page - 1) * limit + scope.$index + 1 }}
            </template>
          </el-table-column>
          
          <el-table-column label="封面" width="200" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.cover" alt="scope.row.title" width="100%">
            </template>
          </el-table-column>
          
          <el-table-column label="课程信息">
            <template slot-scope="scope">
              
              <a href="">{
       { scope.row.title }}</a>
              
              <p>
                分类：{
       { scope.row.subjectParentTitle }} > {
       { scope.row.subjectTitle }}
              </p>
              
              <p>
                课时：{
       { scope.row.lessonNum }} /
                浏览：{
       { scope.row.viewCount }} /
                付费学员：{
       { scope.row.buyCount }}
              </p>
            </template>
          </el-table-column>
          
          <el-table-column label="讲师" width="100" align="center">
            <template slot-scope="scope">
              {
       { scope.row.teacherName }}
            </template>
          </el-table-column>
          
          <el-table-column label="价格(元)" width="100" align="center" >
            <template slot-scope="scope">
              
              
              <el-tag v-if="Number(scope.row.price) === 0" type="success">免费</el-tag>
              
              
              
              <el-tag v-else>{
       { scope.row.price }}</el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="status" label="课程状态" width="100" align="center" >
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 'Draft' ? 'warning' : 'success'">{
       { scope.row.status === 'Draft' ? '未发布' : '已发布' }}</el-tag>
            </template>
          </el-table-column>
          
          <el-table-column label="创建时间" width="120" align="center">
            <template slot-scope="scope">
              {
       { scope.row.gmtCreate.substr(0, 10) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <router-link :to="'/course/info/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
              </router-link>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          :current-page="page"
          :total="total"
          :page-size="limit"
          :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="changePageSize"
          @current-change="changeCurrentPage"
        />
      </div>
    </template>

## 4 点击修改按钮 ##

created() {
        // 通过获取路由名称 判断进入哪个步骤
        if (this.$route.name === 'CourseInfoEdit') {
          this.courseId = this.$route.params.id
          this.active = 0
        } else if (this.$route.name === 'CourseChapterEdit') {
          this.courseId = this.$route.params.id
          this.active = 1
        }
      }

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/2417739c919d43b8b8ccf4d3ea9955d3.png