基于Struts2的无刷新翻页报表系统的设计与实现

ＳＯＦＴｒＷＡＲＥ　ＤＥＶＥＬ０ＰＭＥＮＴ　ＡＮＤ　ＤＥＳＩＧＮ　软件开发与设计　基于Ｓｔｒｕｔｓ２的无刷新翻页报表系统的设计与实现　崔志勇　，钱存华　，姚绍武　，邵建峰　（１．南京工业大学，南京２１１８１６；２．湖州市新开元碎石有限公司，湖州３１３０２２）　摘要：探讨了Ｊ２ＥＥ平台下的ＭＶＣ开发模式，研究基于Ｓｔｒｕｔｓ　２框架的Ｗｅｂ报表，分析了Ａｊａｘ数据交换技术，　实现了Ｗｅｂ报表无刷新翻页的功能。　关键词：Ｓｔｒｕｔｓ　２；异步交互；无刷新翻页；Ａｊａｘ　Ｄｅｓｉｇｎ　ａｎｄ　Ｒｅａｌｉｚａｔｉｏｎ　ｏｆ　Ｎｏｔ　Ｒｅｆｕｒｂｉｓｈｉｎｇ　Ｆｌｉｐｂｏｏｋ　ｆｏｒ　Ｒｅｐｏｒｔ　Ｆｏｒｍｓ　Ｓｙｓｔｅｍ　Ｂａｓｅｄ　ｏｎ　Ｓｔｒｕｔｓ２　ＣＩＪＩ　，ＱＩＡＮ　Ｃ，ｍｈ￣，ＹＡＯ　Ｓｈａｏｗｕ　，￥ＨＡＯ　Ｊｉ｜　（１．Ｎａｎｊｉｎｇ　Ｕｎｉｖｅｒｓｉｔｙ　ｏｆ　Ｔｅｃｈｎｏｌｏｇｙ，Ｎａｎｊｉｎｇ　２１１８１６；２．Ｈｕｚｈｏｕ　Ｘｉｎｋａｉｙｕａｎ　Ｃｒｕｓｈｅｄ　Ｓｔｏｎｅｓ　ＣＯ．，ＬＴＤ，Ｈｕｚｈｏｕ　３１３０２２）　Ａｂｓｔｒａｃｔ：Ｔｈｉｓ　ｐａｐｅｒ　ａｎａｌｙｚｅｓ　ｏｎｅ　ｏｆ　ｔｈｅ　ＭＶＣ　ｍｏｄｅｌｓ　ｏｎ　Ｊ２ＥＥ　ｐｌａｔｆｏｒｍ，ｒｅｓｅａｒｃｈｅｓ　Ｗｅｂ　ｒｅｐｏｒｔ　ｂａｓｅｄ　ｏｎ　Ｓｔｕｒｔｓ　２，ａｎａｌｙｚｅｓ　Ａｊａｘ　ｉｎｔｅｒｃｈａｎｇｅ　ｏｆ　ｄａｔａ　ｔｅｃｈｎｏｌｏｇｙ，ａｎｄ　ｉｆｎｉｓｈｅｓ　ｌｆｉｐｂｏｏｋ　ｗｉｔｈｏｕｔ　ｒｅｆｒｅｓｈｉｎｇ　ｆｏｒ　Ｗｅｂ　ｒｅｐｏｒｔ　ｏｆｒｍｓ．　Ｋｅｙ　ｗｏｒｄｓ：Ｓｔｕｒｔｓ　２；Ｉｎｔｅｒａｃｔ　Ａｓｙｎｃｈｒｏｎｏｕｓｌｙ；Ｎｏｔ　Ｒｅｆｕｒｂｉｓｈｉｎｇ　Ｆｌｉｐｂｏｏｋ；Ａｊｘａ　随着计算机技术和网络技术的普及，很多公司及企事业单　式；使用ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ对象在用户和服务器之间交换操作　位需要将一些积累的数据做成报表，以便汇总及阅读。常用　数据；使用ＪａｖａＳｅｒｉｐｔ将它们绑定在一起，动态实现上述目的。　的报表形式主要有Ｅｘｃｅｌ报表、ｗｏｒｄ文档以及ｐｄｆ格式的报表　２　传统的Ｗｅｂ应用模型及Ａｊａｘ工作原理分析　等等，在此主要探讨Ｗｅｂ报表。　目前大多Ｗｅｂ报表都属于传统的Ｗｅｂ网页，是同步工作　Ｗｅｂ报表在数据量不多的时候，也往往会有数百数千甚　的，单击一个链接或按钮，向服务器提出请求，需要和服务　至数万条记录，这些数据放在一页显示，会出现等待页面的　器交换数据，客户端等待服务器的响应，然后刷新整个页面　延时过长，上下篇幅过多，不方便阅读。因此，目前的Ｗｅｂ　（如果使用框架则刷新框架内页面）。即便只有网页的小部分　报表基本采用分页的方式，这样每页显示不多的记录方便阅　内容需要更新，整个页面的数据都需要同步交换。　读。很多Ｗｅｂ报表页面翻页的时候，是在向服务器提交请求，　使用Ａｊｘａ技术，客户端和服务器端交换数据是异步的，　然后等待服务器响应，客户端浏览器得到响应，刷新页面。　数据的更新不会导致整个网页的改变，只更新数据改变的那　这个过程不仅传递了下一页所需的数据，也传递了页面的显　部分。从这个角度看，Ａｊｘａ反应速度更快。　示形式的ＨＴＭＬ代码，传递显示形式是一个重复的工作，每　如图１，两种工作模式的唯一不同是Ａｊａｘ在浏览器和服　一页的显示形式基本一样，只有数据才是必须传递的。而用　务器之间增加一个Ａｊａｘ引擎，用户向服务器发送请求时，不　户再提交请求，还有一个等待服务器响应和数据传递的过程，　直接发过去，而是由Ａｊａｘ引擎处理后再发送给服务器。服务　这个等待的时间是可以缩短和隐藏的，数据传递量也可以去　器在向用户浏览器返回数据时，也是通过引擎处理后，再显　除显示形式的代码数据，就此问题提出解决方法。　示到客户端浏览器。　１　Ｓｔｒｕｔｓ２和Ａｊａｘ技术　大部分界面上的用户动作触发一个事件到Ｗｅｂ服务器的　Ｓｔｕｒｔｓ２不是简单地对Ｓｔｕｒｔｓ的升级，是以ＷｅｂＷｏｒｋ的设　Ｈ１ＴＩＰ请求，服务器完成一些处理，接收数据，处理计算，再访　计思想为核心，吸收了目前使用广泛的ＭＶＣ框架Ｓｔｕｒｔｓ１的部　问其他的数据库系统，最后返回一个ＨＴＭＬ页面到客户端。　分优点，建立起来的优秀的ＭＶＣ框架。Ｓｔｕｒｔｓ２采用一种非常　这种旧的途径使得每一个动作用户都要等待，如何按桌　松耦合的设计，让系统的Ａｃｔｉｏｎ不再与Ｓｅｒｌｅｔ　ＡＰＩ耦合，增强　面程序的思维设计Ｗｅｂ应用，不让用户总是等待。通过在用　了单元的测试性。Ｓｔｒｕｔｓ２具有强大的标签库，这些标签不仅　户和服务器之间引入一个Ａｊｘａ引擎，可以消除Ｗｅｂ的开始一　提供了表现层的数据处理，同时还提供了国际化、Ａｊｘａ、上传　停止一开始一停止这样的交互过程。使用Ａｊａｘ技术，不像加载　下载的功能。　一个页面一样，在会话的开始，浏览器加载了一个Ａｊａｘ引擎，　Ａｊａｘ是Ａｓｙｎｃｈｒｏｎｏｕｓ　ＪａｖａＳｃｒｉｐｔ　Ａｎｄ　ＸＭＬ的缩写，由　采用ＪａｖａＳｃｒｉｐｔ编写并且通常在一个隐藏ｆｒａｍｅ中。这个引擎　Ａｄａｐｔｉｖｅ　Ｐａｔｈ公司的Ｊｅｓｓｅ　Ｊａｍｅｓ　Ｇａｒｒｅｔｔ于２００５年２月在一篇　负责绘制用户界面以及与服务器端通信。如图２所示，Ａｊａｘ　演讲中提出这个术语。ＡｊａＸ不是新技术，而是几种原有技术的　引擎允许用异步的方式实现用户与程序的交互，不用等待服　重新应用。这些技术包括：ＸＨＴＭＬ和ＣＳＳ处理网页内容和表　务器的通信。所以用户不用打开一个空白窗口，看到等待光　现形式；使用文档对象模型（Ｄｏｃｕｍｅｎｔ　Ｏｂｊｅｃｔ　Ｍｏｄｅ１）作动态显　标不断地刷新，等待服务器完成后再响应。　示和交互，控制网页；使用ＸＭＬ和ＸＳＬＴ作为数据交换的格　要产生一个ＨＴｒＰ请求的用户动作由ＪａｖａＳｃｆｉｐｔ调用Ａｊａｘ　收稿日期：２０１０—０４—０５　引擎来代替。任何用户动作的响应不再要求直接传到服务器，　一１一　

电脑编程技巧与维护　例如简单的数据校验、内存中的数据编辑，甚至一些页面导　航，引擎自己就可以处理它。如果引擎需要从服务器取数据　框架。　＜ｆｉｌｔｅｒ＞　＜ｆｉｌｔｅｒ－ｎａｍｅ＞ｓｔｒｕｔｓ２＜／ｔｉｌｔｅｒ－ｎａｍｅ＞　来响应用户动作，假设它提交需要处理的数据，载入另外的　界面代码，或者接收新的数据，引擎让这些工作异步进行，　＜ｆｉｌｔｅｒ－ｃｌａｓｓ＞ｏｒｇ．ａｐａｃｈｅ．ｓｔｒｕｔｓ２．ｄｉｓｐａｔｃｈｅｒ．ＦｉｌｔｅｒＤｉｓ—　通常使用ＸＭＬ，不用再耽误用户界面的交互。　客户端浏览器　：　客户端浏览器　“～　＾　一一一　一　…一～一　一　…　………　…．……　．…．　．　Ｉ　用户接口　用户接１３　ｃｓｓ　Ｉ　Ａｉａｘ引擎　ｗｅｂ服务器或　ｗｅｂ服务器　ＸＭＬ服务器　ＪＪ　Ｔ　Ｊ　１、　Ｉ　用户接１３　Ｉ　用户接１３　■………………………一～　■………～…～…………ｊ　；　－　服务器端系统　●　…　冀　至筝…　●　　、传统的Ｗｅｂ应用模式　Ａｊａｘ　Ｗｅｂ应用模式　图ｌ传统Ｗｅｂ应用模型与Ａｊａｘ模型的比较　传统的Ｗｅｂ模式（同步）　ＡｊａＸ下Ｗｅｂ模式（异步）　图２传统Ｗｅｂ应用的同步交互过程和Ａｊａｘ应用的异　步交互过程的比较　３　报表无刷新翻页实现　（１）配置ｗｅｂ．ｘｍｌ文件，添加ｆｉｌｔｅｒ的声明，使用Ｓｔｒｕｔｓ２　—８一　ｐａｔｃｈｅｒ　＜／ｆｉｌｔｅｒ－ｃｌａｓｓ＞　＜／ｉｆｌｔｅｒ＞　＜ｆｉｌｔｅｒ－ｍａｐｐｉｎｇ＞　＜ｆｉｌｔｅｒ－ｎａｍｅ＞ｓｔｒｕｔｓ２＜／ｆｉｌｔｅｒ－ｎａｍｅ＞　＜ｕｒｌ－ｐａｔｔｅｒｎ＞／　＜／ｕｒｌ－ｐａｔｔｅｒｎ＞　／＜ｆｉｌｔｅｒ－ｍａｐｐｉｎｇ＞。　（２）配置ｓｔｒｕｔｓ．ｘｍｌ文件，声明ｒｅｓｕｌｔ—ｔｙｐｅｓ，即在客户端　请求的数据名称及类型；声明ａｃｔｉｏｎ，根据客户端的用户动作　匹配相应的ａｃｔｉｏｎ，并作出处理和响应。　（３）在ｉａｖａ　ａｃｔｉｏｎ中声明用户请求的数据类型变量，该变　量与ｒｅｓｕｈ—ｔｙｐｅｓ所定义的变量必须名称和类型都相同，并且　根据用户动作，给变量赋值。　（４）将上面的变量以ｘｍｌ数据的形式传递到客户端。　（５）客户端脚本对ｘｍｌ数据进行接受并解析，通过Ｊａｖａ　Ｓｃｒｉｐｔ实现无刷新的翻页。　创建ｘｍ１Ｈｔ【ｐ对象，ｏｂｊＸｍｌＨｔｔｐ＝ｎｅｗ　ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　０；　发送请求、调用回调方法，ｘｍｌＨｔｔｐ．ｏｐｅｎ（”ＧＥＴ”，ｕｒｌ，　ｆａｌｓｅ）；　ｘｍｌＨｔｔｐ．ｓｅｔＲｅｑｕｅｓｔＨｅａｄｅｒ（”Ｉｆ＿Ｍｏｄｉｆｉｅｄ—Ｓｉｎｃｅ”，”０”）；　得到返回过来的ＸＭＬ对象，进行数据处理　ｖａｔ　ｘｍｌＤｏｃ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ　ｒ”Ｍｉｃｒｏｓｏｆｔ．ＸＭＬ—　ＤＯＭ”）；　ｘｍｌＤｏｃ．１ｏａｄＸＭＬ（ｘｍｌＨｔｔｐ．ｒｅｓｐｏｎｓｅＴｅｘｔ）　根据对数据的分析，通过ＪａｖａＳｃｒｉｐｔ实现页面的无刷新更　新。　４分页查询的存储过程及实现　在实现翻页的过程中，需要对数据进行分页。传统的方　法是一次性将客户端所需的所有数据从数据库获取，保存于　服务器端的内存中，这种方法对资源消耗多，同时一次性获　取所有数据，可能造成用户等待时间偏长。　服务器端业务处理层实现与数据库进行数据交换，通过　建立存储过程的方法每次取出当前页所需的数据。数据量会　减少很多，同时数据可执行的速度会更快，服务器对客户端　的响应时间相应减少。　根据输入参数当前页码、每页显示的数据量、所查询的　表名称以及排序依据的字段名称来获取数据库数据。其实现　分页查询的存储过程代码如下：　ＣＲＥＡＴＥ　ｐｒｏｃ　ｐｒｏｃＰａｇｉｎａｔｉｏｎ　＠ｃｕｒｒＰａｇｅ　ｉｎｔ，＠ｐａｇｅＳｉｚｅ　ｉｎｔ，＠ｔａｂｌｅＮａｍｅ　ｖａｒｃｈａｒ（５０），　＠ｔａｂｌｅＩｄ　ｖａｒｃｈａｒ（５０）　ａＳ　ｂｅｇｉｎ　ｄｅｃｌａｒｅ＠ｓｑｌ　ｖａｒｃｈａｒ（８０００）　ｓｅｔ＠ｓｑｌ＝　ｓｅｌｅｃｔ　ｔｏｐ　＋ｃｏｎｖｅｒｔ（ｃｈａｒ（５），＠ｐａｇｅＳｉｚｅ）＋　ｆｒｏｍ　＠ｔａｂｌｅＮａｍｅ＋　ｗｈｅｒｅ　＠ｔａｂｌｅｌｄ　ｎｏｔ　ｉｎ　ｓｅｔ＠ｓｑｌ＝＠ｓｑｌ＋　（ｓｅｌｅｃｔ　ｔｏｐ　＋ｃｏｎｖｅｒｔ（ｃｈａｒ（５），＠ｐａｇｅ—　Ｓｉｚｅ　ｒ＠ｃｕｒｒＰａｇｅ－１））＋　＂＋＠ｔａｂｌｅＩｄ＋　ｆｒｏｍ　＋＠ｔａｂｌｅＮａｍｅ　（下转到１１页）　

Ｓ０ＦｒＷＡＲＥ　ＤＥＶＥＬ０ＰＭＥＮＴ　ＡＮＤ　ＤＥＳＩＧＮ　业务逻辑层去访问ＤＡＬ数据访问层直接处理数据。　前台ＵＩ层也提供了一些对于用户输入数据的验证功能，　目的是在提高效率，把能在前台做的操作直接操作。　（２）ＢＬＬ业务逻辑层接受前台ＵＩ层发送过来的数据，并　Ｊ　软件开发与设计　（４）数据库公用访问组件采用的是动软开发Ｍａｔｉｃｓｏｆ１．　ＤＢＵｔｉｌｉｔｙ组件封装了ＡＤＯ．ＮＥＴ数据访问代码，涉及到本次插　入功能的ＥｘｅｃｕｔｅＳｑｌ方法。该组件将所有的ＡＤＯ．ＮＥＴ组件都　封装到控件中，可以增加代码复用。　三层架构是一种严格分层方式，用户通过前台ＵＩ层发送　把数据校验后将逻辑传递给ＤＡＬ层，此层为前台ｕＩ层和　ＤＡＬ层建立一个桥梁。　（３）ＤＡＬ数据访问层直接处理ＢＬＬ层传递过来的数据，　信息给后台ＢＬＬ业务逻辑层，业务逻辑层处理数据，并把数　据发送给ＤＡＬ数据库访问层，ＤＡＬ层通过公有的数据库访问　组件进行底层的数据处理。同样，用户获取数据也必须通过　例如添加ＩＰ黑名单操作。该层操作全部采用参数化查询方式，　避免危险的ＳＱＬ注入。添加ＩＰ黑名单代码如下：　ｖｏｉｄ　ｉｎｓｅｒｔ（ｓｔｒｉｎｇ　ｓｔａｒｔｉｐ，ｓｔｒｉｎｇ　ｅｎｄｉｐ）　与ＢＬＬ层交互。三层之间松散耦合，各层之间通信必须通过　｛　相应接口。　ｓｔｒｉｎｇ　ｓｔｒ＝”ｉｎｓｅｒｔ　ｉｎｔｏ　ｂａｄｉｐ（ｂｓｔａｒｔ，ｂｅｎｄ，ｂｓｔａｒｔｓｔｒｉｎｇ，　ｂｅｎｄｓｔｒｉｎｇ）ｖａｌｕｅｓ（？，？，？，？）”；　３　结语　ＯｌｅＤｂＰａｒａｍｅｔｅｒ　ｆ］ｏｐ＝ｎｅｗ　ＯｌｅＤｂＰａｒａｍｅｔｅｒ［４］；　主要讨论了基于．ＮＥＴ三层架构的全文传递系统的实现。　ｏｐ【０】＝ｎｅｗ　ＯｌｅＤｂＰａｒａｍｅｔｅｒ（”＠ｂｓｔａｒｔ”，ＯｌｅＤｂＴｙｐｅ．　三层架构是目前软件开发的主流方向，这种架构的系统具有　Ｄｏｕｂｌｅ）；　开发效率高、耦合度低、易于维护等特点。　ｏｐ【１］＝ｎｅｗ　ＯｌｅＤｂＰａｒａｍｅｔｅｒ（”＠ｅｎｄ”，ＯｌｅＤｂＴｙｐｅ．　Ｄｏｕｂｌｅ）；　ｏｐ［２］　＝ｎｅｗ　ＯｌｅＤｂＰａｒａｍｅｔｅｒ（”＠ｂｓｔｒｉｎｇ”　，　参考资料　ＯｌｅＤｂＴｙｐｅ．ＶａｒＣｈａｒ）；　［１］徐建哲，沈芳阳．三层结构及其应用实例研究【Ｊ】．广东工　ｏｐ［３］　＝ｎｅｗ　ＯｌｅＤｂＰａｒａｍｅｔｅｒ（”＠ｂｅｎｄｓｔｒｉｎｇ”，　业大学学报，２００３，１２（１２）：７９—８０．　ＯｌｅＤｂＴｙｐｅ．ＶａｒＣｈａｒ）；　【２］胡百敬，姚巧玫．ＳＱＬ　Ｓｅｒｖｅｒ　２００５数据库开发详解［Ｍ］．　ｏｐ【Ｏ】．Ｖａｌｕｅ＝ｓｔｒｉｎｇＴｏＬｏｎｇ（ｓｔａｒｔｉｐ）；　北京：电子工业出版社，２００６．　ｏｐ【１】．Ｖａｌｕｅ：ｓｔｒｉｎｇＴｏＬｏｎｇ（ｅｎｄｉｐ）；　ｏｐ［２】．Ｖａｌｕｅ＝ｓｔａｒｔｉｐ；　．　【３］叶安胜．．ＮＥＴ通用数据访问层封装［Ｊ］．成都大学学报　ｏｐ［３］．Ｖａｌｕｅ＝ｅｎｄｉｐ；　（自然科学版），２００７．　Ｍａｔｉｃｓｏｆｔ．ＤＢＵｔｉｌｉｔｙ．ＤｂＨｅｌｐｅｒＯｌｅＤｂ．ＥｘｅｃｕｔｅＳｑｌ（ｓｔｒ，ｏｐ）；　（上接第８页）　ｓｅｔ＠ｓｑｌ＝＠ｓｑｌ＋　ｏｒｄｅｒ　ｂｙ　＋＠ｔａｂｌｅＩｄ＋　１　ｏｒｄｅｒ　ｂｙ　互性能好的Ｗｅｂ开发模式。目前各大浏览器和技术平台对Ａ—　＋＠ｔａｂｌｅｌｄ　ｊａｘ持续关注和支持，通过ＭＶＣ框架结合Ａｊａｘ技术会得到越　ｅｘｅｃ（＠ｓｑ１）　ｅｎｄ　来越广泛的应用。　ＧＯ　参考文献　５　ａｊａｘ缓存问题　【１】丁波，晁爱农．基于Ｓｔｒｕｔｓ２框架的ＡＪＡＸ开发研究［Ｊ］．　Ａｊａｘ使用时，有一个问题，删除一项，恢复之后就不能　计算机工程与设计，２００９，３０（１６）．　再接着删除，必须要等一段时间，这是ＩＥ缓存的问题，解决　［２］刘利军，王冉冉，马帅，黄青松．基于Ｊ２ＥＥ的Ｗｅｂ报表　方法探讨：　系统的设计与实现．计算机技术与发展Ⅲ，２００７，１１　（１）在Ａｊａｘ请求的页面后加个随机函数，可以使用随机　（１７）．　时间函数，在ＪａｖａＳｃｒｉｐｔ发送的ＵＲＬ后加上ｔ＝Ｍａｔｈ．ｒａｎｄｏｍ　０。　【３］吴淑雷，雷景生，陈焕东．基于ＸＭＬ的异构数据交换技　不是直接把ｔ＝Ｍａｔｈ．ｒａｎｄｏｍ（）拷贝到ＵＲＬ后面，应该是：　术．广西师范大学学报【ＪＪ，２００７，６（２５）．　ＵＲＬ＋”＆”＋”ｔ＝”＋Ｍａｔｈ．ｒａｎｄｏｍ　０：　【４］肖舒，赵建华，李宣东，等．Ｊ２ＥＥ平台上的所见即所得　（２）在ｘＭＬＨｎｐＲｅｑｕｅｓｔ发送请求之前加上ＸＭＬＨｔｔｐＲｅ－　的ＨＴＭＬ电子表格工具的设计．计算机科学［Ｊ］，　ｑｕｅｓｔ．ｓｅｔＲｅｑｕｅｓｔＨｅａｄｅｒ（”ｉｆ－Ｍｏｄｉｉｆｅｄ—Ｓｉｎｃｅ”，”０”）一般情况　２００７，１２（３４）．　下，这里的ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ不会直接使用。应该在代码　ＸＸＸＸＸ．ｓｅｎｄ（ＹＹＹＹＹＹ）；前添加ＸＸＸＸＸ．ｓｅｔＲｅｑｕｅｓｔＨｅａｄｅｒ（’．　Ｉｆ－Ｍｏｄｉｆｉｅｄ—Ｓｉｎｃｅ”．”０”１。　作者简介　６结语　崔志勇，男（１９８３一），硕士研究生，研究方向：可靠性研究、　针对传统的Ｗｅｂ报表翻页等待的问题，提出了使用　信息系统。　Ｓｔｒｕｔｓ２＋Ａｊａｘ架构、同时在数据库端使用分页查询的存储过程　钱存华，教授／博士。　的方案来解决此问题。这个方案可以提供更高效、便捷、交　邵剑峰，讲师／硕士。