前端实现项目列表的CRUD

一、效果展示

二、详细信息

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

 三、前端部分

1、表格部分

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

<template>
<div class="">
  <h1>项目列表</h1>
  <div class="top-group">
    <el-button type="primary" icon="el-icon-plus" @click="onAddProjectButtonClick">新增项目</el-button>
  </div>
  <el-table :data="projects" style="width: 100%">
    <el-table-column prop="project_name" label="项目名称" width="180">
      <template slot-scope="scope">
        <router-link :to="'/project/'+scope.row.id">{{scope.row.project_name}}</router-link>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="类型" width=100>
    </el-table-column>
    <el-table-column prop="project_description" label="描述">
    </el-table-column>
    <el-table-column label="最后修改时间" >
      <template slot-scope="scope">
        {{scope.row.modified_time}}
      </template>
    </el-table-column>

    <el-table-column label="状态" width="100">
      <template>
        <!-- <el-tag type="success" v-if="scope.row.status==true">可用</el-tag>
        <el-tag type="danger" v-if="scope.row.status==false">禁用</el-tag> -->
        <el-tag type="success">可用</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template slot-scope="scope">
        <el-button @click="onEditProject(scope.row,scope.$index)" size="mini">编辑</el-button>
        <el-button type="danger" size="mini" @click="onDeleteProject(scope.row,scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      <!--这里是分页控件 -->
      <el-pagination
        :current-page="1"
        :page-size="10"
        layout="total,  prev, pager, next, jumper"
        :total="projects.length"
         class="pagination"
      ></el-pagination>

2、对话框部分

  <el-dialog title="新增项目" :visible.sync="addDialogVisiable">
    <el-form ref="projectForm" :model="projectForm" label-width="80px" :rules="projectRules">
      <el-form-item label="名称" prop="project_name">
        <el-input v-model="projectForm.project_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="projectForm.type" placeholder="请选择类型">
          <el-option label="Web" value="web"></el-option>
          <el-option label="App" value="app"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="project_description">
        <el-input type="textarea" v-model="projectForm.project_description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisiable = false">取 消</el-button>
      <el-button type="primary" @click="onSubmitAddProject" :loading="addProjectButtonLoading">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

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()
          })
        }
      })
    },
}