代码生成,也许你觉得根本用不上, 但你要知道怎么用
一、前言
知易行难,因为太多人听风是雨, 代码生成多么牛逼, 动态配置如何是好,然而其实低代码平台倒下了一片又一片,业务问题,场景问题,需求变更问题,等等. 二次开发的工程量不亚于重构,不如直接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: 是用来格式化代码的, 那些生成的代码怎么能码得整整齐齐, 靠它了
四、实现思路
- 把常用的表单组件都码上, 大概12个左右吧,无非是输入,下拉, 日期, 级联, 附件等等
- 组件布局,就用el-row, el-col, 它们组合能完成99%的布局要求, 给每个组件属性加个字段设置布局
- 自定义拖拽, 无非是往某个数组中添加多个单体组件,把单体组件设置布局格式,完成最终渲染
- 导入单表, 和后端沟通协定, 后端数据类型和前端组件类型匹配, 比如 后端定义'用户类型', 对应到前端组件类型 'Input'; 再比如后端定义 '排序', 对应前端组件类型'InputNumber'; 把前端组件类型静态枚举给后端即可
- 代码生成, 使用字符串拼接, 把动态出来的代码全部拼接的一起, 然后使用js-beautify插件把字符串格式化, 使用< pre > {{ strCode }} < /pre >标签渲染即可, 当然, 你也可以顺手写个复制黏贴的自定义指令
五、结束语
知易行难, 很多人开发了三五年, 也接触不到代码生成, 很多人听说了也不知道怎么回事,很多人知道了怎么回事, 也难以下手, 所以,权当我一时兴起免费教学吧,哈哈哈
附上源码: gitee.com/zhouzheng12…
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfkhcfk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01