谷粒学院85——添加课程章节的前端实现

(1)前端接口

chapter.js。

  // 添加章节
  addChapter(chapter) {
    return request({
      url: '/eduservice/edu-chapter/addChapter/',
      method: 'post',
      data: chapter
    })
  },
  // 根据id查询章节
  getChapter(courseId) {
    return request({
      url: '/eduservice/edu-chapter/getChapter/' + courseId,
      method: 'get'
    })
  },
  // 修改章节
  updateChapter(chapter) {
    return request({
      url: '/eduservice/edu-chapter/updateChapter/',
      method: 'post',
      data: chapter
    })
  },
  deleteChapter(courseId) {
    return request({
      url: '/eduservice/edu-chapter/deleteChapter/' + courseId,
      method: 'delete'
    })
  }

(2)前端调用接口展示数据

实现下图中“确定”按钮绑定的表单提交的方法saveOrUpdate。

chapter.vue

   saveOrUpdate() {
      chapter.addChapter(this.chapter)
      .then(resp => {
        // 1.关闭弹框
        this.dialogChapterFormVisible = false
        // 2.提示成功
         this.$message({
          message: "添加课程章节成功",
          type: "success",
        })
        // 3.刷新页面(重新查询数据即可)
        this.getChapterVideo()
      })
   }

是不是感觉:简单、枯燥且乏味。测试下。

报了一个错误，很明显这是后端报出来的，看看后端吧。告诉我们courseid没有给默认值。

看看数据库,courseId是必须传值的。

而data中的chapter也没有给courseId默认值。

我们其实之前已经拿到了courseId了。

因此，我们再传EduChapter前将数据封装到EduChapter中就可以了。

  saveOrUpdate() {
      this.chapter.courseId = this.courseId,
      chapter.addChapter(this.chapter)
      .then(resp => {
        // 1.关闭弹框
        this.dialogChapterFormVisible = false
        // 2.提示成功
         this.$message({
          message: "添加课程章节成功",
          type: "success",
        })
        // 3.刷新页面(重新查询数据即可)
        this.getChapterVideo()
      })
   }
  }

还有记得后端的EduChapter中时间相关属性要加注解。

再测试就成功了。