网站端课程列表

我会带着你远行 2021-07-24 20:03 376阅读 0赞

# 一 后端 #

## 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 组件脚本 ##

## 3 模板 ##

<section v-if="courseList.length===0" class="no-data-wrap">
                <em class="icon30 no-data-ico"> </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>

# 四 测试结果 #

![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/ac0cc6772ec04f569746c59bec9f8ec3.png