转载

msMaker后台管理系统生成工具

msMaker线上地址： http://msmaker.nfop.ms.netease.com/index

msMaker使用说明： http://nfop.ms.netease.com/open/doc/msmaker_help

我们知道，后台管理系统有以下几个特点：

对UI没有定制化需求
浏览器兼容性要求低
交互模式较简单、较单一，主要是表单提交，表格展示数据。

总得来说就是后台管理系统的视觉、交互要求比较低，以实现功能为主，这使得我们的方案可行。msMaker可以有效提升开发后台管理系统的效率和降低开发的门槛，可以满足绝大部分后台管理系统的需求。msMaker有以下几个特点：

可视化，前端页面通过拖拽组件生成，实时预览页面效果
全配置，无需编写代码，系统的页面布局、样式、交互、网络请求、路由导航全部通过配置实现，但是当涉及到一些复杂情况和高度自定义，系统也提供了编写代码的功能
可以与后台接口动态交互，对后台接口要求较少，可在系统中直接调试
基于饿了么的 Element 组件库开发，组件丰富，如果Element不能满足需求，我們也可以自己去扩展组件，满足大部分的应用场景

msMaker后台管理系统生成工具

动作、事件

事件和动作是交互的基础。我们可以给组件注册事件，事件在对应的时机会触发。比如按钮组件有点击事件，用户在点击按钮时，按钮的点击事件就会触发。事件触发表示有交互要发生，交互由一系列的动作组成。我们可以在事件中加入动作，表示在事件触发时，将要发生哪些行为。下面我们来看一下简单的例子。

我们给按钮加点击事件，在点击事件中加入显示消息框这个动作。用户在点击按钮时，就会弹出消息框，这就是msMaker中配置交互的基本操作。

动作

下面我们看一下，msMaker中都有哪些动作。动作一共分为5类

状态动作: 它决定了其他动作的执行与否。比如表单验证这个动作，我们需要验证成功之后再发送请求，验证失败就不发送请求。举例，表单验证和网络请求。状态动作包括： 触发网络请求 、 表单操作 、 上传组件操作 、 树组件操作 。
表格动作: 后台管理系统最常用的就是表格组件。状态动作包括： 获取表格行信息 、 标记表格行 、 删除表格行 、 添加表格行 、 清空表格 、 修改表格行 。获取表格行信息这个动作的作用是把某一行表格数据赋值给其他组件，主要应用在表格编辑和表格数据展示。标记表格行主要标记你正在操作的表格行，主要应用在表格删除。添加、删除、修改、清空用于表格的本地操作。
消息动作：消息动作用来进行消息提示。消息动作包括： 显示消息框 、 整页loading 。
组件交互：组件交互类动作是指会改变组件属性或者指令的动作。包括： 显示/隐藏组件 、 显示/隐藏对话框 、 改变组件属性 、 选择框赋值 、 关联组件 。
其他动作：其他动作包括 刷新页面 、 增加/删除循环 、 跳转页面 、 url查询参数赋值 。

msMaker后台管理系统生成工具

状态动作

动作的执行流程控制,动作分为普通动作和状态动作。状态动作可以控制动作执行的流程。每个动作都有三种状态，绿色表示成功时执行，红色表示失败时执行，蓝色表示总是执行。一个状态动作的控制范围是它和下一个状态动作（包括下一个状态动作）之间所有的动作。演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/action.mp4

表格动作

表格的操作主要分为两类。一类是和后台进行通信交互，比如每一次添加、删除都是直接向后台发送请求，请求成功之后再刷新表格数据；另一类是本地操作，比如每一次添加、删除都是对本地表格的操作，最后把整体的表格数据发送给后台。 删除表格行 、 添加表格行 、 清空表格 、 修改表格行 都是指对本地表格的操作。 获取表格行信息 、 标记表格行 这两个动作是通用类型动作。

我们重点说一下 获取表格行信息 、 标记表格行 两个动作。我们在操作表格行时，系统需要你对操作的表格行进行标记，以此来识别你操作的是哪一行数据。比如删除动作，删除动作的实际执行时机一般是在删除弹框的确定按钮的click事件中执行。而这个弹框和表格之间是完全没有联系的，所以需要先对要执行的表格进行一下标记，也就是执行 标记表格行 动作，系统才会知道你要删除的是哪一行。我们在编辑或者查看表格行信息时，需要把该表格行的数据赋值到展示组件上去，而 获取表格行信息 动作就是负责这一功能的。大家可以先看下下面的演示视频：

表格编辑和表格删除演示： http://msmaker.nfop.ms.netease.com/assets/static/help_video/table_operate.mp4

消息动作

消息类动作主要用于操作成功或者失败的提示信息，还有对于加载时间长的loading提示。现在loading动作只支持全屏loading，还不支持局部组件的loading。

组件交互

显示/隐藏组件 动作可以根据其他组件值控制被控组件的显示/隐藏。演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/control_display.mp4

显示/隐藏对话框 动作是用来控制对话框的显示/隐藏的，注意该动作和 显示/隐藏组件 动作是不一样的。 显示/隐藏组件 动作是通过 display 属性来控制组件的。而 显示/隐藏对话框 动作是对话框组件自己来控制的，有动画效果和一些特殊处理。对于对话框尽量使用 显示/隐藏对话框 动作来控制。

改变组件属性 动作主要是用来改变组件的一些静态属性。

选择框赋值 动作用来将选择框的lable或者value赋值给其他组件。选择框有一个特点，就是它的下拉列表有value和lable两个属性，lable是显示名称，value是实际值，比如显示的 是 ,实际的值是 true 。通常这两个属性的值是不一样的，在一些这两个值都需要的场景下，我们就可以使用选择框赋值这个动作。选择框赋值时，只有两个字段可选择，一个是selectedLabel，表示选择框的label属性；一个是value，表示选择框的value属性。

关联组件 动作可以将两个组件的属性关联起来，被控组件的属性随着控制组件的属性改变而改变，这些属性包括控制和隐藏。

其他动作

刷新页面 动作，顾名思义，就是刷新一下当前页面，应用场景比较少。

增加/删除循环 动作用于本地循环的增删。主要应用于需要上传一个循环列表的场景下。后台数据也可以直接应用于组件的循环展示。演示视频： http://msmaker.nfop.ms.netease.com/assets/static/help_video/loop.mp4

跳转页面 、 url查询参数赋值 这两个动作是一对动作。实际的应用中我们会从一个页面跳转到另一个页面，而且经常会带参数跳转。 跳转页面 动作可以配置我们要跳转的页面以及需要带的参数。 url查询参数赋值 动作可以将查询参数值赋值到页面的组件中去。演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/url_param_assign.mp4

网络请求

网络请求用来配置ajax参数，和后台进行交互。网路请求主要包括三部分，一是参数选取，二是请求数据类型选择，三是请求数据应用。

参数选取 : 参数有三种类型：一种是组件的绑定值，比如输入框、选择框这些表单的值；一种是自定义值，比如分页请求，每页多少条数据；第三种是你可能需要发送很多表单值，一个一个选比较麻烦，所以产生了第三种对象展开值这种方式，我们可以直接选择整个表单数据这个对象作为参数，系统会自动帮你把对象值取出来作为参数发送；演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/send_request.mp4；

请求数据类型 : 默认的是application/x-www-form-urlencoded，也就是我们最常用的表单数据，这种方式只适合发送简单的原始类型数据和简单数据；涉及到复杂的数据结构，我们应该用json字符串发送，这时候应该选择application/json这种结构。当数据中有文件格式的时候，我们应该选择multipart/form-data方式。

请求的数据应用 : 请求的数据我们可以选择应用到我们页面任何一个组件上，表单、表格、循环等。演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/render_table.mp4

调试

如果想在Msmaker中直接对后台接口进行调试，有两种方法，一个是进行跨域请求，另一个是用系统的mock功能。

跨域请求 ：在Msmaker发送其他域名的请求会有跨域问题，有以下两种解决办法

配置服务器允许 http://msmaker.nfop.ms.netease.com/跨域请求
配置浏览器的跨域访问。chrome的配置链接： http://blog.mingsixue.com/debug/Chrome-cross-domain-set.html

mock ：当后台还没有开发好接口或者服务器不允许跨域，我们在Msmaker中设置每个请求的mock数据，方便本地调试。演示视频： http://msmaker.nfop.ms.netease.com/assets/static/help_video/mock.mp4

工程配置

工程配置包括通用的全局配置。包括 通用配置 、 脚本配置 两类。

通用配置

页面title : 浏览器标签title
顶部导航标题 : 工程顶部导航栏左侧显示该工程的标题/logo
首页地址 : 用于设置系统首页，该页面不在导航栏中显示，比如欢迎页、登录页
导航栏宽度 : 左侧导航栏的宽度，根据自己需要调整，一般默认就可以
网站域名 : 用于调试接口，ajax请求的url会自动加上网站域名，只在Msmaker中生效
CDN路径配置 : 如果将下载的js放到CDN上，你需要设置js的CDN路径
加入通用权限管理模块 : 后台管理系统都会有权限管理模块，所以Msmaker中加入了通用权限管理模块，用于后台直接引入。帮助预览
导航栏动态配置 : 左侧导航栏默认是按照在Msmaker中配置的导航列表显示，如果需要进行自定义控制，则配置一个接口用于导航栏显示。如果加入通用权限管理模块，则该配置无效，默认由通用权限管理模块接管
顶部导航栏是否需要登录/注册按钮 : 是否需要登录/注册按钮
顶部导航栏是否需要展示用户名 : 如果需要展示用户名，需要配置一个返回用户名信息的接口和一个退出登录的接口
全局网络请求配置 : 标示请求是否成功字段 、 成功状态码 、 请求结果描述信息字段 这三个属性是每个请求都需要配置的，在这里配置一个全局的，就不需要每个请求再单独配置。请求中的配置优先级高于全局配置。
登录拦截设置 : 登录拦截需要配置一个拦截状态码和登录地址，一旦后台请求返回该拦截状态码，系统会自动跳到登录地址页面。如果加入通用权限管理模块，则该配置无效，默认由通用权限管理模块接管
全局公告设置 : 用于设置全局公告，包括静态公告和动态请求公告

脚本配置

脚本配置用于通过配置达不到目的，需要高度自定义的地方。比如表格某些内容的显示，后台字段0对于否，1对于是，时间戳要显示为时间字符串等。

脚本配置中分为三类：

全局过滤器 ，应用的地方有表格单元格的过滤函数、ajax请求返回数据的过滤函数、ajax请求参数的过滤函数、core-text组件的格式化函数，演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/deal_param.mp4
渲染函数 ，可以应用vue的render函数来渲染想要的dom，主要应用于表头格式渲染、树组件的内容渲染
自定义校验规则函数 ，用于定义复杂的校验规则,演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/validator.mp4

重要功能

页面复制 ：后台管理系统经常会有很多类似的页面，可以直接复制页面然后改动，提高效率
组件复制 ：使用Msmaker过程中经常会遇到重复性的组件，比如新建弹框和编辑弹框，结构、功能基本一致，可以直接复制，演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/copy.mp4
组件定位 ：可以使用ctrl+鼠标左键可以选中组件，并定位该组件的左侧导航中的位置
工程合并 ：用于多人协作，前期可多人独立开发，最后合并为同一工程，演示地址： http://msmaker.nfop.ms.netease.com/assets/static/help_video/project_combine.mp4