开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-讲师列表（2）】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11336
讲师管理前端-讲师列表(2)
内容简介：
一、效果初步演示
二、把请求接口获取数据在页面中进行显示
三、最终效果
一、效果初步演示
1、呈现方法
前端代码的完成包括接口，并且我们已经将接口启动了，注意接口中不要忘记添加@CrossOrigin 注解，即跨域注解，这些都准备好之后进行效果的演示。
为了避免前端出现问题，我们先去重启一下，其实前端在改完页面之后理论上不需要重启，但是为了避免出现存在的缓存问题，重启一下比较稳妥。比如说前端中修改了配置文件 index 需要进行重启，修改其他文件不重启也是可以的。
启动后未出现问题，进入到初始界面，把 F12点开之后，因为把 response 也做了输出，即反应的数据。点击讲师列表进入 list 页面，在 list 页面中能够调用，控制台中数据输出了，这就是通过接口返回的数据，通过 console 查看结果，数据是一个对象 object，里面有很多值，其中 rows 是接口的名字。
我们需要得到的是集合的数据，现在数据已经有了，下面把数据取出来。写上 response.data，再点上名字 rows，最终数据就可以得到了，注意名字需要查看代码中的名字。
写法为：this.list=response.data.rows，这样就可以得到集合的数据，因为上面我们定义了一个变量，把数据赋值给list。
若要输出，代码为 console.log(this.list)。在我的变量中还有一个变量 total，这个值应该也做了输出，所以也要把 total 得到，代码为 this.total=response.data.total，
同时通过 console.log(this.total)将 total 输出
完成后重新刷新，查看最终效果，第一个是 rows 中的数据，第二个值为16，表示总记录数。
2、注意问题
在完成过程中会有这么一个小问题，大家可以发现之前在写 Java 代码时，每行代码结束之后需要添加一个分号，如果不加在 Java 中是不正确的，在 JS 里面在每行代码结束之后不添加分号也可以，这是不同的编码风格，在JS里统一不加分号比较好，加了分号容易出错。数据都有之后，最后把数据在页面中写出来，做成列表或者表格形式，
二、把请求接口获取数据在页面中进行显示
1、步骤1
在显示过程中需要使用一个组件——element-ui，这个组件不要求大家会写它的代码，因为它有官方文档，直接复制改成所需的页面即可。
实际工作中可能需要美工去写最终的页面，但现在不需要，直接用组件快速把页面构架出来，通过官方文档改动。网址打开之后，点击组件，查看详情，打开之后发现列出了很多内容，因为需要进行列表显示，所以找到 Table 表格。
点开后配置，可以发现有很多样式的表格，我们可以随意选择
图示包括表头以及具体数据，并且光标移到不同位置会有颜色的变化，这些都是官方自带文档就可以呈现的效果。点击显示代码，并将其复制之后进行修改，第一部分 template 是页面部分，第二次部分是扎所，这里面写的很简单，写入data return(){},然后是 TableData，里面写入的是一些数组。
2、步骤2
Template部分写了具体的结构，首先是ui的标签，标签又叫el-table,在table标签中写入一个结构，：data，表示把值取到，在框架底层会把一些方法进行封装，不需要我们自己再去写，只需要把数据传过来即可。
el-table-column 表示表头的相关列，比如日期姓名地址，显示方式是第一个表示表头的名称，主要应用了 prop，prop 是一个简写，它的全称是 propty 属性，然后属性中加了 data、name、address，把 key 的名字写到 prop 里边，值就可以显示了。
3、总结
data 中加数据的名字，然后要通过 prop 写入具体的值。复制代码并放置在div中，然后进行修改。
4、具体代码
v-loading="listLoading"
:data="list"
element- loading-text="数据加载中"
border
fit
highlight-current-row>
label="序号"
width="70"
align="center">
{{ (page - 1)* limit + scope.$index +1
{{scope.row . leve1==1?"高级讲师":"首席讲师"}}
< / tomplate>
5.代码解释：
:data="list"，表示要得到数据；border、fit、highlight-current-row>表示相关的样式；v-loading="listLoading"表示正在加载中的图标，可以有也可以没有;
等表示具体值，是刚才所没有讲到的，头衔在表里面的level值存的是1和2，但是在显示时不能只显示1、2，需要有具体的名称，
例如1表示高级讲师，2表示首席讲师，因此需要添加，scope表示范围或者域的意思，
{{scope.row . leve1==1?"高级讲师":"首席讲师"}}中scope.row表示每一行的数据，?"高级讲师":和我们之前在Java所学的一样，即三元运算符或者说三元表达式，通过该运算符进行判断。
这个方法学会后，希望大家可以达到举一反一的效果，比如希望通过显示讲师的名称，可以直接通过prop获取，也可以通过和头衔类似的方式获取，但是后者更多的应用于判断。
6、细节讲解
===三个等号也表示判断，它于==两个等号进行判断的区别在于两个等号判断值，三个等号判断类型和值。
举例进行讲解，==1表示判断值，这个一无论是数字1还是字符串1都可以无论类型如何，而===既判断值又判断类型，所以==1和===1所得到的效果是不一样的，使用三个等号进行判断时，可以达到值与类型的完全匹配。
三、最终效果
点击讲师列表，可以看到数据已经存在了，序号、名称、头衔、资历、添加时间和排序的表头也显示出来了。
