开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师详情前端】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11472
讲师详情前端
前端显示代码整合
在 teacher.js 中定义一个方法：
//讲师详情的方法
getTeacherInfo(id){
return request({
url:`/eduservice/teacherfront/getTeacherFrontInfo/${id}`,
method:‘get’
})
}
定义后在页面做一个调用实现功能，首先第一部分已经实现了点击名师中的任意讲师，会在上方显示出讲师 id
所以在页面中的做法就是得到id值，然后调用接口查询。
动态路由，详情是在动态页面，所以在_id.vue中输入代码，找到代码 export default{}，首先先引入代码，在代码 export default{}上方输入:
import teacherApi from ‘@/api/teacher’
之后在里面写入结构，此处使用异步调用方法，输入
asyncData({params,error}){
return teacherApi.getTeacherInfo(params.id) //调用方法teacherApi，前面加上return，使用params.id获取路径id值
}
此处需要注意 params 是参数值，但是id不能随便写
页面在_后是 id，所以写 id，要与_后的名字相同。
假如文件名为_vid.vue，此处 params.id就要写为 params.vid
得到之后，
继续输入代码：
.then( response => {
return {
teacher: response.data.data.teacher,
courseList: response.data.data.courseList//取到两个数据，分别赋值
}
})
}
数据可以通过调用获取到，最后再来实现显示功能，首先第一步是讲师基本信息，teacher 使用插值表达式。
修改讲师头像代码：
将代码
<img src=”~/assets/photo/teacher/1442297885942.jpg”>
修改为
<img :src=”teacher.avatar”>
修改讲师名称代码，此处存在讲师名称和高级讲师，在之前表中存为1和2，所以需要v-if做一个判断，显示不同的值
<span class="fsize24 c-333">{{teacher.name}}
{{ teacher.level==1?'高级讲师':'首席讲师' }}
修改讲师简介代码：
<span class="t-tag-bg" >{{teacher.intro}}</span>
修改讲师资历代码，使用插值表达式
<р
class="mt2Ø">{{teacher.career}}</p>
修改完后，以上就能显示出讲师的基本信息，包括名称头像等
接下来将课程做一个显示，与讲师同样，
修改代码：
首先需要做判断，在 courseList 中是否有相关数据
在“无数据提示，开始”代码中修改
<section class="no-data-wrap” v-if="courseList.length==0">
//通过 length 判断是否有值，如果数据=0就显示没有相关数据的内容，如果不等于0，再做遍历
删除掉其余<li>，保留一个<li>做遍历，修改代码为：
<li v-for="course in courselist" :key="course.id">
遍历之后通过course取到里面的每一个值，首先第一个值是课程封面
将课程封面代码修改为<img :src=”course.cover” class=”img-responsive”>
第二个值是课程名称，将课程名称代码修改为
<a href=”#” :title=”course.title” target=”_blank” class=”course-title fsize18 c-333”>{{course.title}}</a>
以上就做到了在讲师详情页面中有讲师的基本信息，有讲师所讲课程，课程没有数据显示无数据提示，有数据遍历。
最终来测试一下功能，启动 TeacherFrontController.java，启动之后，打开页面重新刷新，点击名师，点击某一个讲师打开详情页，例如点开第一个
可以看到课程信息不存在，显示出基本信息
目前所有课程应该都为空，为了显示效果，此处为第一个讲师1122224444手动增加一个课程，在表中复制该讲师的 id，如图
接着打开课程表 edu_course 手动加入，将前四个课程的讲师 id 改为复制的 id
接着再来查看效果，刷新，进入页面，点击名师到列表中，点击第一个讲师，此时如图，有基本信息和课程信息。
