开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：课程管理-课程大纲列表（前端）】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11377
课程管理-课程大纲列表（前端）
内容介绍
一、手动构建数据
二、添加数据后的测试结果
三、前端实现思路
四、api部分
五、页面部分
一、手动构建数据
先手动构建一些数据，因为还没有学习到添加，等到做完添加之后再
进行完整测试。
1.构建 edu_course 课程表数据
此时 edu_course 中有一个 id 为18的课程用作测试。
2.构建 edu_course 章节表数据
除了课程之外同时 edu_chapter 章节表中因为有课程 id，所以有多
个数据，保留两个将有效果的留下两个 course_id 为18的。
为了测试方便将两个 course_id为18的id一个改为11一个改为12。
最后将其 refresh 刷新，更改完成之后，再构建章节中的小节。
3.构建 edu_video 小节表数据
将 course_id 对应为18的两个 chapter 改为11和12。同时再更改
一个新的18的课程,id 为21,chapter-id 为11.
（更改前）
（更改后）
点击r efresh 更新，显示更改后的结果。
接下来查询课程id为18的课程，在18课程中，刚才构建出了有两
个章节，同时在小节中还有对应的章节，这就是我们需要获得的数据。
二、添加数据后的测试结果
构建之后启动服务器，查看最终的结果如何，即查看封装过程，当然
在 Controller 上面要加上跨域注解，之后进行添加。
启动成功后，打开新标签页，输入网址：http://localhost8001/sw
agger-ui.html 使用 swagger 测试。打开第一个edu-chapter-contr
oller，点击刚才写的，得到章节小节的列表。
在测试位置，输入刚才手动构建的条件课程id：18，点击 Tryito
ut!再下方的 ResponseBody中查看结果。在结果中 allchaptervid
eo表示名字，其中为数组形式。
同时其中有两个对象。在第一个对象中章节就是第七章这个值，在 c
hildren 中有两个小节。此时显示出的数据与之前的一二级分类一致，
每个章节中有对应的小节，章节中用 children 代表其中的小节，每
个小节中可以有一个或多个，甚至是没有。到此关于数据的封装接口
部分就全部完成，根据两个操作，同学自行熟悉过程，包括课程分类
列表和课程大纲列表都是这种封装思想。
ResponseBody 代码如下：
{
"success"":true,
"code":22000,
"message"":“成功”，
"data":{
//表示名字
"allchaptervideo":[//其中为一个数组形式
//第一个对象
{
"id":"11"",
//表示章节
"title":“第七章:I/0流”,
"children":[//其中的小节
{
"id":"19,
“title":“第三节:string类”
},
//第二个对象
{
"id"":“21",
"title”:"111000”
“id":"12"",
//表示章节
"title":“第一章:java入门",
"children"":[//其中的小节
“id”":"20",
“title":“第四节:程序风格"
完成后，进行前端部分整合。首先在 EduChapterController 中26行
代码添加跨域注解：@CrossOrigin
三、前端实现思路
查看课件01-课程大纲列表显示的前端部分，要实现前端部分有两种
方式，第一种按照之前课程分类列表的方式写个树形结构显示，可以
做到。
另一方式两者原理一致，因为在之前做树形结构中里面许多数据都做
了封装，只需要将其传穿个值即可，其中如何做到并不需要关心。在
此处我们从底层做起，将其自己做个显示。
1.定义 api
chapter.js
代码如下
importrequestfron"@/utils/request'
constapi_name="/admin/edu/chapter'
exportdefault{
getNestedTreeList(courseId){
returnrequest({
url:`${api_name}/nested-list/${courseId),
method:‘get’
2.定义组件脚本
(1)定义data
courseId:”',//所属课程
chapterNestedList:[]//章节嵌套课时列表
(2)created 中调用 init 方法
created(){
console.log('chaptercreated')
this.init()
(3)定义相关 methods 获取章节和课时列表
init(){
if(this.Sroute.params8&this.$route.params.Id){
this.courseId=this.$routeparams.Id
//根据 id 获取课程基本信息
this.fetchChapterNestedListByCourseId()
之前都是些查询的部分，主要看课件中定义组件模板。在此使用<ul
<li这个列表标签来实现。
在标签中做到遍历每一个章节，再在章节中遍历每一个小节。相比之
前方式，第二种方式就是使用<ur<li列表标签来实现列表的创建，
可以理解为是之前做树形结构的一个过程。包括之中的v-for后遍历
的章节和小节。
3.定义组件模板
<el-buttontype-"text">添加章节</el-button>
<!--章节-->
//使用<ul
<ulclass="chanpterList">
//<li列表标签来创建列表
<li
//先遍历章节
v-for="chapterinchapterNestedList"
:key="chapter.Id">
<p>
{{chapter.title}}
<spanclass="acts">
<el-buttontype="text">添加课时</el-button>
<el-buttonstyle=""type="text">编辑</el-button>
<el-buttontype="text">删除</el-button>
</span)
</p>
<!--视频-->
//再遍历章节中的每一个小节
<el-buttontype-"text">编辑</el-button>
<el-buttontype-"text">删除</el-button>
四、api 部分
1.在 api 中给方法做定义-chapter.js 部分
首先做一个准备，在api中将方法先定义。创建 chapter.js 借鉴 co
urse.js 中的代码复制过来进行更改。
chapter.js 代码
importrequestfrom'@/utils/request'
exportdefault{
//1根据课程 id 获取章节和小节数据列表
//方法名叫 getAllChapterVideo,传入参数名 courseId 课程 id
getAllChapterVideo(courseId){
returnrequest({
//接口地址：/eduservice/course，后面加上getChapterVideo｛c
ourseId｝传入课程id，可加大括号使用表达式写法，也可直接使用
字符串的拼接，在此使用字符串拼接形式。
url:'/eduservice/course/getChapterVideo/'+courseId,
//提交方式为get提交
method:'get'
//无需额外参数
五、页面部分
之后来到课程大纲的 chapter.vue 页面中，做最终的调用，把列表实
现出来。
1.引入chapter
首先在chapter.vue23行代码处引入chapter，同时加上它的地址。
代码如下：
importchapterfrom’@/api/edu’
2.定义方法
引入之后再method中定义方法
代码如下：
//根据课程id查询章节和小节
getChapterVideo(){
//chapter中的getAllChapterVideo方法，id为形参
chapter.getAllChapterVideo(id)
then(response=>{//response+箭头头函数
//通过response.data.名称将allChapterVideo数据得到，最后th
is做一个赋值
This.chapterVideoList=response.data.allChapterVideo
3.对变量做赋值
在chapter.vue中26行代码data()中对变量做定义。之后再返回m
ethod的定义方法getChapterVideo()中做赋值。
代码如下（红色部分为添加）：
exportdefault{
data(){
return{
saveBtnDisabled:false,
//为一个数组类型
chapterVideoList:[]
4.在created中做调用
写完方法后，在chapter.vue32行代码created中做调用
代码如下：
created(){
//根据课程id查询章节和小节
This.getChapterVideo()
},
到此基本框架完成。
5.总结
在前端中首先建一个chapter页面，其中定义接口的方法。定义后在
chapter.vue页面中先引入，再调接口的方法，得到结果最终作做赋
值，在created()里面作调用。因为当一进入页面方法就要执行，得
到数据。
6.小问题
全部完成后，在methods的getChapterVideo（）方法中chapter.g
etAllChapterVideo(id)需要传入课程id，还未实现。而在第一步加
完课程信息之后，添加成功的页面的路由上面，显示的值就是课程i
d，所以只需要在页面中将这个值得到，最后传给形参id即可。
包括在info.vue页面代码添加的时候，其中的saveOrUpdate()方法
中，186行代码就已经将这个id值返回了。我们的做法是在chapte
r.vue页面中将info.vue页面的值取出然后传过去。
（1）赋初始值
在chapter.vue代码中的data（）为课程id赋初始值。
代码如下（红色部分为添加）：
exportdefault{
data(){
return{
saveBtnDisabled:false,
courseId:’’,//课程id
chapterVideoList:[]
}
（2）定义方法
created({
//获取路由的id值
if(this.$route.params&&this.$route.params.id){
//将路由id值取出赋给id
this.courseIdthis.$route.params.id
//最后调用方法实现
//根据课程id查询章节和小节
This.getChapterVideo()
)
（3）将 method 中 getChapterVideo()的课程 id 传入
代码如下：
//根据课程 id 查询章节和小节
getChapterVideo(){
//chapter中的getAllChapterVideo方法，id为形参
//将课程id值传入
chapter.getAllChapterVideo(this.courseId)
.then(response=>{//response+箭头头函数
//通过 response.data.名称将 allChapterVideo数据得到，最后th
is做一个赋值
This.chapterVideoList=response.data.allChapterVideo
到此前端就将数据得到了。
（4）总结
先看路由中有无id值，即页面网址最后显示的数字，如：http:/fl
ocalhost:9528/#/course/chapter/123464788957445477中的12346
4788957445477。通过路由参数汲取的方式，取完之后调用方法
This.getChapterVideo()，将值传至 getChapterVideo()方法中做个
显示即可。
