前言

先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了，其次就是，后台管理这个东西，来来去去就是那么几个东西，查询，Form表单，Table表格，弹窗之类的一些东西，加上一个增删改查的一些逻辑，反正我呆过两家公司的后管都是这些，我猜大伙家的后管也不离其中吧。做久了这类东西，就感觉写代码没什么意思，复制黏贴，复制黏贴，一开始太开心的，做着做着，就开始迷茫了，就思考，我以后出去面试，面试官问我，这项目有啥难的，这时心里就是tmd后台管理就是一些增删改查能有啥难点。我个人复制黏贴久了，就开始摸索，有没有办法逃离复制黏贴这种常规操作呢，然后就开始基于公司的ui框架结合公司业务封装一些公用全局组件，只需要传一个JSON就可以渲染想要的样式，ui组件，就不用复制黏贴了，如果样式有变动，我只需要改一个组件就可以全部生效，觉得挺好的。可是，人就是喜新厌旧，用多了就厌烦，我就开始想，有没有可能通过可视化拖拽帮我实现这样来来去去都是一些的代码呢？刚刚最近又去了解了很多开源的低代码平台，最后就想做，通过这个放法，结合公司的业务解决一下自己的一些枯燥无味的后台管理业务。最后就有了这个项目。

成果体验

先看一下效果图：

左边是物料区，可以拖拽放到中间视图区，左侧就是可配置的属性区了。

那这也是我最初想要的效果，功能呢？预览，查看生成视图的JSON，生成vue文件并导出。

简单介绍一下这几个功能吧。

预览：也就是我们通过拖拽生成的视图，肯定要先在线预览之后看一下效果和体验一下才能放到生产环境。

查看JSON：也就是我们通过拖拽生成的视图的JSON。

生成vue文件导出：这就是通知JSON去生成我们想要的组件页面，放到我们的管理后台vue项目里面，因为，后管不像营销低代码平台之直接一个页面打包成单个项目直接发布。这里我能想到的就是导出.vue文件，然后手动放到我们想要放到的项目中。

这也是我第一版构思样子。

话不多说，说再多也不用体验一下，上链接，不用99，也不用9.9，家人们猜猜多少钱，没错，免费，你没听错免费～

服务器已经过期，体验参考请移步，amis

开发过程遇到的难点和解决思路

问题1:拖拽过后怎么才能让当前被拖拽的这个组件贴着上一个组件呢？

这个问题，只有我们拿到每个组件的高度就很容易解决了，假设，第一个组件，肯定要贴着最顶部的，那它的top就是0了，没什么好争辩的，第二组件的位置就是，第一个组件的高度，如果组件一高度时60,那组件二的top就是60，组件三的top就是前面的组件的高度相加就好，以此类推。

问题2:拖拽放开后，怎么知道它在哪个位置呢？是第二还是三或者是第一呢？

这个问题只要想通了就很容易解决了，拿到当前被拖拽的组件放下后的clientY值，用这个值去代替之前位置y值，然后做一次排序，我们就可以知道它现在的位置了，最后渲染出来就好了。

问题3:渲染可配置的属性是怎么解决key的唯一性呢？

因为Form表单，封装后，我这边时要传人这样一段JSON去渲染视图的。例:[{ "type":"input", "label": "名字", "prop": "name", "span": 12 }, { "label": "年龄", "prop": "age", "span": 12, "type":"select", "options":[{"label":"test","value":"1"}] }],因为属性区本来就是一个Form表单，如果之间这样渲染就会出现多个一个key值，比如会有多个type，多个label等这些一样的key,如果我们用者key拼接上当然的prop键的值就可以解决唯一性。比如name_type,name_lable,age_type,age_label等。

问题4:再拖拽视图区的组件时，怎么算它的位置呢？

比如一个组件当前位置时再y=60的位置。我再去拖拽它改变的原来的位置，我们想要知道它变改变后的位置。改变后的位置=当前位置+(拖拽后的位置-当前位置)。

问题5：怎么生成.vue问题呢？

这个就要用到node大法的读写操作了，先写好一个vue模版，再替换到占位置的注释，然后导出就行了。

后话

导出的vue文件，你可以直接放到自己的vue项目是可以直接用起来的，因为那些组件我都已经打包上传到服务器了，加载的是远程组件，但是组件的配置我没有写出来，感兴趣的，或者对加载远程组件感兴趣的,或者对低代码感兴趣的小伙伴们可以留言或者加我v私聊我，我们一起讨论讨论，共同学习一下。

来都来了，看都看到这里了，不如点个赞再走❤️。