OpsMind 前端低代码开发平台——MPlatform（低代码前端工具）

简介

MPlatform，是 OpsMind 一个快速搭建 WEB 站点的平台。在开发过程中，只需要进行简单的组件拼接，就能完成整站的搭建任务，与传统开发方式相比，省去了很多编写代码的工作量。MPlatform 的前身为 OpsMind dashboard，当时的开发平台性能差、卡顿严重、配置繁琐，随着客户需求的不断增加，经过开发团队长时间的摸索和开发，MPlatform 诞生了，相比于之前的版本，MPlatform 借鉴了各大现代框架的设计思想，极大的提高了用户在使用上的体验，它把已有的组件有结构的组织在一起，使用拖拽的方式组装成最终的页面。

平台功能主要分为以下几项：

1、组件（Mcomponent）

2、用于组装组件的编辑器可视化界面

3、基于 OpsMind 自研的 CMDB 和 Workflow 提供数据的展示和修改

视图布局

用于组装组件的编辑器如下图所示，它主要包含几个模块：

1、左侧为组件树的展示和修改，由内置的各个组件组装而成。MPlatform 为组件树提供了丰富的操作选项。除了添加、拷贝粘贴、预览、删除等功能，还可以通过拖动组件在组件树中的位置，即时的在预览区域展示出效果。

2、预览区块占据了页面的右半边部分。在组件树中，每个组件都可以单独预览。组件的预览，显示的是这个组件及其子组件共同作用的效果。预览根组件，能看到完整的页面。也可以通过右上角的按钮进行完整页面的预览。

3、右侧页面属性配置，都有可配置的属性，面板可以对左侧选中的组件进行配置。如，配置按钮组件的颜色、大小等，都取决于组件开发者对该组件的预留项。

组件制作

OpsMind 内置一套 UI 组件库，可以满足日常的页面需求，如组件无法满足需求或者有一些特定场景的组件需求时，可能需要自己动手去编写一些组件了。

下图展示了一个组件的脚本编辑区域

获取服务器数据

MPlatform 已和 OpsMind 的 CMDB、Workflow 等系统的数据打通，所以在 MPlatform 里获取 CMDB 的数据或者触发工作流的任务是很容易的。

对于 MPlatfrom来说，CMDB中的对象都是一种资源，每种资源都有不同的组件来进行可视化展示。

如果想展示一些表格信息，最简单的操作就是导入一个常用查询的表格，如下图。

如果想列举一些人员、服务器、部门的关系，可能是这样的。

理念

相比于传统的开发模式，前端需要搭建开发环境、编写组件、梳理业务逻辑、联调后端接口、发布上线等一系列繁琐的工作，中间一个环节的出错，就会引发项目的延期、功能的不稳定等一系列问题。

这时候，MPlatform 应运而生，对原本混沌的 JavaScript 代码按照标准模式进行组织和分类。据此来构建出的 Web App，不仅提高了系统的可维护性，并且便于和其他开发者进行沟通，从而形成一个巨大的开发链条。借助其他开发者提供的一批模块，使我们能够专注于业务逻辑，同时降低代码冗余、开发成本和潜在风险。

基于模块化开发的大体思路。我们在对一堆看似杂乱无章的 DOM 结构进行归纳、总结、提炼，使之成为一个个独立的组件。数个组件的协同工作，呈现出一个完整的页面。

生态

在运维领域的前端开发实践中，MPlatform 已经成为大量业务系统开发的轴心一环。在存在 CMDB 中的数据进行组织和整理，形成最终的用户可见页面过程中，不仅推动了运维监控系统整体视觉和交互规范的逐渐完善，也使其在前端技术中得到落实。

当前市面上存在着比较多的前端组件化框架，大多门槛较高。MPlatform 提供更低廉、简洁的使用方式组装大量重复存在而交互样式较为单一的业务系统，实现了自己的模块管理机制。

优势

1、平台化的规范了交互方式、页面及组件样式。非常适合交互样式比较固定的业务系统。

2、简易高效的界面搭建，节省了大量的开发时间和精力。

3、使用了可视化的编辑模式，所见即所得。极大的降低了前端开发的学习成本和门槛。团队中其他角色的成员，也能够轻松简易地上手。