首页热门课程和讲师展示

深藏阁楼爱情的钟 2021-07-24 12:39 644阅读 0赞

# 一 后端 #

## 1 控制器 ##

@CrossOrigin
    @Api(description = "首页")
    @RestController
    @RequestMapping("/api/edu/index")
    public class ApiIndexController {
    
    
        @Autowired
        private CourseService courseService;
    
    
        @Autowired
        private TeacherService teacherService;
    
    
        @ApiOperation("课程和讲师的首页数据")
        @GetMapping
        public R index() {
            // 查询热门课程
            List<Course> courseList = courseService.selectHotCourse();
            // 查询推荐讲师
            List<Teacher> teacherList = teacherService.selectHotTeacher();
            return R.ok().data("courseList", courseList).data("teacherList", teacherList);
        }

## 2 course service层 ##

接口

/**
         * 功能描述：获取热门课程
         *
         * @author cakin
         * @date 2020/12/21
         * @return 热门课程列表
         */
        List<Course> selectHotCourse();

实现

/**
    * 功能描述：获取热门课程
    *
    * @author cakin
    * @date 2020/12/21
    * @return 热门课程列表
    */
    @Cacheable(value = "index", key = "'selectHotCourse'")
    @Override
    public List<Course> selectHotCourse() {
        QueryWrapper<Course> queryWrapper = new QueryWrapper<>();
        // 根据浏览量降序排序
        queryWrapper.orderByDesc("view_count");
        // 只显示8条数据
        queryWrapper.last("limit 8");
        // 热门课程列表
        return baseMapper.selectList(queryWrapper);
    }

## 3 teacher service层 ##

接口

/**
    * 功能描述：获取热门讲师列表
    *
    * @author cakin
    * @date 2020/12/21
    * @return 热门讲师列表
    */
    List<Teacher> selectHotTeacher();

实现

/**
    * 功能描述：获取热门讲师列表
    *
    * @author cakin
    * @date 2020/12/21
    * @return 热门讲师列表
    */
    @Cacheable(value = "index", key = "'selectHotTeacher'")
    @Override
    public List<Teacher> selectHotTeacher() {
        QueryWrapper<Teacher> queryWrapper = new QueryWrapper<>();
        // 安装sort降序排列
        queryWrapper.orderByDesc("sort");
        // 只显示4条讲师
        queryWrapper.last("limit 4");
        return baseMapper.selectList(queryWrapper);
    }

# 二 前端 #

## 1 api ##

getIndexData() {
        return request({
          url: '/api/edu/index',
          method: 'get'
        })
      }

## 2 主页获取数据 ##

async asyncData() {
        // 首页banner数据的获取
        const topBannerAdListResponse = await indexApi.getTopBannerAdList()
        const topBannerAdList = topBannerAdListResponse.data.items
    
        // 获取课程和讲师数据
        const indexDataResponse = await indexApi.getIndexData()
        const courseList = indexDataResponse.data.courseList
        const teacherList = indexDataResponse.data.teacherList
    
        return {
          topBannerAdList,
          courseList,
          teacherList
        }
      },

## 3 课程页面渲染 ##

<div>
                <article class="comm-course-list">
                  <ul id="bna" class="of">
                    <li v-for="course in courseList" :key="course.id">
                      <div class="cc-l-wrap">
                        <section class="course-img">
                          <img
                            :src="course.cover"
                            :alt="course.title"
                            class="img-responsive"
                          >
                          <div class="cc-mask">
                            <a :href="'/course/'+course.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                          </div>
                        </section>
                        <h3 class="hLh30 txtOf mt10">
                          <a :href="'/course/'+course.id" :title="course.title" class="course-title fsize18 c-333">{
       { course.title }}</a>
                        </h3>
                        <span v-if="Number(course.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"> ￥{
       { course.price }}</i>
                        </span>
                        <span class="fl jgAttr c-ccc f-fA">
                          <i class="c-999 f-fA">{
       { course.viewCount }}人学习</i>
                          |
                          <i class="c-999 f-fA">{
       { course.buyCount }}人购买</i>
                        </span>
                      </div>
                    </li>
                  </ul>
                  <div class="clear"/>
                </article>
                <section class="tac pt20">
                  <a href="#" title="全部课程" class="comm-btn c-btn-2">全部课程</a>
                </section>
              </div>
            </section>
          </div>

## 4 名师页面渲染 ##

<div>
            <section class="container">
              <header class="comm-title">
                <h2 class="tac">
                  <span class="c-333">名师大咖</span>
                </h2>
              </header>
              <div>
                <article class="i-teacher-list">
                  <ul class="of">
                    <li v-for="teacher in teacherList" :key="teacher.id">
                      <section class="i-teach-wrap">
                        <div class="i-teach-pic">
                          <a :href="'/teacher/'+teacher.id" :title="teacher.name">
                            <img :src="teacher.avatar" :alt="teacher.name" height="142">
                          </a>
                        </div>
                        <div class="mt10 hLh30 txtOf tac">
                          <a :href="'/teacher/'+teacher.id" :title="teacher.name" class="fsize18 c-666">{
       { teacher.name }}</a>
                        </div>
                      </section>
                    </li>
                  </ul>
                  <div class="clear"/>
                </article>
                <section class="tac pt20">
                  <a href="teacher" title="全部讲师" class="comm-btn c-btn-2">全部讲师</a>
                </section>
              </div>
            </section>
          </div>

# 三 测试 #

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