一、讲师列表和讲师详情【后端】
分页查询讲师和讲师详情接口
在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"> </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)"><</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)">></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)"> </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 }} {{ 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"> </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