利用 MPlatform 五天零代码搭建 Web 站点

导语

---

2020年2月10日，我入职上海零米信息技术有限公司。入职后接到的第一个任务是从零到一搭建官网，要求两周上线。
作为前七牛云的市场运营童鞋，官网博客什么的也做过不少。无非就是框架设计、制作原型、内容填充、交互设计，最后开发上线，于是乎，我向老板要设计资源和开发资源，老板竟然说，你一个人就可以搞定的。

image

纳尼？！我一个不会设计、不会敲代码、妥妥的市场妹子怎么可能搞定……确定不是逗我？
但，老板执意如此：“用我们的 MPlatform 就可以了，两周肯定能上线。”

MPlatform 是个啥？我们不是做运维产品的么？这和运维有啥关系？

image

前端童鞋甩了个链接给我，就这样，开启了我工作三年来的“程序媛”工作。结果，一周之后真的搭好了，而且，超过了一个高级前端的水平……

什么是 MPlatform

---

在运维领域的前端开发实践中，需要前端搭建开发环境、编写组件、梳理业务逻辑、联调后端接口、发布上线等一系列繁琐的工作，中间一个环节的出错，就会引发项目的延期、功能的不稳定等一系列问题。
如何让运维童鞋专注于业务逻辑的同时，降低代码冗余、开发成本和潜在风险？
MPlatform 应运而生。MPlatform 是 OpsMind 打造的一个快速搭建 Web 站点的平台。在开发过程中，只需要进行简单的组件拼接，组织整理 CMDB 中的数据，就能完成整站的搭建任务。
MPlatform 已经被相关客户实践，并成为公司大量业务系统开发的轴心一环，推动了运维监控系统整体视觉和交互规范的逐渐完善，也使其在前端技术中得到落实。

为什么搭建官网选择 MPlatform

---

和运维业务系统开发一样，传统官网开发上线的重要一环便是前端开发，MPlatform 可以实现任何 Web 站点的搭建，其中的差异只是前端开发前的框架设计而已。相比于传统开发来说可以降低周期，相比于其他 Web 站点搭建平台来说，使用 MPlatform 从前期的搭建到后期的维护都可以自由把控，做到所想即所得。

• 学习成本低，无须敲代码，只需拖拽控件和录入文字；
• 数据同步间隔可配置，实时准确无遗漏；
• 规范了交互方式、页面及组件样式，非常适合交互样式比较固定的业务系统。

准备工作

---

• 申请试用 OpsMind，获得 MPlatform 使用权限
• 设计官网原型图，便于后期自主搭建官网
• 准备官网展示需要的素材，图片、文字、文档等

操作实践

---

• 认识 24 栅格
• 模块搭建
• 内容填充
• 设计交互优化
• 预览成品

学习操作页面

1.认识 24 栅格

我们将整个网页设计区域按照 24 等分的原则进行划分，划分之后的区块我们称之为『盒子』。每排横向排列的盒子数量最多四个（100%），最少一个（25%）。需要的内容在相应的盒子里添加控件即可。

image

2.模块搭建

将官网想象成一个人，控件好比于人体的骨骼，通过添加各类控件可以形成框架。最常见的控件有图片、标题、文本和按钮，使用这些控件即可搭建好官网的框架。

基础控件

我们以搭建一个 banner 为例。在 24 栅格中添加标题、文本和按钮这三个控件即可形成 banner 的框架（如下图）。

banner框架

3.内容填充

控件里的内容可通过数据里的状态自定义填充，填充完整后就相当于有血有肉的人，是丰富实在的。我们继续在标题、文本、按钮控件里的数据中修改文本，改为你想呈现的样式即可，但由于样式还未修改，属于草稿，需要添加设计来美化。

状态

4.设计交互优化

数据可以样式调整，如文字大小、内外边距、颜色、对齐方式等，调整之后也就穿上了衣裳，是可对外的完整的。

样式

5.预览成品

通过模块搭建、内容填充和设计交互优化即可实现一个模块的搭建，完整的站点是通过各个模块拼接实现的。在这过程中，通过 MPlatform 不用敲任何代码，只需依照框架设计，实时调整，实时更新。

效果图

更多使用场景

---

零代码开发的成品便是opsmind.com。官网作为最常见的网站搭建站点，对设计、交互、丰富性的要求比业务操作系统要求更为繁杂，工单系统、发布管理系统、博客、成本管理等交互性更简单的业务系统搭建起来会更为简单易操作。