Node.js躬行记（18）——半吊子的可视化搭建系统

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

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

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

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

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

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

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

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

一、界面

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

1）组件区域

组件区域的第一个下拉框可以选择Ant Design和部分模板组件，选中后，会替换组件地址的链接，点击就能跳转到组件的说明文档。

第二个下拉框能选择页面中需要的组件，例如图中的提示组件，点击添加后会在右边显示，并且还会提供一个删除图标，目前暂不支持拖动效果。

2）配置区域

在配置区域中，可以输入菜单名称、路由、文件目录和权限等信息。

原先的话，还得手动的在路由和权限两个文件中新增配置项ÿ