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 teacherPage = new Page(page,limit);

        Map map = teacherService.getTeacherFrontList(teacherPage);

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

    }

2、EduTeacherService

接口

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

    Map getTeacherFrontList(Page teacherPage);

实现

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

    @Override

    public Map getTeacherFrontList(Page teacherPage) {

        QueryWrapper wrapper = new QueryWrapper<>();

        wrapper.orderByDesc("id");

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

        baseMapper.selectPage(teacherPage,wrapper);

        long total = teacherPage.getTotal();

        long current = teacherPage.getCurrent();

        List records = teacherPage.getRecords();

        long size = teacherPage.getSize();

        long pages = teacherPage.getPages();

        boolean hasNext = teacherPage.hasNext();

        boolean hasPrevious = teacherPage.hasPrevious();

        Map 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

三、页面渲染

1、无数据提示

添加：v-if="data.total==0"

        

          v-if="data.total==0">

             

            没有相关数据，小编正在努力整理中...

          

2、列表

        

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

            

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

                

                  

                    :title="teacher.name" target="_blank">

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

                    

                  

                  

                    :title="teacher.name" target="_blank" class="fsize18 c-666">{{teacher.name}}

                  

                  

                    {{teacher.intro}}