day14【首页课程和名师功能】-01 首页名师功能

01-名师页面静态效果整合

一、列表页面

创建 pages/teacher/index.vue

二、详情页面

创建 pages/teacher/_id.vue

修改资源路径为~/assets/


02-讲师列表页

一、后端

1、TeacherFrontController

//1 分页查询讲师的方法

    @ApiOperation(value = "分页讲师列表")

    @PostMapping("getTeacherFrontList/{page}/{limit}")

    public R getTeacherFrontList(@PathVariable long page,@PathVariable long limit){

        Page<EduTeacher> teacherPage = new Page<EduTeacher>(page,limit);

        Map<String,Object> map = teacherService.getTeacherFrontList(teacherPage);

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

    }

2、EduTeacherService

接口

//1 分页查询讲师的方法

    Map<String, Object> getTeacherFrontList(Page<EduTeacher> teacherPage);

实现

//1 分页查询讲师的方法

    @Override

    public Map<String, Object> getTeacherFrontList(Page<EduTeacher> teacherPage) {

        QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();

        wrapper.orderByDesc("id");

        //把分页数据封装到pageTeacher对象

        baseMapper.selectPage(teacherPage,wrapper);


        long total = teacherPage.getTotal();

        long current = teacherPage.getCurrent();

        List<EduTeacher> records = teacherPage.getRecords();

        long size = teacherPage.getSize();

        long pages = teacherPage.getPages();

        boolean hasNext = teacherPage.hasNext();

        boolean hasPrevious = teacherPage.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测试

二、前端列表js

1、创建api

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

import request from '@/utils/request'

export default {

    //1 分页查询讲师的方法

    getTeacherList(page, limit){

        return request({

            url: `/eduservice/teacherfront/getTeacherFrontList/${page}/${limit}`,

            method: 'post'

        })

    }

}

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

pages/teacher/index.vue

<script>

import teacherApi from '@/api/teacher' 

export default {

  //asyncData异步调用,只调用一次

  //params:相当于之前的this.$route.params.id 等价 params.id

  //error表示错误信息

  asyncData({ params, error }) {

    return teacherApi.getTeacherList(1,8)

                      .then(response=>{

                        //response.data.data得到的就是map集合

                        //return { data:response.data.data } 与在data中声明是一样的

                        return { data:response.data.data }

                      })

  }

};

</script>

三、页面渲染

1、无数据提示

添加：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>

2、列表

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

          <article v-if="data.total>0" class="i-teacher-list">

            <ul class="of">

              <li v-for="teacher in data.items" :key="teacher.id">

                <section class="i-teach-wrap">

                  <div class="i-teach-pic">

                    <a href="/teacher/1" :title="teacher.name" target="_blank">

                      <img :src="teacher.avatar" :alt="teacher.name">

                    </a>

                  </div>

                  <div class="mt10 hLh30 txtOf tac">

                    <a href="/teacher/1" :title="teacher.name" target="_blank" class="fsize18 c-666">{{teacher.name}}</a>

                  </div>

                  <div class="hLh30 txtOf tac">

                    <span class="fsize14 c-999">{{teacher.intro}}</span>

                  </div>

                  <div class="mt15 i-q-txt">

                    <p class="c-999 f-fA">{{teacher.career}}</p>

                  </div>

                </section>

              </li>

            </ul>

            <div class="clear"></div>

          </article>

3、测试

四、分页

1、分页方法

<script>

import teacherApi from '@/api/teacher' 

export default {

  //asyncData异步调用,只调用一次

  //params:相当于之前的this.$route.params.id 等价 params.id

  //error表示错误信息

  asyncData({ params, error }) {

    return teacherApi.getTeacherList(1,8)

                      .then(response=>{

                        //response.data.data得到的就是map集合

                        //return { data:response.data.data } 与在data中声明是一样的

                        return { data:response.data.data }

                      })

  },

  methods:{

    gotoPage(page){

      teacherApi.getTeacherList(page,8)

                  .then(response=>{

                    //response.data.data得到的就是map集合

                    //return { data:response.data.data } 与在data中声明是一样的

                    // return { data:response.data.data }

                    this.data = response.data.data

                  })

    }

  }

};

</script>

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>

        <!-- 公共分页 结束 -->

3、测试


03-讲师详情页

一、后端

1、修改讲师列表页面超链接，改成讲师id

2、编写讲师详情接口

(1)根据讲师id查询讲师基本信息

(2)根据讲师id查询讲师所讲课程

    @ApiOperation(value = "根据ID查询讲师")

    @GetMapping("getTeacherFrontInfo/{teacherId}")

    public R getTeacherFrontInfo(@PathVariable String teacherId){

        //(1)根据讲师id查询讲师基本信息

        EduTeacher teacher = teacherService.getById(teacherId);


        //(2)根据讲师id查询讲师所讲课程

        QueryWrapper<EduCourse> wrapper = new QueryWrapper<>();

        wrapper.eq("teacher_id",teacherId);

        //按照最后更新时间倒序排列

        wrapper.orderByDesc("gmt_modified");

        List<EduCourse> courseList = courseService.list(wrapper);

        return R.ok().data("teacher", teacher).data("courseList", courseList);

    }

3、swagger测试

二、前端详情js

1、teacher api

//讲师详情的方法

    getTeacherInfo(teacherId){

        return request({

            url: `/eduservice/teacherfront/getTeacherFrontInfo/${teacherId}`,

            method: 'get'

        })

    }

2、讲师详情页中调用api

<script>

import teacherApi from '@/api/teacher' 

export default {

  asyncData({ params, error }) {

    return teacherApi.getTeacherInfo(params.id) //params.id 中的id必须与文件名_id一致

                     .then(response=>{

                       return {

                             teacher: response.data.data.teacher,

                             courseList: response.data.data.courseList

                       }

                     })

  }

};

</script>

三、页面渲染

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">{{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>

          </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">

            <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>

          <!-- /课程列表 结束-->

4、测试

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。