1、敏捷开发框架-查询页面模型-QueryPage

http://oa.ecidh.com/KMS/AppKMS/Article/article.aspx?id=KMS202000090&strToken=6d1dd74cb51040a2af69745595f326a7

 

敏捷开发框架：查询页面模型 

 

查询页面的开发：

下面以用户管理为例子

打开效果以下：

整体结构就是上面查询条件

接着是 查询按钮

接着是 功能按钮

最后是 数据列表展现

这种style的页面在任何一个项目中都是绝大多数的，经过总结抽象，定义为 QueryPage 查询页面

如何实现一个查询页面：

 

查询条件：研发人员根据业务场景，按照要求摆放

查询结果：研发人员根据业务场景，添加具体的列

 

查询条件：

结构都以下

查询结果：

也就是Table表格

这样子：就差很少了。

下面看如何实现这个查询页面的功能

要求以下

1、点击按钮要可以查询数据并展现

2、点击清空按钮要可以清楚查询条件值

3、这个页面打开可能要求默认查询数据

4、这个页面查询的时候可能须要按照某字段默认排序

5、要支持分页事件的实现

6、分页还要支持分页大小可调整

7、要支持排序事件的实现

8、要支持选择框，实现按选择操做、实现全选等

9、要实现列表列用户能够本身选择显示几列

10、要实现默认导出功能

……

11、须要方便的实现删除功能

12、须要方便的实现弹出新增画面、编辑画面

未完……待续……不断的冒出新的要求……

 

上面的等等功能在QueryPage中实现。

经过追求极致的设计理念+高度的抽象封装

 

 

如何实现上述功能：

首先你只须要上述一行代码

就实现了查询画面的基本功能。

实现了：

1、对查询按钮注册了click事件，当你点击查询的时候，就实现加载数据。

       怎么加载的？调用什么API？查询条件是怎么传的？

       searchApi告诉了，是调用 user 的 search API方法

       至于查询条件嘛，不须要你写，框架自动实现

二. 对查询清空按钮注册了click事件，实现清除查询条件功能

      另外经过 EciTable类初始化了 表格

自动实现：

5、要支持分页事件的实现

6、分页还要支持分页大小可调整

7、要支持排序事件的实现

8、要支持选择框，实现按选择操做、实现全选等

9、要实现列表列用户能够本身选择显示几列

10、要实现默认导出功能

      导出都实现了，对的，有个前提，你的按钮是叫 btnExport

 

 

那好，咱们来继续模拟需求的变化：

产品经理要求，打开这个页面，马上查询数据

开发人员只须要在增长红色框线中的代码便可。

 

产品经理要求，打开这个页面，查询数据的时候，默认按照USERNAME 升序排列

如上，搞定

 

接下来，要开发UserEdit画面

查询列表里面，有个编辑按钮，我要实现点击编辑按钮的时候弹出一个画面实现编辑

 

增长红色框线的代码

要告诉page editUrl也就是要打开的页面地址：

按钮【编辑】只须要写 page.edit(this) 便可

效果以下：

是否是很是简单，已经简单不到不能再简单了

连编辑的是哪一条记录都不须要你关心了。

虽然不须要你写代码，关心仍是要关心的。咱们看看打开的这个页面地址

 

哦，的确打开的是UserEdit画面，同时还传了USERID=xxxx

为何是USERID  而不是USERNAME

看看page初始化的代码

这里有个很是核心的 keyField,任何表都有主键的。须要研发人员告诉QueryPage对象。

好，弹出编辑页面实现了，的确很是容易。

 

若是没有配置，就默认是按钮的名字

 

 这个是用来控制弹出窗体的标题

 

 

接下来实现功能

 

在页面上有【添加新用户】按钮，其实也就新增功能，只是叫的名字不同而已，那这个要怎么实现

 

其实你已经实现了，什么已经实现了，只要上面设置了 EditUrl ，由于咱们 编辑和新增是共用一个页面。

不行，我总得要写点什么吧，否则无码可码了。

这个愿望好难实现。那怎么就实现了的总归要告诉我吧。

 

如上图：只要你的按钮名字叫 btnAdd就能够了。

我非不，我就不叫btnAdd,

想自找麻烦，证实存在感，好吧，知足你

例如你按钮id 叫  btnImHere

 

回到页面初始化的地方，你能够指定 addId

框架中设计的全部默认值都是能够从新指定的，照顾到可能的灵活性。

同时建议你们遵照一致的约定，来得到最大的方便性。

 

好吧，新增、编辑都这么轻松了实现了。那咱们来看看删除吧，这个逻辑相对复杂。

还能这么轻松的应对？

 

 好了，这样加上述红色框线部分的代码就实现了。

 既然是删除，总归要告诉 调用后台哪一个API，deleteApi 就是这个做用

 第二部分加的是按钮，只要调用 page对象的 delete方法

        注意 page.delete(this) this 很关键

        由于已经不要你关心调用API的时候传递当前行的主键，框架帮你完成了，这个this就点击的按钮，

        框架经过按钮自动找到行，自动取主键

 

 

好吧，为难为难你，若是要删除的时候弹出的提示不同，我要自定义

 

 那，我要删除的时候比较慎重，要提示肯定要删除吗?还要用户输入验证码

不光输入验证码，我后台API逻辑还不要调整。

为何这么刁难，其实也不是刁难

前台一会说要验证码，我后台加

一会又说不要验证码，我后台删

你爱要不要，我后台就不写，那怎么办

 

框架关于验证码，由底层封装实现，对应用透明，应用只关注哪一个地方须要增长验证码便可。

那如今我删除这块就要，怎么弄？

 

只要增长红色框线部分的配置便可。

 

产品经理说：为方便客户操做，双击行也能打开编辑画面

这个样看到这一行数据的时候，不用拖到最左边点击【编辑】按钮

需求合理，支持

增长 click:true  便可

用户动态实际上是双击打开，这里面为了方便开发人员编码体验，命名为 click

打开的画面就是前面介绍的 EditUrl配置的编辑画面

 

好吧，须要变了，点击【编辑】是打开编辑画面，双击打开的是这个对象的 View查看画面

为何要设计两个画面呢，由于view画面只给查看不给编辑

若是设置了ViewURL优先取viewUrl

 

好吧，变态的需求用来了。

我双击仍是打开EditUrl 可是要能区分是双击来的（咱们双击定义为查看）

这又是为什么？不是说好的若是这样写两个画面吗？

不要有意思，我先烦，综合考量，view画面和编辑画面可能也没有什么差异，就是要隐藏两个按钮

我决定共用了。

OK，没有问题，你的须要框架已经知足  ViewUrl="UserEdit?view=true"

便可。其实框架还能帮忙作的更好，不要你写ViewURL   你前面设置了 EditUrl  若是是双击的时候自动会带view=true参数给你

 

 

好的，如今从查询页面弹出了编辑画面

产品经理但愿，在编辑画面关闭的时候，要可以刷新查询页面

怎么实现？

 

增长editClosed 回调函数便可

 

其实上面的逻辑在大部分的状况下是须要完善的，关闭就刷新是不对的。

只有弹出的画面，新增了数据或者修改了数据才应该刷新。对吧。不然就是一次性能浪费

仅仅是性能浪费吗？不止！反作用不少。

 

那要实现修改后才刷新页面怎么办？

上面的代码，增长 红色框线部分的代码就完成了你的需求。

怎么实现的，框架设计了敏捷开发框架《弹窗交互设计》后续分享

 

 

好吧，上面貌似都是基本的增删改查功能。

 

那我要实现以下图的，对这一行数据用户【启用】、【停用】功能怎么实现

 

【启用】

只须要一行代码，告诉你要调用后台哪一个API便可。

参数都不要告诉？

你的关注点是对的，调用后台API 

关注两个点，1、调用哪一个API、2、传递哪些参数

调用哪一个API业务决定，参数框架抽象统一

简单吧。

那继续，启用后，我要从新查询下列表

继续，产品经理说，这个操做要慎重，在操做前要弹出窗确认下是否要启用

只要加上 msg：内容便可

 

那实现停用，只要考别这一行，改改便可

变化在于红色的地方

 

好了，行内的启用、停用实现了

产品经理又来了，用户反馈咱们须要批量的功能

 

代码实现以下图：

和前面行内的代码，只有一个mode（模式）的区别

 

怎么作到的？

敏捷开发框架抽象封装了Action动做模型，EciAction类 经过抽象总结 极大的简化代码的开发

EciAction后续分享

 

继续功能开发：

这里设计了对用户设置角色的功能

点击按钮【设置角色】弹出 设置角色画面

 

一样经过action动做模型 行为方式 采用 dialog弹出指定窗体来实现

url地址经过智能表达式解析实现开发的简化

弹出的页面地址 UserRole 参数自动注入。

{keyValue}就是主键值

智能处理主键吗？NO 若是仅仅是主键，那就不能叫智能

业务需求是这样的，弹出的标题，要有意义，能辅助读懂业务含义

对用户《昆山华东资讯》这我的设计角色，这样不是更好

 还能解析 row上的全部字段，这样开发就进一步简化了。

 可能在一个功能上简化，感受不到什么，多了，就更能体现价值了。

例如 咱们还有【分配权限】的功能要开发

弹出效果：

代码以下：

 

至此，介绍了 QueryPage的  6 成 功力，你们先了解下！欢迎和我交流  QQ：93346562