开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加课程信息前端完善（显示讲师) 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11371
课程管理-添加课程信息前端完善（显示讲师)
内容介绍
一、本章大纲
二、讲师下拉列表
三、图表解析
四、结果展示
五、功能测试
一、本章大纲
三大完善
本章对完善添加信息进行讲解。
1.把讲师和分类使用下列列表显示
首先完善第一部分，从课程表中我们可以看到有两个 id 字段:teacher_id（讲师 id ）和 subject_id（课程分类 id），现在将课程所属讲师和课程所属分类添加进去。
其中讲师和分类使用下列列表显示，课程分类要做成二级联动效果。
同时每个课程都对应着课程封面（如下图），所以还应该在里面添加一个课程封面。
3.添加简介样式
第三部分做功能的一些优化-课程简介。现简介功能太过单调，可以丰富一些。如：添加字体样式，添加图片和图标等。
l 举例：飞秋
在飞秋中，我们打开对话框任意写一段文字。可以改变该聊天字体的颜色，大小和样式，包括在其中插入图片等，在此需要使用组件-富文本编辑器，它用来满足以上功能-添加图片或者文字的各种效果等等。
4.总结
完善的三大部分为：
1.把讲师和分类使用下列列表显示，课程分类要做成二级联动效果。
2、做一个课程的封面上传。
3.将课程简介上能够具有样式，换成一个富文本编辑器。其中在课件中都有相关的内容完善过程。
二、讲师下拉列表
首先来实现讲师下拉列表部分。
1. 分析
（1）首先要完成此部分并不只单纯输入，而是要含有下拉列表的形式。形如Element 的 Form 表单中，行内表单一栏中的区域一和区域二（如图）。
点击展开代码可以得到要实现该处下拉列表所需要的中心代码。在使用过程中，使用结构大致为：el-form 中包含 el-select 其中又有 el-option。
同时主要内容都包含在option中。如：<el-option label="区域一" value="shanghai"></el-option>和<el-option label="区域二" value="beijing"></el-option>就构成了，下拉列表中的区域一和区域二。其中的值label就是显示的下拉列表的值。
另外 value 才是选择之后真正提交的值，如：我们选择区域一后再点击查询，我们提交的是区域一所对 value 值 shanghai，而并不是区域一。
同理当我们选择区域二时，提交所对 value 值 beijing。同时在之后课程中，我们并非设置固定的 value 值，而是通过从数据库中查找后使用 v-for 遍历显示。以上就是下拉列表的实现。
(2)表单下拉列表代码示例：
<el-form-item label="活动区域">
<el-selectv-model="formInline.region"placeholder="活动区域">
<el-option label="区域一" value="shanghai">
</el-option>
<el-option label="区域二" value="beijing">
</el-option>
</el-select>
</el-form-item>
2. 组件模板
(1) 从代码可知，与刚才的代码一致 el-form 中包含 el-select 其中又有 el-option。同时在 el-option 中还有使用 v-for 遍历数据，teacherList 为接口还有教师 id 和名称，以及最后真正提交的 value 值。
l 代码如下：
<! --课程讲师 -->
<el-form-item label=“课程讲师">
<el-select
v-model="courseInfo.teacherId"
placeholder=“请选择">
<el-option
v-for="teacher in teacherList" //v-for遍历数据，teacherList为接口
:key="teacher.id" //教师id
:label="teacher.name" //教师名称 ，label为显示的值
: value="teacher.id" /> //value值，真正要提交的值
</el-select>
</el-form-item>
将代码放入 info 页面的<! --课程讲师 TODO -->版块中。
之后我们通过接口把数据库中的所有讲师做个返回，使用 v-for 做个遍历显示，将所有的讲师显示出来。
l 讲师下拉列表代码如下：
<! --课程讲师 TODO -->
<! --课程讲师 -->
<el-form-item label=“课程讲师">
<el-select
v-model="courseInfo.teacherId"
placeholder=“请选择">
<el-option
v-for="teacher in teacherList" //v-for遍历数据，teacherList为接口
:key="teacher.id" //讲师id
:label="teacher.name" //讲师名称 ，label为显示的值
: value="teacher.id" /> //value值，真正要提交的值
</el-select>
</el-form-item>
3. 接口选择
(1)要查看所有讲师查询的接口，即为之前课程中写的第一个接口
只需点击 java 包的 controlle r中 EduTeacherController，就可以找
到。
同时在制作下拉列表显示要注意调用接口时，是查询所有讲师数据的接口，而并非分页查询讲师的方法。因为在下拉列表中是无法分页的。
l 代码如下：
//1查询讲师表所有数据
//rest 风格
@ApiOperation(value =“所有讲师列表")
GetMapping("findAll")
public R findAllTeacher() {
//调用 service 的方法实现查询所有的操作
List<EduTeacher> list = teacherService.list( wrapper: null);
return R.ok() .data("items",list) ;
4.api 中的方法体-查询所有讲师
（1）在 api 中确定方法
按照逻辑，先在 api 中确定方法体-查询所有讲师，用于课程的显示。方法名为getListTeacher(),其中不包含参数，因为表示为所有。借鉴-1.添加课程信息的接口结构。
根据 EduTeacherController 代码中得到接口路径 url: ' / eduservice/course/ addCourseInfo',和为 get 提交方式，最后因为没有参数，再去掉参数data。
l course.js 代码如下：
import request from ‘@/utils/request’
export default {
//1 添加课程信息
addCourseInfo(courseInfo) {
return request( {
url: ' / eduservice/course/ addCourseInfo',
method:' post ',
data:courseInfo
})
},
//2查询所有讲师
getListTeacher() { //无参数，因为是查询所有
return request({
url: '/ eduservice/teacher/ findAll' , //接口路径+名称
method: 'get' //提交方式为get提交
//删除最后的，因为没有参数
})
（2）获取接口路径 url 和名称，方法 method
在 EduTeacherController 中的代码可以知道
接口路径为：@RequestMapping(“/eduservice/teacher")中的/eduservicc/teacher，叫做 findAll，最后我们采用复制粘贴的形式放入防止出错。
l EduTeacherController 代码如下：
@Api(description="讲师管理")
@RestController
@RequestMapping('eduservice/teacher") //获得接口路径
@CrossOrigin
public class EduTeacherController {
//访问地址:
http://localhost:8001/eduservice/teacher/findAll
//把service注入
@Autowired
private EduTeacherService teacherService;
//1查询讲师表所有数据
//rest风格
@ApiOperation(value =“所有讲师列表")
@GetMapping("findAll") //获得名称
public R findAllTeacher() {
//调用service的方法实现查询所有的操作
List<EduTeacher> list = teacherService.list( wrapper: null) ;
return R.ok() . data("items",list) ;
}
5.在页面中
（1）添加调用方法的代码
在api中写完方法后来到页面(info.vue)中，在此进行调用做个显示。在info.vue的77行代码-90行代码中进行添加调用方法的代码。
l 代码如下（红色部分为添加代码）：
methods:{
//查询所有的讲师
getListTeacher( {
course.getListTeacher( //调用course里面的方法得到所有讲师
.then( response => { //加上.then和response箭头函数
response.data.items //通过response将这个值得到
//.后为介绍时所取的名字
在EduTeacherController代码---//1查询讲师表所有数据中可得到，最后return命名的data名称-items，根据自己命名的名称输入。
})
},
saveOrUpdate() {
course.addCourseInfo( this.courseInfo)
.then( response .=>{
//提示
this.$message({
type:' success',
message: '添加课程信息成功!'
});//跳转到第二步this.$router.push({path:'/course/chapter/'+response.data.courseId})
})
（2）对变量作封装
l 之后我们再对变量作封装，变量就叫做 teacherList，为一个数组形式。在info.vue 的59-75行代码添加封装代码。
代码如下（红
色部分为添加代码）：
import course from '@/ api/ edu/ course'
export default {
data() {
return {
saveBtnDisabled:false,
courseInfo:{
title: ' ',
subjectId: ' ',
teacherId: ' ',
lessonNum: 0,
description: ' ',
cover: ' ',
price: 0
},
teacherList:[]//用于封装所有讲师的数据
（3）添加赋值
同时在83行代码中做一个赋值
l 代码如下：
this.teacherList = response.data.items。
（4）添加调用
在info.vue的75-77行代码的 created()中添加调用，因为第一次进入页面需要查询所有的讲师，初始化所有讲师即可。之后就可以逐一遍历实现所有。
l 代码如下（红色为添加代码）：
created(){
//初始化所有讲师
this.getListTeacher()
（5）总结
到此大体思路为：course.js 里面定义方法，info.vue 页面中定义调用，最后再在created()里面初始化一下即可。
（6）注意
同时我们在书写时要注意不要将定义封装的变量写到 courseInfo 里面去，因为courseInofo 里面是另一个表单对象，要将其写在 courseInfo 的外部，才是正确的。写完后在集合数组叫 teacherList，即页面代码的27行使用 v-for 在 option 中实现遍历，label 为显示的值-teacher 的 name，value 为传入的值-表中取的 id值，:key 表示唯一标识。最后就会遍历出所有的结果，在页面中显示出所有讲师的下拉列表。
三、图表解析
主体即以下两部分代码。
下拉列表显示所有讲师
1.
<! --课程讲师 -->
<el-form-item label=“课程讲师">
<el-select
v-model="courseInfo.teacherId"
placeholder=“请选择">
<el-
v-for="teacher in teacherList"
:key="teacher.id"
:label="teacher.name"
: value="teacher.id" />
</el-select>
</el-form-item>
2.
created(){
//初始化所有讲师
this.getListTeacher()
},
methods:{
//查询所有的讲师
getListTeacher( {
course.getListTeacher(
.then( response => {
this.teacherList = response.data.items
四、结果展示
基于前端页面都已经成型，我们来到页面中点击添加课程，由其中的课程讲师，可以看出此时可以任意选择一名讲师，而当我们选择讲师之后，提交的是讲师所对应的 id 而并非名称，即 value 值。
五、功能测试
我们添加一个数据，选择课程讲师王五，编辑课程标题：测试讲师下拉列表，设置总课时为10，简介11，价格为10。全部设置完成后点击保存并下一步，提示完成后。
刷新表内的信息，对时间做排序，找到刚刚添加的数据，就可以发现讲师 id 被传入成功，之前未添加的为空。
