网站端课程列表

一 后端

1 定义vo

/**
* @className: WebCourseQueryVo
* @description: 课程查询条件
* @date: 2020/12/19
* @author: cakin
*/
@Data
public class WebCourseQueryVo implements Serializable {


    private static final long serialVersionUID = 1L;
    // 一级分类
    private String subjectParentId;
    private String subjectId;
    // 二级分类
    private String buyCountSort;
    // 按时间排序
    private String gmtCreateSort;
    // 按价格排序
    private String priceSort;
    // 排序方式
    private Integer type;
}

2 控制器

@CrossOrigin
@Api(description = "课程")
@RestController
@RequestMapping("/api/edu/course")
public class ApiCourseController {
    @Autowired
    private CourseService courseService;
    @Autowired
    private ChapterService chapterService;
    /**
     * 功能描述：课程列表
     *
     * @param webCourseQueryVo 查询条件
     * @return R 返回给前端的数据
     * @author cakin
     * @date 2020/12/19
     */
    @ApiOperation("课程列表")
    @GetMapping("list")
    public R pageList(@ApiParam(value = "查询对象", required = true) WebCourseQueryVo webCourseQueryVo) {
        List<Course> courseList = courseService.webSelectList(webCourseQueryVo);
        return R.ok().data("courseList", courseList);
    }
}

3 查询业务

接口

/**
* 功能描述：根据条件进行课程查询
*
* @author cakin
* @date 2020/12/19
* @param webCourseQueryVo 课程查询条件
* @return List<Course> 课程列表
*/
List<Course> webSelectList(WebCourseQueryVo webCourseQueryVo);

实现

/**
* 功能描述：根据条件进行课程查询
*
* @param webCourseQueryVo 课程查询条件
* @return List<Course> 课程列表
* @author cakin
* @date 2020/12/19
*/
@Override
public List<Course> webSelectList(WebCourseQueryVo webCourseQueryVo) {
    // 查询条件
    QueryWrapper<Course> queryWrapper = new QueryWrapper<>();
    // 查询已发布的课程
    queryWrapper.eq("status", Course.COURSE_NORMAL);
    if (!StringUtils.isEmpty(webCourseQueryVo.getSubjectParentId())) {
        queryWrapper.eq("subject_parent_id", webCourseQueryVo.getSubjectParentId());
    }
    if (!StringUtils.isEmpty(webCourseQueryVo.getSubjectId())) {
        queryWrapper.eq("subject_id", webCourseQueryVo.getSubjectId());
    }
    if (!StringUtils.isEmpty(webCourseQueryVo.getBuyCountSort())) {
        queryWrapper.orderByDesc("buy_count");
    }
    if (!StringUtils.isEmpty(webCourseQueryVo.getGmtCreateSort())) {
        queryWrapper.orderByDesc("gmt_create");
    }
    // 排序方式
    if (!StringUtils.isEmpty(webCourseQueryVo.getPriceSort())) {
        if (webCourseQueryVo.getType() == null || webCourseQueryVo.getType() == 1) {
            queryWrapper.orderByAsc("price");
        } else {
            queryWrapper.orderByDesc("price");
        }
    }
    return baseMapper.selectList(queryWrapper);
}

二 前端

1 定义api

import request from '~/utils/request'
export default {

  // 根据条件获得课程列表
  getList(searchObj) {
    return request({
      url: '/api/edu/course/list',
      method: 'get',
      params: searchObj
    })
  },
}

2 组件脚本

<script>
import courseApi from '~/api/course'

export default {
  async asyncData(page) {
    // 组装查询参数
    const searchObj = {}
   
    // 课程列表的查询
    const courseListResponse = await courseApi.getList(searchObj)
    return {
      courseList // 课程列表
    }
  }
}
</script>

3 模板

          <!-- /无数据提示 开始-->
          <section v-if="courseList.length===0" class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
          </section>
          <!-- /无数据提示 结束-->
          <!-- 数据列表 开始-->
          <article v-if="courseList.length>0" class="comm-course-list">
            <ul id="bna" class="of">
              <li v-for="item in courseList" :key="item.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img :src="item.cover" :alt="item.title" class="img-responsive">
                    <div class="cc-mask">
                      <a :href="'/course/'+item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/course/'+item.id" :title="item.title" class="course-title fsize18 c-333">{{ item.title }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                    <span v-if="Number(item.price) === 0" class="fr jgTag bg-green">
                      <i class="c-fff fsize12 f-fA">免费</i>
                    </span>
                    <span v-else class="fr jgTag ">
                      <i class="c-orange fsize12 f-fA"> ￥{{ item.price }}</i>
                    </span>
                    <span class="fl jgAttr c-ccc f-fA">
                      <i class="c-999 f-fA">{{ item.viewCount }}人学习</i>
                      |
                      <i class="c-999 f-fA">{{ item.buyCount }}人购买</i>
                    </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"/>
          </article>
          <!-- /数据列表 结束-->

四 测试结果