澳门尼威斯人

1、Vue & Element 管理后台的功能特点

该框架包含了两个功能强大的前端:基于Asp.net的Bootstrap管理后台;以及基于Vue & Element的管理后台,Vue & Element是纯粹的前后端分离。两个前端基础功能基本相同,使用相同的数据库,均可以基于代码生成工具快速生成框架代码,高效的增量式开发系统模块。

本篇介绍微信后台管理功能,在原先基于Asp.net的Bootstrap前端基础上,增加的Vue&Element前端的后台管理功能介绍。 

 

2、Vue & Element 管理后台功能介绍

2.1)微信多账号管理

在微信后台管理系统中,需要对系统设计到的一些微信账号信息进行配置,包括订阅号、公众号、企业微信、小程序等账号列表的管理。账号列表界面如下所示,便于综合的管理配置处理。

在账号列表中,可以管理我们业务系统所涉及到的各种微信账号信息,如公众号、企业微信、小程序等,可以在其中维护相关的配置信息。 微信账号的编辑界面如下所示,在其中管理各种用到的微信账号信息,便于后台API的接口访问。 

 

微信账号管理,主要就是配置好和微信公众号、企业微信的相关参数,方便调用微信API接口的随时,根据这些参数获得访问接口的Token,以便实现对菜单、事件、通讯录、发送数据等等的相关处理 ,另外也可以接收腾讯微信回调信息,如事件响应、订单支付等操作的事件。  

2.2)微信菜单管理

 我们知道,公众号或者企业微信的手机端中底部都有相关的功能菜单,这些我们可以通过后台系统的API接口提交,那么我们后台管理也需要对微信菜单数据进行管理。我们在系统中管理菜单,并通过把菜单提交到服务器上,实现菜单的动态配置和生成,能够为我们系统适应各种的需要,实现灵活的处理。 首先我们在管理的入口先维护菜单的分组,菜单分组其实也是一个菜单记录,只是作为一个顶端的菜单记录存在,方便维护而已。 菜单分组可以禁用、启用,新增、编辑,以及展示该分组下的树形列表和提交到微信服务器上的功能,如下所示是我们对菜单分组的界面设计。

 

以上是一个全览的菜单管理,包括菜单分组以及分组下的菜单列表状态,我们有时候需要进入菜单列表明细的方式查看相关菜单数据,如下界面所示。

这样我们就有一个对菜单群进行统一维护的菜单分组,也方便我们随时启用某个菜单组群,以便对某个应用进行简单的测试或者体验,特别在我们微信框架整合了多个项目,以便客户切换不同项目进行使用,就显得更加方便。某个时候,随时提交一下就可以及时进行测试,不需要的时候,再更换一个不同的应用菜单群组。  

2.3)微信账号和对接管理

 在微信后台管理系统中,需要对系统设计到的一些微信账号信息进行配置,包括订阅号、公众号、企业微信、小程序等账号列表的管理。

微信开发框架,提供了标准的微信账号信息填写界面,录入对应的信息,完成微信后台的对接,即可开启开发微信应用之旅了。微信账号的编辑界面如下所示,在其中管理各种用到的微信账号信息,便于后台API的接口访问。。

 账号登录公众号后台或者企业微信后台,我们根据和账号配置一致对应的信息,完成系统对接即可,以下是微信公众号的配置对接界面。

 后台系统配置和官方微信后台的配置对接成功后,就需要设置好对应的公众号或者企业微信等的菜单了。

其中每项菜单,都包含一个触发的事件,要么是普通的单击事件,要么是视图事件,要么是扫码事件等等,如下菜单类似所示。

 

2.4)菜单的事件和内容管理

除了菜单的网页链接事件外,其他菜单的事件,如click类型事件等,都需要后台管理系统在接收到腾讯微信事件回调的时候,进行一一响应的,我们可以自定义我们的响应内容,因此引入了一个后台管理中的事件和内容管理,用于一一响应对应的事件代码。如下是内容管理列表和详细内容界面。

有了这些内容定义,我们就可以在事件定义中,选取一个或者多个内容定义作为事件的主要内容承载了。事件管理列表界面如下所示。

在新建或者编辑事件界面中,我们增加一个选择内容的按钮事件入口,如下所示 

在弹出界面中,我们选择对应的内容进行处理即可。

选中的内容,以标签的形式展示出来。

微信事件的编辑界面如下所示,类似新增界面的内容。

2.5)Vue&Element的权限管理界面展示:

主体框架界面采用的是基于后台配置的菜单动态生成,左侧是菜单,右边顶部是特定导航条和内容区,这个和我们ABP框架的前端界面是一致的。 系统主界面的开发,基本上都是标准的界面,在系统左侧放置系统菜单,右侧中间区域则放置列表展示内容,但是在系统菜单比较多的时候,就需要把菜单分为几级处理。系统菜单在左侧放置一个自定义菜单组件列表,这样通过树形列表的收缩折叠,就可以放置非常多的菜单功能了。 

用户管理界面,沿袭Bootstrap框架的布局进行管理,通过用户机构方式,快速展示用户分页列表,如下界面所示。 

机构管理界面如下所示。 

角色管理界面如下所示。 

其角色的编辑界面如下所示,包括了基础信息、用户、菜单、权限等项目。 

整个系统的菜单,既可以通过默认Mock的初始菜单,也可以通过后端API获得的菜单资源,动态在界面上进行展示,系统界面左侧的菜单是动态获取并展示出来的,结合路由的判断可以限制用户访问的菜单权限。菜单管理界面如下所示。 

菜单资源在角色管理中分配给具体角色,即可实现对菜单的动态控制管理了。 前端的界面管理,依旧可以通过分拆模块的方式,完成更加方便的组合处理