一个So简单的低代码

背景

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

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

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

优点:✅

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

缺点:❌

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

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

实现

配置化组件

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

bash 复制代码
[
  { 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

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

表格区域:configTable

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

新增操作:configAdd

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

编辑操作:configModify

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

查看操作:configDetail

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

删除操作:configDelete

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

导入操作:configImport

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

导出操作:configExport

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

自定义操作:configCustom

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

go 复制代码
[
	{ // 跳转地址类
    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: []  // 配置化表单配置参数
  }
]

页面跳转:

接口调用:

表单提交

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

相关推荐
y先森20 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy20 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891123 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端