Self Projects(二)

162 阅读2分钟

通用帮助

时间:2018.6-2018.8

名词解释:通用帮助就是一个带有查询框和表格组成的一个能够过滤选择数据的Modal。

通用帮助示例

KoMiLQ.png

UI组成

  1. 触发控件

    触发控件是一个select下拉框,重写它的onTriggerClick事件,将通用帮助的唯一标识,向后端发送异步请求,得到后端的UI展示所需要的属性配置json,通过通用帮助的展示控件呈现出来。

  2. 展示控件

    一个Ext.window控件,最基本的通用帮助展示控件由top上的一个查询栏加上center的一个table。

功能实现

  1. 通用帮助注册

    Koh9Ug.png
    • Form注册内容

      图中标红的表示必输内容;帮助标记表示帮助在数据库中的唯一性;表名指数据来源;代码字段和名称字段表示前端在代码转名称的时候使用后端传过来的json对象中的哪两个字段。

    • Table注册内容

      table里面的每一行的注册内容表示在通用帮助展示控件-window里面的table的列,每一列的数据来源。

  2. 通用帮助取数赋值逻辑

    开发员使用配置如下图。

    KohC5Q.png

    用户点击select下拉框的时候,触发onTriggerSelect事件,我会把用户配置的helpid的值传给后台取数接口,后台拿到这个值去数据库里面取出通用帮助的相关UI配置信息,和展示给用户的数据。

    用户可以通过setClientFilter这个方法配置数据库过滤语句,由于服务器的防火墙和安全考虑,直接明文发送,会造成403错误,所以这里我用了RSA加密。

    后端取数使用了redis缓存,不会造成短时间内重复拉数据,导致数据库崩溃的问题。

  3. 多选通用帮助

    在通用帮助基础上,实现了可以多选的通用帮助,注册、配置以及取数方式都一样,用xtype:'ngMultiHelp'来区分。

    KoMPsg.png

项目总结

  通用帮助这个项目打开了我将对象元数据化的思维,所有可视化的对象都能分割为具有独立属性的元数据,怎么划分依据对象想要实现什么效果,一个产品驱动设计的设计模式。这个项目为后来的我去实现的app自定义表单项目打下了坚实的理论和实践基础。