42.首页讲师功能

一、讲师列表和讲师详情【后端】

分页查询讲师和讲师详情接口

在controller/front文件夹下创建TeacherFrontController类

@RestController
@RequestMapping("/eduservice/teacherfront")
@CrossOrigin
public class TeacherFrontController {
    @Autowired
    private EduTeacherService teacherService;

    @Autowired
    private EduCourseService courseService;

    //1 分页查询讲师的方法
    @PostMapping("getTeacherFrontList/{page}/{limit}")
    public R getTeacherFrontList(@PathVariable long page,@PathVariable long limit) {
        Page<EduTeacher> pageTeacher = new Page<>(page, limit);
        Map<String,Object> map = teacherService.getTeacherFrontList(pageTeacher);

        //返回分页所有数据

        return R.ok().data("map",map);
    }

    //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);
    }
}
View Code
在EduTeacherServiceImpl中实现getTeacherFrontList方法
//1 分页查询讲师的方法(另一种写法，需要全部分页数据)
    @Override
    public Map<String, Object> getTeacherFrontList(Page<EduTeacher> pageParam) {
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.orderByDesc("id");
        baseMapper.selectPage(pageParam,wrapper);

        List<EduTeacher> records = pageParam.getRecords();
        long current = pageParam.getCurrent();
        long pages = pageParam.getPages();
        long size = pageParam.getSize();
        long total = pageParam.getTotal();

        boolean hasNext = pageParam.hasNext();//是否有下一页
        boolean hasPrevious = pageParam.hasPrevious();//是否有上一页


        //把分页数据获取出来，放到map集合
        Map<String, Object> map = new HashMap<String, Object>();
        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);

        //返回map
        return map;
    }
View Code

二、整合前端分页查询讲师页面【前端】

1、前端列表js

1.1、创建api

创建文件夹api，api下创建teacher.js，用于封装讲师模块的请求
import request from '@/utils/request'
export default {
    //分页讲师查询的方法
    getTeacherList(page,limit) {
        return request({
            url: `/eduservice/teacherfront/getTeacherFrontList/${page}/${limit}`,
            method: 'post'
        })
    },

    //分页讲师查询的方法
    getTeacherInfo(id) {
        return request({
            url: `/eduservice/teacherfront/getTeacherFrontInfo/${id}`,
            method: 'get'
        })
    }
}
View Code

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

pages/teacher/index.vue
<script>
import teacher from "@/api/teacher"
export default {
  asyncData({ params, error }) {
    return teacher.getTeacherList(1, 8).then(response => {
      console.log(response.data.data);
      return { data: response.data.data.map }
    });
  },
};
</script>
View Code

2、页面渲染

2.1、页面模板

<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <section class="c-sort-box unBr">
        <div>
          <!-- 无数据提示 开始-->

          <!-- /无数据提示 结束-->

          <!-- 数据列表 开始-->

          <!-- /数据列表 结束-->
        </div>
        <!-- 公共分页 开始 -->

        <!-- /公共分页 结束 -->
      </section>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>
View Code

2.2、无数据提示

添加：v-if="data.total==0"
<!-- /无数据提示 开始-->
<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>
<!-- /无数据提示 结束-->
View Code

2.3、列表

<!-- /数据列表 开始-->
<article v-if="data.total>0" class="i-teacher-list">
    <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">
                        <img :src="item.avatar" :alt="item.name" height="142" hright="142">
                    </a>
                </div>
                <div class="mt10 hLh30 txtOf tac">
                    <a :href="'/teacher/'+item.id" :title="item.name" class="fsize18 c-666">{{ item.name }}</a>
                </div>
                <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999" >{{ item.career }}</span>
                </div>
                <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">{{ item.intro }}</p>
                </div>
            </section>
        </li>
    </ul>
    <div class="clear"/>
</article>
<!-- /数据列表 结束-->
View Code

3、分页

3.1、分页方法

methods: {
    gotoPage(page){
        teacher.getTeacherList(page, 8).then(response => {
            this.data = response.data.data.map
        })
    }
}
View Code

3.2、分页页面渲染

<!-- 公共分页 开始 -->
<div>
  <div class="paging">
    <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
    <a
      :class="{undisable: !data.hasPrevious}"
      href="#"
      title="首页"
      @click.prevent="gotoPage(1)">首</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>
<!-- 公共分页 结束 -->
View Code

三、整合前端讲师详情页面【前端】

1、前端详情js

1.1、teacher api

api/teacher.js   上面已经定义好

1.2、讲师详情页中调用api

pages/teacher/_id.vue
<script>
import teacherApi from '@/api/teacher'
export default {
  asyncData({ params, error }) {
    //params：相当于之前this.$route.params.id 等价 params.id
    return teacherApi.getTeacherInfo(params.id)
      .then(response => {
        return { 
          teacher: response.data.data.teacher,
          courseList: response.data.data.courseList 
        }
    })
  }
};
</script>
View Code

2、页面渲染

2.1、讲师基本信息模板

<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师介绍 开始 -->
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">讲师介绍</span>
        </h2>
      </header>
      <div class="t-infor-wrap">
        <!-- 讲师基本信息 开始 -->

        <!-- /讲师基本信息 结束 -->
        <div class="clear"/>
      </div>
      <section class="mt30">
        <div>
          <header class="comm-title all-teacher-title c-course-content">
            <h2 class="fl tac">
              <span class="c-333">主讲课程</span>
            </h2>
            <section class="c-tab-title">
              <a href="javascript: void(0)">&nbsp;</a>
            </section>
          </header>
          <!-- 无数据提示 开始-->

          <!-- /无数据提示 结束-->

          <!-- 课程列表 开始-->

          <!-- /课程列表 结束-->
        </div>
      </section>
    </section>
    <!-- /讲师介绍 结束 -->
  </div>
</template>
View Code

2.2、讲师详情显示

<!-- 讲师基本信息 开始 -->
<section class="fl t-infor-box c-desc-content">
    <div class="mt20 ml20">
        <section class="t-infor-pic">
            <img :src="teacher.avatar" :alt="teacher.name">
        </section>
        <h3 class="hLh30">
            <span class="fsize24 c-333">{{ teacher.name }}
                &nbsp;
                {{ teacher.level===1?'高级讲师':'首席讲师' }}
            </span>
        </h3>
        <section class="mt10">
            <span class="t-tag-bg">{{ teacher.intro }}</span>
        </section>
        <section class="t-infor-txt">
            <p class="mt20">{{ teacher.career }}</p>
        </section>
        <div class="clear"/>
    </div>
</section>
<!-- /讲师基本信息 结束 -->
View Code

2.3、无数据提示

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

2.4、当前讲师课程列表

<!-- 课程列表 开始-->
<article class="comm-course-list">
  <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"/>
</article>
<!-- /课程列表 结束-->
View Code

 

posted @ 2021-04-15 01:31  记录人生  阅读(65)  评论(0)  编辑  收藏  举报