一 后端
1 service
接口
/**
* 功能描述:根据讲师id获取讲师详情页数据
*
* @author cakin
* @date 2020/12/18
* @param id
* @return
* @description:
*/
Map<String, Object> selectTeacherInfoById(String id);
实现
/**
* 功能描述:根据讲师id获取讲师详情页数据
*
* @param id 讲师id
* @return Map<String, Object> 封装讲师信息和课程信息
* @author cakin
* @date 2020/12/18
* @description:
*/
@Override
public Map<String, Object> selectTeacherInfoById(String id) {
Teacher teacher = baseMapper.selectById(id);
QueryWrapper<Course> courseQueryWrapper = new QueryWrapper<>();
courseQueryWrapper.eq("teacher_id", id);
List<Course> courseList = courseMapper.selectList(courseQueryWrapper);
Map<String, Object> map = new HashMap<>();
// 讲师信息
map.put("teacher", teacher);
// 课程列表
map.put("courseList", courseList);
return map;
}
2 web层
/**
* 功能描述:获取讲师
*
* @param id 讲师id
* @return R 返回给前端的数据
* @author cakin
* @date 2020/12/18
* @description:
*/
@ApiOperation(value = "获取讲师")
@GetMapping("get/{id}")
public R get(@ApiParam(value = "讲师ID", required = true) @PathVariable String id) {
Map<String, Object> map = teacherService.selectTeacherInfoById(id);
return R.ok().data(map);
}
二 前端
1 api
// 获取讲师
getById(id) {
return request({
url: `/api/edu/teacher/get/${id}`,
method: 'get'
})
}
2 页面脚本
<script>
import teacherApi from '~/api/teacher'
export default {
// asyncData被调用的时候,第一个参数被设定为当前页面的上下文对象
// 使用同步调用
async asyncData(page) {
const response = await teacherApi.getById(page.route.params.id)
return {
teacher: response.data.teacher,
courseList: response.data.courseList
}
}
}
</script>
3 模板部分
<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">
<!-- 讲师基本信息 开始 -->
<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>
<!-- /讲师基本信息 结束 -->
<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>
<!-- 无数据提示 开始-->
<section v-if="courseList.length===0" class="no-data-wrap">
<em class="icon30 no-data-ico"> </em>
<span class="c-666 fsize14 ml10 vam">没有相关数据,小编正在努力整理中...</span>
</section>
<!-- /无数据提示 结束-->
<!-- 课程列表 开始-->
<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"
class="course-title fsize18 c-333">{
{ course.title }}</a>
</h3>
</div>
</li>
</ul>
<div class="clear"/>
</article>
<!-- /课程列表 结束-->
</div>
</section>
</section>
<!-- /讲师介绍 结束 -->
</div>
</template>