开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：课程管理-课程列表】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11395
课程管理-课程列表
课程列表显示功能，这个功能和之前说的讲师列表基本上是一样的，
以下如图：
1 |
Java课程 |
已发布 |
编辑课程基本信息 编辑课程大纲 删除 |
2 |
vue课程 |
未发布 |
编辑课程基本信息 编辑课程大纲 删除 |
首先做列表的时候，路由中有一个课程列表，点击课程列表，进入到的是一个列表页面，而在列表页面中做成一个基本效果，先显示列表中的一个具体数据：
第一个是列表序号，第二个是课程名称，第三列是状态，上面加上课程名称和课程状态，最后加一个查询按钮。
在页面的最下面有一个分页条的效果。
最后一栏中可以改课程的基本信息，也可以改课程的大纲。
图示及效果
1、架构
接口
代码如下：
//课程列表基本实现
/TODO 完善条件查询带分页
@GetMapping
public R getCourseList(){List<EduCourse>list=courseService.list(wrapper:null); return R. ok().data("list",list):
- 前端
- 定义 api 方法
//TODO 课程列表
//课程最终发布
getListCourse(){
return request({
url:'/eduservice/course',
method:'get'
})
}
- 页面的部分引入调用
<template>
<div class="app-container">
课程列表
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="courseQuery.name"placeholder="课程名称"/>
</el-form-item>
<el-form-item>
<el-select v-model="courseQuery.status" clearable placeholder="课程状态">
<el-option :value="Normal" label="已发布"/>
<el-option :value="Draft" label="未发布"/>
</el-select>
</el-form-item>
<el-buttontype="primary" icon="el-icon-search"@click="getList()">查询</el-button
<el-button type="default"@click="resetData()">清空</el-button>
</el-form>
<!-- 表格-->
<el-table
:data="list"
border
fit
highlight-current-row>
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{(page-1)*limit+scope.$index+ 1 }}
</template>
</el-table-column>
<el-table-column label="课程状态"width="80">
<template slot-scope="scope">
{{ scope.row.status=== Normal'?'已发布':未发布'}}
</template>
</el-table-column>
<el-table-column prop="lessonNum"label="课时数"/>
<el-table-column prop="gmtCreate" label="添加时间
"width="160"/>
<el-table-column prop="viewCount" label="浏览数量
"width="60"/>
<el-table-column label=”操作” width=“200” align=“center”>
<template slot-scope=”scope”>
<router-link :to=”’/teacher/edit’+scope.row.id”>
<el-button type=”primary ” size=”mini ” icon=”el-icon-edit”>编辑课程基本信息</el-button>
<router-link >
<router-link :to=”’/teacher/edit’+scope.row.id”>
<el-button type=”primary ” size=”mini ” icon=”el-icon-edit”>编辑课程大纲信息</el-button>
<router-link >
<el-button type=”danger” size=”mini ” icon=”el-icon-delete” @click=”removeDataById(scope.row.id)”>
删除</el-button>
</template>
</el-table-column>
</el-table>
最后演示效果：
打开课程列表则显示效果。
