一个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: []  // 配置化表单配置参数
  }
]

页面跳转:

接口调用:

表单提交

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

相关推荐
栈老师不回家6 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙12 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠16 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds36 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm