前端表单型页面——小结

一、整体流程解析

打开页面之后,首先显示loading样式,同时请求权限。

权限应该包括2个方面,数据和界面。

  • 数据:比如同一个图表,小组的成员只能自己的数据,组长可以看到全组的数据,部门领导人可以看到整个部门的数据。
  • 界面:根据权限的不同,页面上部分控件的可见性和可操作性对不同的员工是不一样的。

根据请求到的权限,再去请求数据和初始化页面(渲染页面)。

初始化页面就是在页面上渲染无数据的控件。这个环节也是有可能向发起请求的,比如需要动态的组装下拉菜单,或表格。初始化页面完成后,这个页面此时,其实已经可以让用户进行交互了,它应该是独立而完整的,不能因为没有数据而无法交互。请求数据和初始化页面应该是解耦的。比如,当用户是通过点击新建而不是编辑进入到这个页面的时候,看到的就是现在的状态。

请求数据和初始化页面可以并行进行。当这两个行为都完成的时候,开始用数据来填充页面。填充完毕后,关闭loading样式。

进入展示页面的环节,用户可以操作页面和录入数据等。在操作的过程中可能会有一些实时校验或者是辅助操作,也需要发起请求,比如用户名不能重复等。

用户完成数据录入之后,可能会有4种最终操作。返回,保存,重置和撤销。其中返回和保存更为常见。

返回和保存都需要先组装数据。

  • 返回时,需要将新数据和原始数据进行比较,判断是否有修改而未保存,此时需要提示用户进行保存。
  • 保存时,需要先组装数据,再校验数据完整性,比如必填字段和长度限制等等,如果没有通过校验则需要提示用户,如果通过校验则需要调用接口进行保存。保存和更新数据的接口应该返回保存后的数据,再用这些数据去填充页面,比如,新建接口至少应该返回id,以便用户在当前页面再次修改时,能够找到上次新建的实体。

重置与撤销类似,重置需要准备一份空数据;而撤销需要提前存储一份原始数据。然后再用这些数据去填充页面。

二、控件接口规范

一个完整的控件至少需要对外暴露3个接口,初始化控件、给控件赋值、获取控件的值。

相关文章:

  • 2022-12-23
  • 2021-04-29
  • 2022-12-23
  • 2022-02-10
  • 2021-08-11
  • 2022-12-23
  • 2022-12-23
  • 2021-12-30
猜你喜欢
  • 2021-10-02
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-06-05
相关资源
相似解决方案