Node.js实践手记（18）——如何构建入门级可视化开发平台？

本文共计2381个文字，预计阅读时间需要10分钟。

我们团队维护的管理后台将面临众多开发需求，每次新开页面，都需复制粘贴相关代码。此外，还会经常性阅读文档，先将WIKI地址输入书签或地址栏，再找到对应文档。

　　我们组维护的管理后台会接到很多开发需求，每次新开页面，就会到处复制黏贴相关代码。

　　并且还会经常性的翻阅文档，先在书签或地址栏输入WIKI地址，然后找到那一份说明文档，再定位到要看的组件位置。

　　虽然单人损耗的时间并不是非常多，但还是会打断思路，影响开发的流畅性，当把所有人的时间累加起来，那损耗的时间也很可观。

　　为了能提升团队成员的开发效率，就开始构思一套可视化搭建系统。理想状态下，拖动组件，配置交互和样式，页面生成，直接可用。

　　但是要完成这套功能，开发成本比较大，现在我想先解决当前的痛点，减少代码复制的频率和快速读取组件文档。

　　为此，在构思了好多天后，打算搞一个半吊子的可视化搭建系统。

　　所谓半吊子是指搭建完后，点击生成，会在后台创建视图和数据两个脚本文件、自动添加权限、新增菜单栏，不过后续我们还得继续做开发，完善页面功能。

一、界面

　　界面分成左右两部分，左边是配置区域，右边空白处是组件的预览区域。