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="//www.greatytc.com/teacher/1" :title="teacher.name" target="_blank">

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

                    </a>

                  </div>

                  <div class="mt10 hLh30 txtOf tac">

                    <a href="//www.greatytc.com/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、测试

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,874评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,151评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,270评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,137评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,116评论 5赞 370
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,935评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,261评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,895评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,342评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,854评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,978评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,609评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,181评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,182评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,402评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,376评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,677评论 2赞 344