网易乐得技术团队

msMaker后台管理系统生成工具

背景

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

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

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

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

总得来说就是后台管理系统的视觉、交互要求比较低,以实现功能为主,这使得通过拖拽配置生成后台管理系统的方案可行。msMaker可以有效提升开发后台管理系统的效率和降低开发的门槛,可以满足绝大部分后台管理系统的需求。让我们来了解一下msMaker,msMaker有以下几个特点:

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

image

使用流程

  1. 拖拽页面:打开网站,拖拽组件形成页面

  2. 导出配置文件:做到一半,可以导出工程的配置文件,下次继续做。配置文件保存着工程所有的信息,务必妥善保存

  3. 导入配置文件:导入上次的配置文件,可以在上次的基础上继续制作

  4. 下载工程:下载工程,进行本地调试,发布上线

动作、事件

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

image

我们给按钮添加点击事件,在点击事件中加入显示消息框这个动作。事件有一个地方需要注意的是,页面初始化动作在core-root的就绪事件中配置。用户在点击按钮时,就会弹出消息框,这就是msMaker中配置交互的基本操作,通过事件和动作的组合,形成丰富的交互系统。

动作

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

image

  1. 状态动作: 它决定了其他动作的执行与否。动作列表有一个执行流程,我们有一些根据动作返回结果决定执行流程的场景,比如表单验证这个动作,我们需要验证成功之后再发送请求,验证失败就不发送请求。状态动作包括:触发网络请求表单操作上传组件操作树组件操作

  2. 表格动作: 后台管理系统最常用的就是表格组件。状态动作包括:获取表格行信息标记表格行删除表格行添加表格行清空表格修改表格行。获取表格行信息这个动作的作用是把某一行表格数据赋值给其他组件,主要应用在表格编辑和表格数据展示。标记表格行主要标记你正在操作的表格行,主要应用在表格删除。添加、删除、修改、清空用于表格的本地操作。

  3. 消息动作:消息动作用来进行消息提示。消息动作包括: 显示消息框整页loading

  4. 组件交互:组件交互类动作是指会改变组件属性或者指令的动作。包括:显示/隐藏组件显示/隐藏对话框改变组件属性选择框赋值关联组件

  5. 其他动作:其他动作包括刷新页面增加/删除循环跳转页面url查询参数赋值

状态动作

动作列表的执行流程的控制通过动作的状态来配置。状态动作可以控制动作执行的流程,每个动作都有三种状态,绿色表示成功时执行,红色表示失败时执行,蓝色表示总是执行。一个状态动作的控制范围是它和下一个状态动作(包括下一个状态动作)之间所有的动作。演示地址: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发送其他域名的请求会有跨域问题,有以下两种解决办法

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对于是,时间戳要显示为时间字符串等。

脚本配置中分为三类:

重要功能

注意事项

  • 组件嵌套有一定的规则,以Element组件使用方式为准

  • 配置组件属性时,有时候会出现一些视图不更新或者更新错误的情况,请刷新一下页面

  • 表单验证,el-form-item的表单域字段和el-form-item表单组件中的v-model名称必须保持一致

  • 选择框赋值时,只有两个字段可选择,一个是selectedLabel,表示选择框的label属性;一个是value,表示选择框的value属性

  • 显示/隐藏组件动作和显示/隐藏对话框动作不同,注意区分

  • 下载工程时,为减小文件体积,在Mock关闭的情况下,不下载mock数据;如想本地预览,请在下载工程时,打开Mock开关

在使用中如果有任何问题或者有好的意见和建议,请联系`bjwangyahui@corp.netease.com`