【VIDEO_Parent】-创作者前端-更新创作者

原创

BNTang

发布于 2023-11-30 23:22:09

1290

发布于 2023-11-30 23:22:09

文章被收录于专栏：『学习与分享之旅』『学习与分享之旅』

代码实现

点击编辑按钮进行页面路由跳转

定义点击编辑按钮的路由如下图

{
  path: 'edit/:id',
  name: '编辑',
  component: () => import('@/views/video/author/save'),
  meta: {title: '编辑', icon: 'tree'},
  hidden: true
}

修改编辑按钮，修改点击编辑按钮跳转的路由地址，使用 router-link 如下图

<!--
修改跳转,让其跳转到路由当中,编辑路由页面和添加的是一样，编辑当中是有参数
-->
<router-link :to="'/author/edit/'+scope.row.id">
  <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>

更新数据回显

编写请求 api

// 4.根据id查询作者
getOneAuthor(id) {
  return request({
    // 路由参数拼接
    url: `/service_video/author/getAuthorWithId/${id}`,
    method: 'get'
  })
}

获取参数，然后发送请求

// 一进来就要获取参数
created() {
  // 判断有没有参数，如果有，获取参数
  if (this.$route.params && this.$route.params.id) {
    let authorId = this.$route.params.id;
    // 根据id获取该条参数对应的数据,发送请求到服务器当中获取数据
    author.getOneAuthor(authorId).then(res => {
      this.author = res.data.item;
    }).catch(error => {
      this.$message.error("服务器繁忙，请稍后再试！");
    });
  } else {
    this.author = {
      sort: 0,
      level: 1
    }
  }
}

让下拉列表进行默认选中

更新数据

添加更新创作者的请求 api

// 5.更新创作者
updateAuthor(author) {
  return request({
    url: '/service_video/author/updateAuthor',
    method: 'post',
    // data会自动转成JSON传递到接口当中
    data: author
  });
}

编写更新创作者请求的方法如下

// 更新
updateAuthor(){
  // 调用更新的api
  author.updateAuthor(this.author).then(res=>{
    // 更新成功
    this.$message({
      type: 'success',
      message: '更新成功!'
    });
  }).catch(error=>{
    this.$message.error("更新失败！");
  });
  // 跳转到创作者列表页
  this.$router.push({path: '/author/table'});
}

修改之前的添加方法，判断，当前是否为更新或者添加，达到复用

saveClick() {
  // 根据有没有 id 判断，是添加还是更新
  // 如果有id，那么就是更新，否则就是添加
  if (this.author.id) {
    // 更新
    this.updateAuthor();
  } else {
    // 添加
    this.addAuthor();
  }
},