代码生成,也许你觉得根本用不上, 但你要知道怎么用

一、前言

知易行难,因为太多人听风是雨, 代码生成多么牛逼, 动态配置如何是好,然而其实低代码平台倒下了一片又一片,业务问题,场景问题,需求变更问题,等等. 二次开发的工程量不亚于重构,不如直接copy. 虽然99%的开源项目的代码生成是后端的事, 生成模板也是后端完成, 但是, 后端能做到事, 前端一样可以. 所以,也许你根本用不上, 但你要知道怎么用

看图说话

图1

图2

图3

图1, 是通过拖拉拽完成的, 现在好像不会拖拉拽都不好意思说是动态配置了

图2, 是预览刚刚完成拖拉拽实现的表单页面展示

图3, 是表单页面对应的代码展示(vue3 + element-plus)

二、接着看图

图4

图5

图6

图7

图4, 是通过单表导入,选择业务场景的单表实体类

图5, 是导入之后的每个字段对应的表单项

图6, 是表单页面的展示

图7, 是表格页面的代码展示

三、技术栈

vue3 + vite + element-plus + vuedraggable + js-beautify

介绍一下这个插件, js-beautify: 是用来格式化代码的, 那些生成的代码怎么能码得整整齐齐, 靠它了

四、实现思路

1. 把常用的表单组件都码上, 大概12个左右吧,无非是输入,下拉, 日期, 级联, 附件等等
2. 组件布局,就用el-row, el-col, 它们组合能完成99%的布局要求, 给每个组件属性加个字段设置布局
3. 自定义拖拽, 无非是往某个数组中添加多个单体组件,把单体组件设置布局格式,完成最终渲染
4. 导入单表, 和后端沟通协定, 后端数据类型和前端组件类型匹配, 比如 后端定义'用户类型', 对应到前端组件类型 'Input'; 再比如后端定义 '排序', 对应前端组件类型'InputNumber'; 把前端组件类型静态枚举给后端即可
5. 代码生成, 使用字符串拼接, 把动态出来的代码全部拼接的一起, 然后使用js-beautify插件把字符串格式化, 使用< pre > {{ strCode }} < /pre >标签渲染即可, 当然, 你也可以顺手写个复制黏贴的自定义指令

五、结束语

知易行难, 很多人开发了三五年, 也接触不到代码生成, 很多人听说了也不知道怎么回事,很多人知道了怎么回事, 也难以下手, 所以,权当我一时兴起免费教学吧,哈哈哈

附上源码: gitee.com/zhouzheng12…