章节列表前端实现

àì夳堔傛蜴生んèń 2021-07-24 18:28 603阅读 0赞

# 一 定义api #

export default {
      // 课程章节列表
      getNestedTreeList(courseId) {
        return request({
          url: `/admin/edu/chapter/nested-list/${courseId}`,
          method: 'get'
        })
      },
      // 删除章节
      removeById(id) {
        return request({
          url: `/admin/edu/chapter/remove/${id}`,
          method: 'delete'
        })
      },
      // 保存章节信息
      save(chapter) {
        return request({
          url: '/admin/edu/chapter/save',
          method: 'post',
          data: chapter
        })
      },
      // 根据章节id获得章节信息
      getById(id) {
        return request({
          url: `/admin/edu/chapter/get/${id}`,
          method: 'get'
        })
      },
      // 更新章节信息
      updateById(chapter) {
        return request({
          url: '/admin/edu/chapter/update',
          method: 'put',
          data: chapter
        })
      }
    }

# 二 显示章节列表 #

## 1 组件脚本 ##

export default {
      components: { ChapterForm, VideoForm }, // 2、注册组件
      data() {
        return {
          chapterList: [] // 章节嵌套列表
        }
      },
    
    
      created() {
        this.fetchNodeList()
      },
    
    
      methods: {
        // 获取后端章节列表数据
        fetchNodeList() {
          chapterApi.getNestedTreeList(this.$parent.courseId).then(response => {
            this.chapterList = response.data.items
          })
        },
        // 根据id删除章节信息
        removeChapterById(chapterId) {
          this.$confirm('此操作将永久删除该章节，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            return chapterApi.removeById(chapterId)
          }).then(response => {
            this.fetchNodeList()
            this.$message.success(response.message)
          }).catch((response) => {
            if (response === 'cancel') {
              this.$message.info('取消删除')
            }
          })
        },
    
    
        // 添加章节
        addChapter() {
          this.$refs.chapterForm.open()
        },
    
    
        // 编辑章节
        editChapter(chapterId) {
          this.$refs.chapterForm.open(chapterId)
        },
    }

## 2 组件模板 ##

<div>
          <el-button type="primary" @click="addChapter()">添加章节</el-button>
        </div>
    
    
        
        <ul class="chapterList">
          <li v-for="chapter in chapterList" :key="chapter.id">
            <p>{
       { chapter.title }}
              <span class="acts">
                <el-button type="text" @click="addVideo(chapter.id)">添加课时</el-button>
                <el-button type="text" @click="editChapter(chapter.id)">编辑</el-button>
                <el-button type="text" @click="removeChapterById(chapter.id)">删除</el-button>
              </span>
            </p>
            <ul class="chapterList videoList">
              <li v-for="video in chapter.children" :key="video.id">
                <p>{
       { video.title }}
                  <el-tag v-if="!video.videoSourceId" size="mini" type="danger">
                    {
       { '尚未上传视频' }}
                  </el-tag>
                  <span class="acts">
                    <el-tag v-if="video.free" size="mini" type="success">{
       { '免费观看' }}</el-tag>
                    <el-button type="text" @click="editVideo(chapter.id, video.id)">编辑</el-button>
                    <el-button type="text" @click="removeVideoById(video.id)">删除</el-button>
                  </span>
                </p>
              </li>
            </ul>
          </li>
        </ul>

## 3 定义样式 ##

.chapterList{
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .chapterList li{
      position: relative;
    }
    .chapterList p{
      float: left;
      font-size: 20px;
      margin: 10px 0;
      padding: 10px;
      height: 70px;
      line-height: 50px;
      width: 100%;
      border: 1px solid #DDD;
    }
    .chapterList .acts {
        float: right;
        font-size: 14px;
    }

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/687feac80374490f9c1e981899a7b7c2.png