一 後端
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>