背景
这都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: [] // 配置化表单配置参数
}
]
页面跳转:
接口调用:
表单提交