前端配置化CRUD+代码生成，告别CV

前言

相信做前端开发的兄弟，就会陷于这么一个死循环：每个功能模块都离不开CRUD界面，每个CRUD界面都长得差不多，唯一不同的就是显示的字段不同，于是每天大量重复的工作量都是ctrl+c，ctrl+v完成的。

不可以！我们要改变现状，我们要做些有意义的事情。

准备

第一步

• 实现可配置字段的搜索栏组件（可用于表格的搜索条件）
• 实现可配置字段的工具栏组件（可用于新增，编辑，删除等操作）
• 实现可配置字段的表格组件
• 实现可配置字段的表单组件

总之，就是把基本组件封装起来，通过配置文件生成想要的Element

第二步

• 根据UI设计将组件组合成模版代码
• 实现以命令行形式，配合handlebars.js生成代码块

原理

Demo

效果

配置

搜索栏

[
    {
        component: 'GInput',
        prop: 'account',
        label: '账号',
        value: '',
    },
    {
        component: 'GInput',
        prop: 'name',
        label: '姓名',
        value: '',
    },
]

工具栏

[
    TOOLBAR_PROP.CREATE,
    TOOLBAR_PROP.EDIT,
    TOOLBAR_PROP.DELETE,
    TOOLBAR_PROP.REFRESH,
    TOOLBAR_PROP.FULL_SCREEN,
]

表格

[
    {
        prop: 'account',
        label: '账号',
    },
    {
        prop: 'name',
        label: '姓名',
    },
    {
        prop: 'creator',
        label: '创建人',
    },
    {
        prop: 'creationTime',
        label: '创建时间',
        format: 'dateTimeFormat',
    },
]

表单

[
    {
        component: 'GInput',
        prop: 'name',
        label: '姓名',
        value: '',
        rules: [
            { required: true, message: '请输入姓名', trigger: 'change' },
            { validator: validateName, trigger: 'change' },
        ],
    },
    {
        component: 'GSelect',
        prop: 'gender',
        label: '性别',
        value: '',
        options: [
            { label: '男', value: 'MALE'},
            { label: '女', value: 'FEMALE'},
        ],
        rules: { required: true, message: '请选择性别', trigger: 'change' },
    },
]

使用

参考 vue-dynamic-crud