eladmin框架学习总结（一）

项目文件夹结构

-node_modules		依赖安装文件夹（要进行git忽略）
-dist				build后的文件夹（要进行git忽略）
-public 			主要放置入口index.html文件和项目LOGO
-src
--api 				**请求api封装（封装请求-常用）
--assets			静态资源
--components		**自定义组件封装（封装所需要的组件-常用）
--router			**路由（路由跳转-常用）
--store				vuex配置
--utils				通用工具封装
--views				**页面开发（主要的页面开发-常用）
-App.vue			vue根页面
-main.js			vue全局配置
-settings.js		项目配置
-.env.development	开发环境配置
-.env.production	生产环境配置
-package.json		依赖配置
-vue.config.js      vue项目环境配置文件

页面流程

import { mapGetters } from 'vuex'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// 默认表单，设置数据格式  最好与接口返回的格式一致，直接暴露，不要封装
const defaultForm = {
  id: null,
  username: null,
  // appId: null   自定义id字段，要在cruds 中添加idField
}
export default {
  name: 'User',
  components: {
    Treeselect,
  },
  // 自定义的 property 
  cruds() {
    // crud.js中的CRUD方法
    return CRUD({
      title: '用户',
      url: 'api/users',
      // idField: 'appId'  自定义id字段
      crudMethod: { ...crudUser }
    })
  },
  // 混入
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      deptName: '',
      //权限
      permission: {
        add: ['admin', 'user:add'],
      },
      // 验证规则  
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'blur'
          }
        ]
  },
  computed: {
    //返回store中的user对应的字段
    ...mapGetters(['user'])
  },
  created() {
    this.crud.msg.add = '新增成功，默认密码：123456'
  },
  mounted: function() {
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 180 + 'px;'
    }
  },
  methods: {
    //crud钩子在callVmHook中调用
    [CRUD.HOOK.afterAddError](crud) {
      this.afterErrorMethod(crud)
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
        //.....
    },
    // 打开编辑弹窗前做的操作
    [CRUD.HOOK.beforeToEdit](crud, form) {
        //........
    },
}

15行，自定义option

  // 自定义的 property 
  cruds() {
    // crud.js中的CRUD方法
    return CRUD({
      title: '用户',
      url: 'api/users',
      // idField: 'appId'  自定义id字段
      crudMethod: { ...crudUser }
    })
  },

mixins: [presenter(), header(), form(defaultForm), crud()]

混入模式下

presenter()

function presenter(crud) {
  if (crud) {
    console.warn('[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }')
  }
  return {
    data() {
      // 在data中返回crud，是为了将crud与当前实例关联，组件观测crud相关属性变化
      return {
        crud: this.crud
      }
    },
    beforeCreate() {
      // 储存主页实例
      this.$crud = this.$crud || {}
      //此处将实例里cruds中返回的CRUD函数初始化
      let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud
      if (!(cruds instanceof Array)) {
        cruds = [cruds]
      }
      cruds.forEach(ele => {
        if (this.$crud[ele.tag]) {
          console.error('[CRUD error]: ' + 'crud with tag [' + ele.tag + ' is already exist')
        }
        this.$crud[ele.tag] = ele
        ele.registerVM('presenter', this, 0)
      })
      this.crud = this.$crud['defalut'] || cruds[0]
    },
    methods: {
      parseTime
    },
    created() {
      for (const k in this.$crud) {
        if (this.$crud[k].queryOnPresenterCreated) {
          // 默认查询
          this.$crud[k].toQuery()
        }
      }
    },
    destroyed() {
      for (const k in this.$crud) {
        this.$crud[k].unregisterVM('presenter', this)
      }
    },
    mounted() {
      // 如果table未实例化（例如使用了v-if），请稍后在适当时机crud.attchTable刷新table信息
      if (this.$refs.table !== undefined) {
        this.crud.attchTable()
      }
    }
  }
}

header(),pagination(),form(),crud

关于页面中[CRUD.HOOK.afterToCU](crud, form)之类的钩子如何执行
之前一直不太清楚是如何触发的，今天又翻了翻crud.js
本以为不在callVmHook中触发的，没想到还是在这里
js基础还是要经常学习巩固

//[CRUD.HOOK.beforeToEdit]如何触发
[CRUD.HOOK.afterToCU](crud, form) {
        //.....
}
-------------
//crud.js
// hook VM
function callVmHook(crud, hook) {
  if (crud.debug) {
    console.log('callVmHook: ' + hook)
  }
  const tagHook = crud.tag ? hook + '$' + crud.tag : null
  let ret = true
  const nargs = [crud]
  for (let i = 2; i < arguments.length; ++i) {
    nargs.push(arguments[i])
  }
  // 有些组件扮演了多个角色，调用钩子时，需要去重
  const vmSet = new Set()
  crud.vms.forEach(vm => vm && vmSet.add(vm.vm))
  vmSet.forEach(vm => {
    if (vm[hook]) {
      ret = vm[hook].apply(vm, nargs) !== false && ret
    }
    if (tagHook && vm[tagHook]) {
      ret = vm[tagHook].apply(vm, nargs) !== false && ret
    }
  })
  return ret
}
-----------------
//关键在于apply方法  方法重用
//vm[hook].apply(vm, nargs)
//将vm[hook]也就是实例中的[CRUD.HOOK.beforeToEdit]之类的方法在vm和nargs(也就是[crud])中重用