课程管理-课程列表 | 学习笔记

开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：课程管理-课程列表】学习笔记，与课程紧密连接，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/667/detail/11395

课程管理-课程列表

课程列表显示功能，这个功能和之前说的讲师列表基本上是一样的，

以下如图：

首先做列表的时候，路由中有一个课程列表，点击课程列表，进入到的是一个列表页面，而在列表页面中做成一个基本效果，先显示列表中的一个具体数据：

第一个是列表序号，第二个是课程名称，第三列是状态，上面加上课程名称和课程状态，最后加一个查询按钮。

在页面的最下面有一个分页条的效果。

最后一栏中可以改课程的基本信息，也可以改课程的大纲。

图示及效果

1、架构

接口

代码如下：

//课程列表基本实现

/TODO 完善条件查询带分页

@GetMapping

public R getCourseList(){List<EduCourse>list=courseService.list(wrapper:null); return R. ok().data("list",list):

1. 前端
   
2. 定义 api 方法
   

//TODO 课程列表

//课程最终发布

getListCourse(){

return request({

url:'/eduservice/course',

method:'get'

})

}

2. 页面的部分引入调用
   

<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>

最后演示效果：

打开课程列表则显示效果。