Self Project(七)

你微笑时很美_
312 阅读7分钟

H5自定义表单整体系统分析

时间：2019.05-2020.01

关键名词解释

云平台 ：总部阿里云服务器，负责H5地址分发，接口中转，来往数据备份，大数据分析，个性化方案出口

客户数据库：客户安装I8的服务器连接的数据库

云平台数据库：阿里云服务器连接的数据库

思维导图

1pNQIS.png

用户使用场景

  1. 用户在手机端通过相机、浏览器等App扫描二维码，打开H5页面

  2. 打开H5页面时无需登录，无需身份验证

  3. 在多个H5页面中导航时、或者中途退出H5页面然后再次打开时，页面会自动载入数据缓存

  4. 点击提交按钮，组合H5页面中的数据并调用指定的后台API，完成保存动作

生成二维码时序图

lOD6Df.png

H5发布时序图

lOBtYj.jpg

用户扫码新增H5表单时序图

lOYKtx.png

用户扫码修改/查看H5表单时序图

lOYl9K.png

用户保存H5表单时序图

lzFrC9.png

业务流程驱动开发细节

FastDP注册-业务插件

  1. 如果生成 H5 表单的业务类型已经有系统表单的业务单据，则H5的保存更新操作，去反射调用业务单据的保存更新接口。这个保存更新接口定义在 Enterprise3.WebApi.ApiControllerBase 中，业务单据需要继承这个接口，并实现里面的 Save 方法
    • 如果系统单据在 H5 表单中增加了新的明细表，则保存的时候，首先调用业务组的保存方法，保存已存在的业务表的数据，然后调用 H5 表单的保存方法去保存新增的明细表
  2. H5 表单没有对应业务单据的时候，保存更新方法，直接调用后台生成的自定义保存方法
  3. H5 表单的查询接口，全部调用表单发布时生成的后台取数接口，但是有个注意项
    • 如果是查询系统单据表，系统单据表必须要在列注册的地方去勾选明细表的外键

FastDP列注册

  1. 开放外键勾选框，并且限制每个表只能勾选一个外键
  2. 列注册增加必填项，代表这个字段拖到表单设计器之后，必须选择一个默认值，表单才能发布

H5表单设计器

  1. H5表单设计器除了以前APP自定义表单的功能外，要增加分页设计的功能，并添加 H5 相关控件（音频，视频等）
  2. H5表单初始化的时候，遍历工具栏，查看工具栏里面的必填项，并直接带出到设计器的内容中，不用用户再拖拉。

H5表单代码生成

  1. 除了完成类似于（但不完全相同）APP自定义表单的代码转换外，还要实现：

    • 支持多页转换，即转换出来的页面有分页功能

    • 支持必填项控件设置初始值

    • 支持读取Url参数值，判断当前二维码是否失效，失效就中断用户操作

    • 支持存储用户已输入的值，即当前用户首次打开，输入值之后，不管因何种原因退出了页面，再次扫码打开当前页面的时候，还原已输入的值

    • 支持生成初始值，无须用户输入，直接显示

    • 支持生成H5相关控件（视频，音频）

    • 支持后台保存逻辑分支判断，系统表单和自定义表单走不同的保存接口，取数接口一致

    • 支持后台功能注入

    • 发布自定义表单成功的时候：

      1. 从数据库中拉取云平台地址

      2. 调用云平台的接口，将表单地址和数据库相关信息传给云平台，成功之后，云平台返回一个主键

      3. 将 业务类型+H5+方案号，云平台返回的主键，云平台地址 作为参数存到fg_appformmenu表中

        示例：EFORM900000123H5-001

难点：模板发布路径布置：如何做到每个模板有单一入口，但是公共文件有相同依赖

H5方案列表界面

  1. 支持一个业务类型同时启用多个方案

  2. 增加生成二维码按钮，选中某个方案，一键生成二维码到指定路径，服务器上也存一份，然后生成成功后，界面上谈一个框出来，展示刚才生成的二维码，二维码路径为服务器上保留的那张二维码。

    二维码生成细节：

    • 点击二维码按钮后，弹出框的设计：左边是二维码显示框，右边或者下边是固定值选择框，可以选择；类似于组织，部门等信息，选好之后，点击确定，或者其他展示方式，产品经理决定。然后把这些信息，混合云平台地址和二维码主键生成到二维码中。
    • 上面中的组织，部门等信息是从列注册中的必填项拉取出来的

云平台功能点

  1. 提供类似于nginx的反向代理功能

  2. 提供一个保存H5模板地址的接口

  3. web攻击防护（CC攻击，dos攻击）

  4. 判断当前二维码是否是失效的，如果已失效，则弹出提示框，并关闭页面，强制退出

  5. 调用客户服务器接口注意点

    • 调用客户服务器的数据处理接口（涉及数据库操作），都应该有一个包含了能连接一个明确数据库所需的参数的JSON串，客户服务器有对应的底层controller拦截器，接受并处理连接参数，为后期数据库操作做准备。（如果没有这些登录信息，默认以H5表单发布的那个服务器的发布帐套信息来连接）
  • 身份验证安全问题：客户服务器要知道是云平台调用的，才去正确处理请求。（这个另外讨论，因为如果使用token，也要讨论token的生成规则）

二维码

  1. 二维码生成需要哪些数据，这些数据存在哪

    • 云平台地址（这个地址最好是存到客户数据库中，可配置）

    • 二维码自身主键（时效性用）

    • 列注册的必填项

    • 二维码配置数据主键（根据主键找到该码对应的数据库连接所需要的信息，这些信息存储到云平台数据库中）

      该主键能找到的信息

      • 客户i8接口调用所需要的数据库连接参数（帐套号，操作员，组织？）

      • 客户i8服务器，H5模版地址

      • H5模版展示的选填信息（类似于，模板名，填报日期）

        （这些选填信息一定是文本格式，且字数不会太长！）

  2. 扫描二维码打开H5页面

    • 云平台接收到请求，通过请求中的配置数据主键，找到H5模版地址（这应该是一个静态页面地址），重定向到改地址

    • H5静态页面打开，监听到页面documentLoaded事件的时候，解析document.location.search(展示参数),给H5模板中的选填数据赋值。

H5页面

  1. 数据缓存功能（即用户输入数据之后，不管何种原因退出表单，重新进入时，可以恢复数据）
  • 通过用户输入之后的完成事件，把控件的id作为key，控件的值作为value，存到localStorage中
  1. 传给云平台的时候要有token验证身份。

接口规范

扫码打开H5表单接口规范

参数名 值（示例） 备注
业务单据主表数据主键 (phid) phid=6217550001101 修改/查看取数
H5表单操作类型 (otype) otype=add 当前页面是新增还是修改/查看
配置数据主键 (qrcode_id) qrcode_id=5001102001 凭此从云数据库取出H5相关配置数据

完整url示例： ng.clound.cn/website/ope…

H5表单保存接口规范

参数名 值（示例） 备注
i8保存接口地址（url） http://10.0.10.2/i8/SUP/CustomH5/Save
保存参数（params） { formdata : {} , griddata : {} ,buscode : '', BillNoStatus : ''}

完整保存接口示例：

$.ajax{
  url:'http://ng.clound.cn/website/save',
  type:'POST',
  data:{
    url:'http://10.0.10.2/i8/SUP/CustomH5/Save',
    params:'{ formdata : {} , griddata : {} ,buscode : '', BillNoStatus : ''}'
  }
}

数据字典

二维码发布调用云平台接口

参数名 值示例 备注
data {"address":"http://32.11.7.19/i8/H5/index.html","buscode":"EFORM900001666","default_options":"{"orgname":"新中大总部","username":"月树","year":2020,"month":7,"title":"校园招聘"}"}

完整接口示例:

using ng.clound.service

JObject ret=JsonConvert.DeserializeObject( NgCloundService.Publish(data) );

if ( ret["success"]=="True" )

{

}

else

{

throw new Exception( ret["error"] )

}

云平台H5配置表数据字典

fg_h5_config

字段名 字段类型 示例
主键 (phid) Int64 400123997711
i8H5表单地址 (address) varchar(50) http://32.11.7.19/i8/H5/index.html
业务类型 (buscode) varchar(20) EFORM900001666
H5默认显示项 (default_options) varchar(1000) {"orgname":"新中大总部","username":"月树","year":2020,"month":7,"title":"校园招聘"}

云平台请求 i8 H5表单示例:

$.ajax{
  url:'http://32.11.7.19/i8/H5/index.html',
  type:'POST',
  data:{
    phid:6217550001101,
    otype:'edit',
    default_options:'{"orgname":"新中大总部","username":"月				    树","year":2020,"month":7,"title":"校园招聘"}'
  }
}
avatar
文章
阅读
粉丝