谷粒学院(十七)讲师列表页 | 讲师详情 | 课程列表页 | 课程详情 | 整合阿里云视频点播(一)

简介: 谷粒学院(十七)讲师列表页 | 讲师详情 | 课程列表页 | 课程详情 | 整合阿里云视频点播(一)

一、讲师列表页 - 前后端


1、Controller类

@RestController
@CrossOrigin
@RequestMapping("/eduservice/teacherfront")
public class TeacherFrontController {
    @Autowired
    private EduTeacherService teacherService;
    @Autowired
    private EduCourseService courseService;
    //1.分页查询讲师的方法
    @GetMapping("getTeacherFrontList/{page}/{limit}")
    public R getTeacherFrontList(@PathVariable long page,@PathVariable long limit){
        Page <EduTeacher> teacherPage = new Page <>(page,limit);
        Map<String,Object> map=  teacherService.getTeacherFrontList(teacherPage);
        return R.ok().data(map);
    }
}

2、Service类

//查询讲师列表 带分页
@Override
public Map <String, Object> getTeacherFrontList(Page <EduTeacher> page) {
    QueryWrapper <EduTeacher> wrapper = new QueryWrapper <>();
    wrapper.orderByAsc("sort");
    this.baseMapper.selectPage(page, wrapper);
    List <EduTeacher> records = page.getRecords();
    long current = page.getCurrent();
    long pages = page.getPages();
    long size = page.getSize();
    long total = page.getTotal();
    boolean hasNext = page.hasNext();
    boolean hasPrevious = page.hasPrevious();
    Map <String, Object> 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;
}

3、使用Swagger测试


http://localhost:8001/swagger-ui.html


4、创建 api


创建文件夹api,api下创建teacher.js,用于封装讲师模块的请求

import request from '@/utils/request'
export default {
    //分页查询讲师的方法
    getTeacheList(page,limit){
        return request({
            url:`/eduservice/teacherfront/getTeacherFrontList/${page}/${limit}`,
            mehtod:'get'
        })
    }
}

5、讲师列表组件中调用api


pages/teacher/index.vue


<script>
    import teacherApi from '@/api/teacher'
  export default {
        //  data() {
        //    return {
        //      data:[]
        //    }
        //  },
        //异步调用(仅仅执行一次) 
        //params:相当于之前 this.$route.params =>> this.$route.params.id==params.id
        asyncData({ params, error}) {
            return teacherApi.getTeacheList(1,8).then(response=>{
                //this.data = response.data.data 和下面这行等价.
                return {data:response.data.data}
            })
        },
        methods: {
            gotoPage(page){
                teacherApi.getTeacheList(page,8).then(response=>{
                    this.data = response.data.data
                })
            }
        },
};
</script>

6、页面渲染

<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <header class="comm-title all-teacher-title">
        <h2 class="fl tac">
          <span class="c-333">全部讲师</span>
        </h2>
        <section class="c-tab-title">
          <a id="subjectAll" title="全部" href="#">全部</a>
          <!-- <c:forEach var="subject" items="${subjectList }">
                            <a id="${subject.subjectId}" title="${subject.subjectName }" href="javascript:void(0)" οnclick="submitForm(${subject.subjectId})">${subject.subjectName }</a>
          </c:forEach> -->
        </section>
      </header>
      <section class="c-sort-box unBr">
        <div>
          <!-- /无数据提示 开始-->
          <section class="no-data-wrap" v-if="data.total==0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有相关数据,小编正在努力整理中...</span>
          </section>
          <!-- /无数据提示 结束-->
          <article class="i-teacher-list" v-if="data.total > 0">
            <ul class="of">
              <li v-for="item in data.items" :key="item.id">
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a :href="'/teacher/'+item.id" :title="item.name" target="_blank">
                      <img :src="item.avatar" :alt="item.name">
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a :href="'/teacher/'+item.id" :title="item.name" target="_blank" class="fsize18 c-666">{{item.name}}</a>
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999">{{item.intro}}</span>
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">{{item.career}}</p>
                  </div>
                </section>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>
        <!-- 公共分页 开始 -->
        <div>
          <div class="paging">
            <!-- undisable这个class是否存在,取决于数据属性hasPrevious -->
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="首页"
              @click.prevent="gotoPage(1)"
              disabled
              >首页</a>
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="前一页"
              @click.prevent="gotoPage(data.current-1)">&lt;</a>
            <a
              v-for="page in data.pages"
              :key="page"
              :class="{current: data.current == page, undisable: data.current == page}"
              :title="'第'+page+'页'"
              href="#"
              @click.prevent="gotoPage(page)">{{ page }}</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="后一页"
              @click.prevent="gotoPage(data.current+1)">&gt;</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="末页"
              @click.prevent="gotoPage(data.pages)">尾页</a>
            <div class="clear"/>
          </div>
        </div>
        <!-- 公共分页 结束 -->
      </section>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>

7、页面效果展示

36fd665708cb92807b59bfccba7d6509.png


二、讲师详情页 - 前后端


1、Controller 类

//2.讲师详情的功能
@GetMapping("getTeacherFrontInfo/{teacherId}")
public R getTeacherFrontInfo(@PathVariable String teacherId){
    //1.根据讲师id查询讲师基本信息
    EduTeacher eduTeacher = teacherService.getById(teacherId);
    //2.根据讲师id查询讲师的所有课程
    QueryWrapper <EduCourse> wrapper = new QueryWrapper <>();
    wrapper.eq("teacher_id", teacherId);
    List <EduCourse> courseList = courseService.list(wrapper);
    return R.ok().data("teacher",eduTeacher).data("courseList",courseList);
}

2、swagger测试


3、teacher api


api/teacher.js

//根据id获取讲师
getTeacherInfo(teacherId){
    return request({
        url:`/eduservice/teacherfront/getTeacherFrontInfo/${teacherId}`,
        mehtod:'get'
    })
}

4、讲师详情页中调用api


pages/teacher/_id.vue

<script>
import teacherApi from '@/api/teacher'
export default {
    asyncData({ params, error}) {
        //查询讲师详情信息  params.id==this.$route.params.id
        return teacherApi.getTeacherInfo(params.id).then(response=>{
            return{
                teacher:response.data.data.teacher,
                courseList:response.data.data.courseList
            }
        })
    }
};
</script>


5、页面渲染


(1)讲师基本信息模板


<!-- 讲师基本信息 -->
        <section class="fl t-infor-box c-desc-content">
          <div class="mt20 ml20">
            <section class="t-infor-pic">
              <img :src="teacher.avatar">
            </section>
            <h3 class="hLh30">
              <span class="fsize24 c-333" v-if="teacher.level==1">{{teacher.name}}&nbsp;高级讲师</span>
              <span class="fsize24 c-333" v-if="teacher.level==2">{{teacher.name}}&nbsp;特级讲师</span>
            </h3>
            <section class="mt10">
              <span class="t-tag-bg">{{teacher.career}}</span>
            </section>
            <section class="t-infor-txt">
              <p
                class="mt20"
              >{{teacher.intro}}</p>
            </section>
            <div class="clear"></div>
          </div>
        </section>

(2)无数据提示

<!-- /无数据提示 开始-->
<section class="no-data-wrap" v-if="courseList.length==0">
    <em class="icon30 no-data-ico">&nbsp;</em>
    <span class="c-666 fsize14 ml10 vam">没有相关数据,小编正在努力整理中...</span>
</section>

(3)当前讲师课程列表

<article class="comm-course-list" v-if="courseList.length>0">
         <ul class="of">
             <li v-for="course in courseList" :key="course.id">
                 <div class="cc-l-wrap">
                     <section class="course-img">
                         <img :src="course.cover" class="img-responsive" >
                         <div class="cc-mask">
                             <a :href="'/course/'+course.id" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a>
                         </div>
                     </section>
                     <h3 class="hLh30 txtOf mt10">
                         <a :href="'/course/'+course.id" :title="course.title" target="_blank" class="course-title fsize18 c-333">{{course.title}}</a>
                     </h3>
                 </div>
             </li>
       </ul>
    <div class="clear"></div>
</article>

6、页面效果展示


点击讲师列表页面的任意一个讲师,可以进入讲师详情页面


0f85aa54b44f1b1ee65ecbbb7bbd49f7.png


三、课程列表页 - 前后端


1、Controller类


@RestController
@CrossOrigin
@RequestMapping("/eduservice/coursefront")
public class CourseFrontController {
    @Autowired
    private EduCourseService courseService;
    @Autowired
    private EduChapterService chapterService;
    //1.条件查询带分页查询课程
    @PostMapping("getFrontCourseList/{page}/{limit}")
    public R getFrontCourseList(@PathVariable long page, @PathVariable long limit,
                                @RequestBody(required = false)CourseQueryVo courseQueryVo){
        Page <EduCourse> coursePage = new Page <>(page, limit);
        Map <String,Object> map = courseService.getCourseFrontInfo(coursePage,courseQueryVo);
        //返回分页所有数据
        return R.ok().data(map);
    }
}

2、Service类

//条件查询带分页
@Override
public Map <String, Object> getCourseFrontInfo(Page <EduCourse> coursePage, CourseQueryVo courseQueryVo) {
    QueryWrapper <EduCourse> wrapper = new QueryWrapper <>();
    String buyCountSort = courseQueryVo.getBuyCountSort();
    String gmtCreateSort = courseQueryVo.getGmtCreateSort();
    String priceSort = courseQueryVo.getPriceSort();
    String subjectParentId = courseQueryVo.getSubjectParentId();
    String subjectId = courseQueryVo.getSubjectId();
    if(!StringUtils.isEmpty(buyCountSort)){
        if(buyCountSort.equals("1")){//1是降序
            wrapper.orderByDesc("buy_count");
        }else if(buyCountSort.equals("2")){//2是升序
            wrapper.orderByAsc("buy_count");
        }
    }
    if(!StringUtils.isEmpty(gmtCreateSort)){
        if(gmtCreateSort.equals("1")){//1是降序
            wrapper.orderByDesc("gmt_create");
        }else if(gmtCreateSort.equals("2")){//2是升序
            wrapper.orderByAsc("gmt_create");
        }
    }
    if(!StringUtils.isEmpty(priceSort)){
        if(priceSort.equals("1")){//1是降序
            wrapper.orderByDesc("price");
        }else if(priceSort.equals("2")){//2是升序
            wrapper.orderByAsc("price");
        }
    }
    if(!StringUtils.isEmpty(subjectParentId)){
        wrapper.eq("subject_parent_id", subjectParentId);
    }
    if(!StringUtils.isEmpty(subjectId)){
        wrapper.eq("subject_id", subjectId);
    }
    this.baseMapper.selectPage(coursePage, wrapper);
    List <EduCourse> records = coursePage.getRecords();
    long current = coursePage.getCurrent();
    long pages = coursePage.getPages();
    long size = coursePage.getSize();
    long total = coursePage.getTotal();
    boolean hasNext = coursePage.hasNext();
    boolean hasPrevious = coursePage.hasPrevious();
    Map <String, Object> 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;
}

3、使用Swagger测试


4、编写course api

import request from '@/utils/request'
export default {
    //1.条件查询带分页查询课程
    getCourseList(page,limit,searchObj){
        return request({
            url:`/eduservice/coursefront/getFrontCourseList/${page}/${limit}`,
            method:'post',
            data:searchObj
        })
    },
    //2.查询所有课程分类
    getAllSubject(){
        return request({
            url:`/eduservice/subject/getAllSubject`,
            method:'get'
        })
    },
}


相关文章
|
8月前
|
SQL 安全 算法
阿里云OpenAPI 云安全中心-检查项-检查项详情-子项-通过与未通过判断依据是什么呢?好多都看不出来明显的差别?
阿里云OpenAPI 云安全中心-检查项-检查项详情-子项-通过与未通过判断依据是什么呢?好多都看不出来明显的差别?
45 1
|
8月前
|
存储 安全 机器人
如何下载阿里云视频点播数据
如何下载阿里云视频点播(VOD)数据
325 0
|
11月前
|
存储 编解码 安全
阿里云视频点播简介和购买流程
阿里云视频点播是阿里巴巴集团旗下的一项强大的视频云服务,为用户提供在线视频上传、存储、转码、播放等全方位的视频解决方案。作为中国最大的云计算服务提供商,阿里云视频点播在视频领域拥有丰富的技术实力和经验,为用户提供高效、可靠、安全的视频服务。
|
30天前
|
安全 Cloud Native Serverless
阿里云Serverless-课程总结
该课程概括了Serverless的核心概念,强调它是一种云原生开发模型,允许开发者专注于应用本身,无需管理服务器。阿里云提供了如ASK、SAE和FC等Serverless产品。Serverless的优势包括效能提升、安全增强、成本降低和生产力驱动。FaaS是Serverless的一种形态,基于事件驱动。BaaS则通过API调用第三方服务。课程还展示了如何使用函数计算快速搭建AIGC应用,并预告了后续将深入探讨函数计算的相关知识。
37 5
|
1月前
|
应用服务中间件 API 开发工具
阿里云视频点播功能
阿里云视频点播功能
28 0
|
1月前
|
弹性计算 数据库 云计算
阿里云又降价了!2024年3月阿里云核心产品价格全线下调详情
阿里云又降价了!2024年3月阿里云核心产品价格全线下调详情。2024年3月,阿里云宣布了其历史上最大力度的一次降价,其核心产品价格全线下调,平均降幅达到了20%,最高降幅更是高达55%。这次降价从2024年3月1日开始实施,涵盖了100多款产品和500多个产品规格,覆盖了计算、存储、数据库等所有核心产品,如云服务器ECS、对象存储OSS和云数据库RDS等。
172 2
|
1月前
|
弹性计算 安全 数据库
阿里云特惠专区-所有优惠产品官方列表展示 - 活动中心
2024年阿里云优惠活动大全,包括阿里云服务器优惠活动清单、配置价格表、域名优惠活动、阿里云建站活动、阿里云优惠代金券免费领取、对象存储OSS活动、企业邮箱优惠、无影云电脑优惠、CDN特惠等等,阿里云百科分享2024阿里云优惠活动大全_云服务器_域名_代金券免费领取
57 0
|
1月前
|
NoSQL Java 微服务
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)-3
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)
148 1
|
1月前
|
前端开发 NoSQL easyexcel
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)-2
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)
122 0
|
1月前
|
NoSQL 应用服务中间件 对象存储
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)-1
前后端分离项目知识汇总(阿里云Oss,EasyExcel,视频点播,SpringCloud,Redis,Nuxt)
92 0

热门文章

最新文章