一个So简单的前端低代码

背景

这都2023了，不会还有人在CV中后台吧~🈲🈲🈲

说到低代码，相信还是有很多前端提起低代码就摇头say no，表示曾经被这些低代码平台“伤害过”，因为产品需求一旦涉及平台暂不支持的功能，轻则导致加班返工，重则绩效堪忧，甚至丢了工作。

都说到这里了，我们来看下，低代码优劣势：

优点：✅

• 主打一个提效，在提效这块确实很可观
• 技术门槛降低，业务开发可转变为由外包人员甚至非技术人员完成

缺点：❌

• 上手成本高
• 个性化功能无法支持

【轻量化】 似乎能解决掉上述的缺点，只用低代码来完成中后台中最简单的增删改查页面。这样轻量化的低代码即解决了上手成本高的问题，同时对于有个性化功能的模块我们不采用低代码方式开发，是不是也能解决部分业务化开发呢？简单的增删改查直接由后台开发人员自行配置完成，降低低代码业务覆盖面，来规避低代码平台的致命缺点，似乎也是个不错的方案。

实现

配置化组件

配置化开发：其实算是低代码开发的一个前身吧，在常规业务开发中，通过传入一个json配置来渲染出前端页面的组件，避免重复的复制粘贴前端子组件，通过组件内部循环的方式产生。

[
  { prop: 'yearDate', label: '年份', type: 'year', colNum: 6 },
  { prop: 'accountingName', label: '核算会计', type: 'input', colNum: 6 },
  { prop: 'taxpayerScale', label: '纳税人规模', type: 'select', options: [{ name: '一般', desc: '一般' }, { name: '小规模', desc: '小规模' }], valueKey: 'name', labelKey: 'desc', colNum: 6 },
    { prop: 'taxpayerScale', label: '日期', type: 'date' }
]

如上配置通过提供的配置化表单组件，既可渲染出一个表单

我们推出了两个配置化组件，cfpaForm、largeTable，具体实现请查看源代码

常规CURD页面

常规增删改查页面大致包含如下操作：

拆分上述页面，分析各个区域渲染需要的数据源及配置参数

• 搜索区域：由配置化表单组件+配置schema(configQuery)
• 表格区域：由配置化表格组件+配置schema(configTable)
• 新增操作：由element的dialog组件+配置化表单组件+配置schema(configAdd)
• 编辑操作：由element的dialog组件+配置化表单组件+配置schema(configModify)
• 查看操作：由element的dialog组件+配置化表单组件+配置schema(configDetail)
• 删除操作：配置schema(configDelete)
• 导入操作：配置schema(configImport)
• 导出操作：配置schema(configExport)
• 自定义操作：配置schema(configCustom)

搜索区域：configQuery

{
  type: 'configQuery',
  show: true,  // 是否展示
  interface: '', // 搜索区域调用接口地址
  interfaceType: 'post', // 接口请求方式
  paramType: 'query', // 接口传参方式
  columns: [],  // 配置化表单配置参数
}

表格区域：configTable

{
  type: 'configTable',  
  pagination: true,  // 是否需要分页
  columns: [],  // 配置化表格配置参数
}

新增操作：configAdd

{
  type: 'configAdd',
  show: false,   // 是否展示新增按钮
  interface: '', // 新增提交接口地址
  interfaceType: 'post', // 接口请求类型
  paramType: 'query', // 接口传参方式
  columns: [],  // 配置化表单配置参数
}

编辑操作：configModify

{
  type: 'configModify',
  show: false,   // 是否展示编辑按钮
  paramSource: 'row', // 回填数据来源 row/api， api时会调用【查看操作】回填接口
  interface: '', // 新增提交接口地址
  interfaceType: 'post', // 接口请求类型
  paramType: 'query', // 接口传参方式
  columns: [],  // 配置化表单配置参数
}

查看操作：configDetail

{
  type: 'configDetail',
  show: false,   // 是否展示查看按钮
  paramSource: 'row', // 回填数据来源 row/api
  interface: '', // 回填接口地址
  interfaceType: 'post', //回填接口请求类型
  paramType: 'query', // 回填接口传参方式
  columns: [],  // 配置化表单配置参数
}

删除操作：configDelete

{
  type: 'configDelete',
  show: false,  // 是否展示删除按钮
  interface: '',  // 删除接口地址
  interfaceType: 'post', // 删除接口请求方式
  paramType: 'query',  // 删除接口请求类型
  rowParam: '', // 当前行需要传递的参数字段，如id、id,name，多个采用,隔开既可
}

导入操作：configImport

{
  type: 'configImport',
  show: false,  // 是否展示导入按钮
  interface: '',  // 导入接口地址
  interfaceType: 'post', // 导入接口请求方式
  paramType: 'query', // 导入接口传参方式
  columns: [], // 配置化表单配置参数
}

导出操作：configExport

{
  type: 'configExport',
  show: false, // 是否展示导出按钮
  interface: '', // 导出接口地址
  interfaceType: 'post', // 导出接口请求类型
  paramType: 'query', // 导出接口请求方式
}

自定义操作：configCustom

自定义操作可以有任意个，总共包含3中自定义类型：跳转地址、二次确认调用接口、表单弹窗提交

[
    { // 跳转地址类
    type: '', // 操作类型
    isOutside: '', // 是否是批量操作按钮
    btnText: '',  // 按钮文案
    btnType:'',  // 按钮类型
    jumpUrl: '',  // 跳转链接地址
      showCondition: '', // table行按钮展示条件
  },
    { // 二次确认直接调用接口
    type: '', // 操作类型
    isOutside: '', // 是否是批量操作按钮
    btnText: '',  // 按钮文案
    btnType:'',  // 按钮类型
    interface: '', // 接口地址
    interfaceType: '', // 接口请求方式
    paramType:'', // 接口传参方式
    rowParam: '', // 附加参数字段
    showCondition: '', // table行按钮展示条件
    isCheck: '', // 是否需要行勾选
    checkKey: '',  //勾选操作后台接收字段
    checkRowKey: '', //勾选操作行字段
  },
    { // 表单弹窗提交类
    type: '', // 操作类型
    isOutside: '', // 是否是批量操作按钮
    btnText: '',  // 按钮文案
    btnType:'',  // 按钮类型
    width:'', //弹窗宽度
    interface: '', // 接口地址
    interfaceType: '', // 接口请求方式
    paramType:'', // 接口传参方式
    paramSource: '',  // 回填数据来源
    rowParam: '', // 附加参数字段
    showCondition: '', // table行按钮展示条件
    isCheck: '', // 是否需要行勾选
    checkKey: '',  //勾选操作后台接收字段
    checkRowKey: '', //勾选操作行字段
      columns: []  // 配置化表单配置参数
  }
]

页面跳转：

接口调用：

表单提交

低代码接入微服务接入架构图

源码

此源码去除了后台代码，所有数据改存储在localStrge里

https://github.com/chenyuhuan1/less-code-front

配置化开发组件

另外，笔者在此之后重新搭建了一套基于VUE3+TS配置化开发组件
https://juejin.cn/post/7246190449311940669