01-课程页面静态效果整合

一、列表页面

创建 pages/course/index.vue

二、详情页面

创建 pages/course/_id.vue

02-课程列表页面

一、课程后端接口

1、课程列表

（1）课程列表vo类（条件查询需要的对象）

@ApiModel(value = "课程查询对象", description = "课程查询对象封装")

@Data

public class CourseFrontVo {

@ApiModelProperty(value = "课程名称")

private String title;

@ApiModelProperty(value = "讲师id")

private String teacherId;

@ApiModelProperty(value = "一级类别id")

private String subjectParentId;

@ApiModelProperty(value = "二级类别id")

private String subjectId;

@ApiModelProperty(value = "销量排序")

private String buyCountSort;

@ApiModelProperty(value = "最新时间排序")

private String gmtCreateSort;

@ApiModelProperty(value = "价格排序")

private String priceSort;

}

（2）课程列表controller

@RestController

@CrossOrigin

@RequestMapping("/eduservice/coursefront")

public class CourseFrontController {

@Autowired

private EduCourseService courseService;

//1 条件查询带分页查询课程

@ApiOperation(value = "分页课程列表")

@PostMapping("pageCourseCondition/{current}/{limit}")

public R pageCourseCondition(@PathVariable long limit,

@PathVariable long current,

@RequestBody(required = false) CourseFrontVo courseFrontVo){

//@RequestBody(required = false)使用RequestBody必须是post提交，不添加required = false必须要有值，添加后表示可以没有值

Page pageParam = new Page(current,limit);

Map map = courseService.pageListWeb(pageParam, courseFrontVo);

return R.ok().data(map);

}

}

//@RequestBody(required = false)使用RequestBody必须是post提交，不添加required = false必须要有值，添加后可以没有值

（3）课程列表service

//1 条件查询带分页查询课程

@Override

public Map pageListWeb(Page pageParam, CourseFrontVo courseFrontVo) {

QueryWrapper queryWrapper = new QueryWrapper<>();

//判断条件值是否为空,不为空拼接

if (!StringUtils.isEmpty(courseFrontVo.getSubjectParentId())){//一级分类

queryWrapper.eq("subject_parent_id",courseFrontVo.getSubjectParentId());

}

if (!StringUtils.isEmpty(courseFrontVo.getSubjectId())){//二级分类

queryWrapper.eq("subject_id",courseFrontVo.getSubjectId());

}

if (!StringUtils.isEmpty(courseFrontVo.getBuyCountSort())){//销售数量

queryWrapper.orderByDesc("buy_count",courseFrontVo.getBuyCountSort());

}

if (!StringUtils.isEmpty(courseFrontVo.getGmtCreateSort())){//创建时间

queryWrapper.orderByDesc("gmt_create",courseFrontVo.getGmtCreateSort());

}

if (!StringUtils.isEmpty(courseFrontVo.getPriceSort())){//价格

queryWrapper.orderByDesc("price",courseFrontVo.getPriceSort());

}

baseMapper.selectPage(pageParam, queryWrapper);

List records = pageParam.getRecords();

long pages = pageParam.getPages();

long current = pageParam.getCurrent();

long total = pageParam.getTotal();

long size = pageParam.getSize();

boolean hasNext = pageParam.hasNext(); //下一页

boolean hasPrevious = pageParam.hasPrevious(); //上一页

Map map = new HashMap();

map.put("items",records);

map.put("current", current);

map.put("pages", pages);

map.put("size", size);

map.put("total", total);

map.put("hasNext", hasNext);

map.put("hasPrevious", hasPrevious);

return map;

}

二、课程列表前端

1、定义api

api/course.js

import request from '@/utils/request'

export default {

  //1 条件查询带分页查询课程

  getCourseList(current,limit,searchObj) {

    return request({

      url: `/eduservice/coursefront/pageCourseCondition/${current}/${limit}`,

      method: 'post',

      data:searchObj

    })

  },

  //查询所有分类的方法

  getAllSubject(){

    return request({

        url: `/eduservice/edu-subject/getAllSubject`,

        method: 'get'

      })

  }

}

2、页面调用接口

pages/course/index.vue

完善当点击一级分类时，页面中显示的是该一级分类下的所有课程：

完善点击添一级分类显示样式：

  .active {

    background: #bdbdbd;

  }

  .hide {

    display: none;

  }

  .show {

    display: block;

  }

如果oneIndex==index则添加样式：

结果：

完善点击某个二级分类实现查询

结果：

完善排序方式显示

                销量

                  ↓







                最新

                  ↓







                价格

                  ↓

    //6 根据销量进行排序

    searchBuyCount(){

      //设置对应变量值，为了样式生效

      this.buyCountSort = "1"

      this.gmtCreateSort = ""

      this.priceSort = ""

      //把值赋值到search0bj

      this.searchObj.buyCountSort = this.buyCountSort

      this.searchObj.gmtCreateSort = this.gmtCreateSort

      this.searchObj.priceSort = this.priceSort

      //调用方法查询

      this.gotoPage(1)

    },

    //7 最新排序

    searchGmtCreate(){

      //设置对应变量值，为了样式生效

      this.buyCountSort = ""

      this.gmtCreateSort = "1"

      this.priceSort = ""

      //把值赋值到search0bj

      this.searchObj.buyCountSort = this.buyCountSort

      this.searchObj.gmtCreateSort = this.gmtCreateSort

      this.searchObj.priceSort = this.priceSort

      //调用方法查询

      this.gotoPage(1)

    },

    //8 价格排序

    searchPrice(){

      //设置对应变量值，为了样式生效

      this.buyCountSort = ""

      this.gmtCreateSort = ""

      this.priceSort = "1"

      //把值赋值到search0bj

      this.searchObj.buyCountSort = this.buyCountSort

      this.searchObj.gmtCreateSort = this.gmtCreateSort

      this.searchObj.priceSort = this.priceSort

      //调用方法查询

      this.gotoPage(1)

    }