ELADMIN-04 crud的封装

ELADMIN-04 crud的封装

1 Crud的结构

Crud这个文件夹下总共是5个文件，包括四个Vue组件和一个js文件，其作用如下：

• src/src/components/Crud/crud.js文件定义了一个名为CRUD的对象，它包含了一些用于处理CRUD（创建、读取、更新、删除）操作的方法。这个对象可以被其他组件导入并使用，以便在这些组件中执行CRUD操作,下面四个Vue组件都会用到这个js文件

• src/components/Crud/CRUD.operation.vue文件定义了一个Vue组件，这个组件包含了添加、编辑、删除和导出按钮。这个组件可以被其他组件导入并使用，以便在这些组件中显示CRUD操作的按钮。四个按钮两边还各有一个插槽可以自行添加新的按钮。
  

• src/components/Crud/RR.operation.vue文件定义了一个Vue组件，这个组件包含了搜索和重置按钮。

• src/components/Crud/Pagination.vue文件定义了一个Vue组件，这个组件包含了一个分页器。

• src/components/Crud/UD.operation.vue文件定义了一个Vue组件，这个组件包含了编辑和删除按钮。

2 具体实现

由于完整的crud实现代码量太大，加上本人是个菜鸡，所以只看懂了一点，就以src/components/Crud/CRUD.operation.vue来说明一下crud的实现。组件的页面结构就是七个按钮（el-popover也看作是一个按钮）

其中前四个按钮绑定了v-if可以通过crud.optShow来控制按钮是否显示，这里官方文档也有说明

下面我们看看新增按钮的操作到底是怎么执行的

新增按钮绑定了一个点击事件，这个点击事件是在crud.js中定义的，进入到这个函数查看这个函数干了些什么。

/**
 * 启动添加
 */
toAdd() {
  crud.resetForm()
  if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
    return
  }
  crud.status.add = CRUD.STATUS.PREPARED
  callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form)
  callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},

toAdd函数的执行步骤如下：

1. 调用了一个重置表单的函数，将表单的所有字段设置为指定值或者默认值，并清除表单的验证结构。
2. 然后，它检查是否可以调用beforeToAdd和beforeToCU这两个钩子函数。这两个函数可以在添加操作开始前执行一些自定义的操作，例如验证数据或显示提示信息。如果这两个函数中的任何一个返回false，toAdd方法就会停止执行。
3. 如果beforeToAdd和beforeToCU这两个钩子函数都成功执行，toAdd方法就会将crud.status.add的值设置为CRUD.STATUS.PREPARED。这表示添加操作已经准备好，等待用户输入数据。
4. 最后，它调用afterToAdd和afterToCU这两个钩子函数。这两个函数可以在添加操作开始后执行一些自定义的操作，例如显示提示信息。

**callVmHook**在CRUD的自定义钩子函数起到重要作用，其作用也就是在CRUD对象的方法中调用Vue组件实例的钩子函数。callVmHook函数接收两个参数：crud和hook。crud是一个包含了多个Vue组件实例的对象，hook是你想要调用的钩子函数的名字。 函数首先检查crud对象是否开启了调试模式，如果是，就在控制台打印出一条消息。 然后，函数创建了一个名为tagHook的变量，这个变量是由hook和crud.tag拼接而成的字符串，如果crud.tag存在的话。 接着，函数创建了一个名为nargs的数组，这个数组包含了crud对象和其他传入的参数。 然后，函数创建了一个名为vmSet的Set对象，这个Set对象用于存放crud.vms数组中的所有Vue组件实例。这里使用了Set对象是为了去除重复的Vue组件实例。 接着，函数遍历了vmSet中的每个Vue组件实例。对于每个Vue组件实例，如果它有一个名为hook的方法，就调用这个方法并将nargs数组作为参数传入。如果这个方法返回false，就将ret变量设置为false。然后，如果tagHook变量存在，并且Vue组件实例有一个名为tagHook的方法，也进行同样的操作。 最后，函数返回ret变量的值。这个值表示所有调用的钩子函数是否都返回了true。

在toAdd函数执行的第3步，将将crud.status.add的值设置为CRUD.STATUS.PREPARED(1),使得:visible.sync="crud.status.cu > 0"条件成立，添加用户的表单可以显示出来，然后就可以填写相关信息

如果这时候点击取消的话会调用crud.cancelCU函数，如果提交表单的话会调用crud.submitCU函数，在crud.cancelCU函数中一大堆代码就是维护crud的状态，最后重置表单和清楚表单数据验证。在crud.submitCU函数中首先调用beforeValidateCU钩子函数，如果这个钩子函数返回false，则停止执行。然后，调用表单的validate方法进行表单验证，如果验证失败，也停止执行。接着，调用afterValidateCU钩子函数，如果这个钩子函数返回false，则停止执行。最后，根据crud.status.add和crud.status.edit的值，决定调用crud.doAdd方法还是crud.doEdit方法，执行添加或编辑操作。

在这里我们调用的是crud.doAdd方法来实现具体的添加操作，它的实现主要包含以下几个步骤：

1. 首先，它调用callVmHook(crud, CRUD.HOOK.beforeSubmit)来执行beforeSubmit钩子函数。如果这个钩子函数返回false，则停止执行doAdd()函数。

2. 然后，它将crud.status.add的值设置为CRUD.STATUS.PROCESSING，表示添加操作正在进行中。

3. 接着，它调用crud.crudMethod.add(crud.form)来发送添加数据的请求。这个请求是一个Promise对象，当这个Promise对象resolve时，会执行then方法中的回调函数。

4. 在then方法中的回调函数中，它将crud.status.add的值设置为CRUD.STATUS.NORMAL，表示添加操作已经完成。然后，它调用crud.resetForm()来重置表单，调用crud.addSuccessNotify()来显示一个成功的消息，调用callVmHook(crud, CRUD.HOOK.afterSubmit)来执行afterSubmit钩子函数，最后调用crud.toQuery()来刷新数据。

5. 如果添加数据的请求失败，会执行catch方法中的回调函数。在这个回调函数中，它将crud.status.add的值设置为CRUD.STATUS.PREPARED，表示添加操作已经准备好，然后调用callVmHook(crud, CRUD.HOOK.afterAddError)来执行afterAddError钩子函数。

其中crud.crudMethod.add(crud.form)这个方法是在创建crud这个对象的时候传入的，例如在用户管理src/views/system/user/index.vue这个文件中就将前面讲到的定义在api中的方法传到crud组件中，这样在使用的时候就是user的add方法了。

import crudUser from '@/api/system/user'
...
cruds() {
  return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
},
...

在crud中还定义了大量的方法，这里就不再一一描述了，有需要的时候再看就行了。

参考：

el-admin实战解析

【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解，对，核心就是crud.js文件

从开源框架el-admin中学习状态模式