前端实现项目列表的CRUD

一、效果展示

二、详细信息

1. 后端api会以数据形式返回全量的项目数组，将该数组绑定到table及字段即可展示
2. 新增项目，填写必填信息后，点击提交后新增数据且列表实时更新
3. 点击项目右侧的编辑按钮， 修改信息，点击提交后修改数据列列表实时刷新
4. 点击项目右侧的编辑按钮，此时需要把这一条数据带进来，不能为空
5. 新增和编辑的dialog，实际上是同一个，所以需要设法区分post请求和put请求
6. 删除数据的时候，需要实时更新列表

 三、前端部分

1、表格部分

主要是一个el-table，然后将数组projects绑定到了表格上。

3、JS新增、编辑实现

因为新建和编辑数据，都是使用dialog里的提交按钮，为了区分，我做了如下操作：

        在vue实例被created，我定义了一个变量dialog。在页面点击新建时赋值为'add'，在数据的右方按钮点击编辑时赋值为‘edit’,以此来辨别在对话框点提交，是执行的POST请求，还是PUT请求

按钮事件如下：

methods:{
    onSubmitAddProject(){
      this.$refs['projectForm'].validate(valid => {
        if(!valid){
          return
        }
        this.addProjectButtonLoading = true
        if(this.dialogType == 'add'){
          this.$http.addProject(this.projectForm).then(res => {
            this.addProjectButtonLoading = false
            if(res && res.status == 201){
              const project = res.data.data
              this.projects.splice(this.projects.length,0,project)
              // this.projects.push(project)
              this.addDialogVisiable = false
              this.initProjectForm()
              this.$message.success("恭喜！项目创建成功！")
            }
          })
        }else{
          this.$http.editProject(this.projectForm.id,this.projectForm).then(res => {
            this.addProjectButtonLoading = false
            console.log("添加的res",res);
            if(res){
              this.addDialogVisiable = false
              this.initProjectForm()
              this.$message.success("恭喜！项目修改成功！")
              const project = res.data.data
              this.projects.splice(this.cur_index,1,project)
            }
          })
        }
      })
    },
}

4、删除数据

删除数据分为两步骤，先往后端发起请求删除该条数据。前端可以通过刷新浏览器或者修改数组的方式去同步更新，但是刷新浏览器会闪烁一下，作为测试我接受不了，所以选择修改数组的方式。

JS方法如下：

methods：{
    onDeleteProject(project,index){
      this.$messagebox.confirm({
        message:"确认删除该项目吗？",
        confirmCallback:()=>{
          this.$http.delProject(project.id).then(res=>{
            this.projects.splice(index,1)
            this.$loading.hide()
            this.$message.success()
          })
        }
      })
    },
}