一. 先上效果
二. 技术栈
vue3 + vite + element-plus + file-saver + js-beautify + vuedraggable
三. 设计思路
1. 组件选择区(左): 先把常用组件罗列出来, 把组件的属性多熟悉几遍, 好对症下药
2. 页面展示区(中): 主要用来展示已经选择好的组件, 通过数组遍历展示,数组中每一个数据及类型理清楚
3. 参数设置区(右): 区分是组件属性还是表单属性, 这些属性在展示组件的数据中都有定义好的数据类型
四. 生成页面
1. 把正常的.vue页面写好, 用模板字符串处理一下
2. 把动态表单数据根据不同组件类型处理成字符串,插入到模板字符串中
3. 用js-beautify插件把模板字符串格式化一下
五. 补充部分代码截图
六. 结束语
其实想做得更完善一下, 比如动态生成表单后, 根据表单动态生成列表页, 列表页包含条件搜索和分页。比如根据动态表单的参数类型动态生成创建单表的sql语句, 动态生成实体类。如果做到这一步, 产品, 后端, 前端在做一些管理系统的时候, 可以更简单直接的沟通.
