「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」

前言

前篇文章接入了一个简单列表接口，今天就根据Element-UI的文档新加一些接口，完全靠Element-UI组件实现。

新建接口

src/api/url.js添加三个接口：

export function delType(data) {
  return request({
    url: '/admin/DelType',
    method: 'POST',
    data
  })
}

export function addType(data) {
  return request({
    url: '/admin/AddType',
    method: 'POST',
    data
  })
}

export function editType(data) {
  return request({
    url: '/admin/EditType',
    method: 'POST',
    data
  })
}

主要代码

代码主要一个文件，在src/view/table/index.vue文件
现在分成HTML和Javascript部分，依次讲解自己了解学习到的地方

<template>
  <div class="app-container">

    <el-form class="filter-form">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="openAddFrom()">新增类别</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.ID }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.Name }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="190px">
        <template slot-scope="scope">
          <div class="flex-btns">
            <el-button :loading="scope.row.loading" type="primary" @click="bindEdit(scope.row)">编辑</el-button>
            <el-button type="info" @click="deteleType(scope.row)">删除</el-button>

          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--  添加分类  -->
    <el-dialog title="添加分类" :visible.sync="formAddVisible" width="450px" center>
      <el-form ref="addform">
        <el-form-item label="分类名称">
          <el-input v-model="addForm.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button native-type="primary" @click="onSubmitAdd">确认添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  修改分类  -->
    <el-dialog title="编辑分类" :visible.sync="formEditVisible" width="450px" center>
      <el-form ref="addform">
        <el-form-item label="分类名称">
          <el-input v-model="editForm.name" placeholder="请输入分类"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button native-type="primary" @click="onSubmitEdit">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import { getTypeList, delType, addType, editType} from '@/api/url'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      formAddVisible: false,
      formEditVisible: false,
      addForm: {
        name: ''
      },
      editForm: {
        id: 0,
        name: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTypeList().then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    openAddFrom() {
      this.formAddVisible = true
    },
    bindEdit(data) {
      this.editForm.id = data.ID
      this.editForm.name = data.Name
      this.formEditVisible = true
    },
    deteleType(data) {
      this.$confirm('是否删除分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        console.log(data)
        delType({
          id: data.ID
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          setTimeout(() => {
            this.$router.go(0)
          }, 300)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },

    onSubmitAdd() {
      addType({
        name: this.addForm.name
      }).then(res => {
        console.log()
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        setTimeout(() => {
          this.$router.go(0)
        }, 300)
      })
      this.formVisible = false
    },

    onSubmitEdit() {
      editType({
        name: this.editForm.name,
        id: this.editForm.id
      }).then(res => {
        console.log()
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        setTimeout(() => {
          this.$router.go(0)
        }, 300)
      })
      this.formEditVisible = false
    }
  }
}
</script>

导入路由

import { getTypeList, delType, addType, editType} from '@/api/url'

使用很简单，导入多少路由直接在花括号后面加路由名称后面的方法就可以调用了

新增分类

   <el-button type="primary" icon="el-icon-plus" @click="openAddFrom()">新增类别</el-button>

使用了el-button组件，type有6种可选值。没有默认值。这里使用了primary参数。默认按钮属性。
ico属性值是el-icon-plus说明这个按钮图片是一个加号，图片有好多，请参考文档：https://element.eleme.cn/#/zh-CN/component/icon，粗略属了一下280个图标。
@click是监听绑定标签的点击事件，这是简写，完整的是v-on:click，点击这个按钮用于激活一个弹框。
这个对话框也是Element-UI的组件：

    <!--  添加分类  -->
    <el-dialog title="添加分类" :visible.sync="formAddVisible" width="450px" center>
      <el-form ref="addform">
        <el-form-item label="分类名称">
          <el-input v-model="addForm.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button native-type="primary" @click="onSubmitAdd">确认添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

:visible.sync用于绑定一个变量，使用布尔值来控制对话框的显示和隐藏。 sync的意思同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，简而言之是手动操作或者其他操作也会控这个变量。
formAddVisible这个变量在页面初始化的时候把他定义为False他就不显示，点击按钮就会改为True显示，然后填写信息提交成功后改为False，就这么简单。

这个对话框里面包含了一个el-form 表单组件，这个扁担组件使用ref用于绑定一个数据，在页面初始化的时候一定要定义这个变量，不然会报错：

  data() {
    return {
      list: null,
      listLoading: true,
      formAddVisible: false,
      formEditVisible: false,
      addForm: {
        name: ''
      },
      editForm: {
        id: 0,
        name: ''
      }
    }
  },

这个确认添加的按钮也是使用@click来触发一个事件函数。在Vue的methods中定义：

    onSubmitAdd() {
      addType({
        name: this.addForm.name
      }).then(res => {
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        setTimeout(() => {
          this.$router.go(0)
        }, 300)
      })
      this.formVisible = false
    },

使用addType方法请求后端接口，也就是之前在url.js里面定义的接口，其中this.$message()也是Element-UI的消息提示组件，也有很多参数可以实现各种各样的功能，我看看这个默认的样式：

setTimeout()是一个异步函数之一，在指定时间后执行指定代码，前面的this.$router.go(0)就是指定的代码。300就是等待的指定时间
this.$router.go(0)意思就是原地刷新，重新加载数据，0改为-1就是返回上一个页面，1就是前进一个页面
最后使用this.formVisible = false关闭弹窗

修改

编辑的代码基本上跟新增一样，就多一个ID,新增分类和和修改分类都是调起了一个对话框，修改分类的时候点击按钮的时候获取了那一行的数据:

<el-button :loading="scope.row.loading" type="primary" @click="bindEdit(scope.row)">编辑</el-button>

然后bindEdit除了调起对话框还有了一个数据赋值的操作：

  this.editForm.id = data.ID
  this.editForm.name = data.Name

赋值过后再调用接口的时候激活获取这个VUE对象里的两个变量传递到后端

删除

主要是再监听点击方法里面加入了一个叫气泡确认框的组件：

    deteleType(data) {
      this.$confirm('是否删除分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        console.log(data)
        delType({
          id: data.ID
        }).then(res => {
          console.log()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          setTimeout(() => {
            this.$router.go(0)
          }, 300)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },

除了then用来接收确定按钮的逻辑，还有catch来接收取消的逻辑。

总结

的确很简单，稍微有一点经验花一点时间就跟我这样摸索出一些东西出来，虽然很粗糙，但是还是实现了需要，之前在弄jQuery项目的时候使用的Layui框架跟这个也差不多，但是感觉这个更有条理，学习基础的Element-UI要更快，而且Element-UI要学习的东西要更多，样式更多，功能更强大。接下来准备新增并优化一下分类详情的增删改查。

从零开始摸索VUE，配合Golang搭建导航网站（二十三.vue-admin-template接入后端增删改接口）

前言

新建接口

主要代码

导入路由

新增分类

修改

删除

总结