基于jQuery的企业网上银行账户日程模块设计与实现

姜美珠， 何剑锋

(东华理工大学软件学院，江西 南昌 330013)

网上银行业务作为在传统银行业务上新增的服务渠道，在国外获得了很大的发展(吴建，2011)。有大型银行建立自有团队开发网上银行，也有中小银行购买由大型信息科技公司开发的成熟的网上银行产品，如IBM提供的多渠道银行电子商务解决方案(李伟庆，2009)，用户在使用中得到良好的用户体验。在国内，虽然尚有多家银行使用Frame加页面跳转形式的界面，但随着招商银行等率先将OPOA理念运用于其网上银行用户界面中，新技术的运用也逐渐多了起来。

本文阐述了企业网上银行中账户日程模块的设计思想，该模块使用JavaScript与Ajax技术异步地提交请求、收到响应结果后局部动态刷新的浏览器页面，致力于提供一个更加用户友好的界面。该模块的亮点在于以日程的方式在日历中展示用户账户的交易明细，可直接在某日的格子内预约该日的转账，并用走势图的直观方式向用户展示账户资金余额，也是国内外网上银行的一个良好的功能创新点。

1 模块功能设计

1.1 账户日程模块的功能需求

企业网上银行产品，致力于为金融机构提供一个为零售客户、小企业客户以及大型企业客户部署在线解决方案的独立平台。主要开发目标是为客户提供基于OPOA理念的更加友好界面，并且增加新功能以便为网上银行使用者提供更优质的服务①Top 10 2010-Main，https://www.owasp.org/index.php/Top_10_2010-Main[EB/OL]，OWASP，2010.。账户日程模块是一个全新的功能，其功能主要分为三个部分:

(1)查询账户日程信息:将转账信息的摘要(包括相关账户及金额)以日程的形式显示(可以按一个月、一周或一日的方式显示)，方便用户把握自己账户每日的转账信息。转账信息共分四种状态:已完成、待处理、待审批、待定的。

(2)快速转账功能:该模块支持确定转账和待定转账。确定转账即用户同意可以生效的转账;待定转账即用户暂定的、可能还需修改的转账，该转账需转为确定转账后方可生效。在日历界面中可以直接添加转账而无需进入转账模块，减少用户的操作，并可以即时地在日程中反映出新增转账给账户带来的变化。

(3)资金余额查询及走势图:此功能可以查询过去日期内的余额信息，并提供在未来某日指定账户的资金余量，还可以根据用户预先设置的账户资金范围提供资金不足和资金过量的提示，方便该网上银行用户对资金提前进行分配，以提高资金的利用效率并防止出现资金余额不足的情况。

图1 系统框架Fig.1 System framework

1.2 系统架构

该企业网上银行采用了Struts2和jQuery整合的方式实现服务器端和浏览器端的功能。系统的总体框架如图1所示:

图1中，后端系统为银行的交易记录数据库。FFI框架部分是业务逻辑层，负责核心逻辑及与表示层及数据库的交互。该部分已经提供了转账、查询余额等功能。

账户日程模块开发的重点是表示层的构建，该层负责显示用户界面、响应用户请求并与业务逻辑层进行交互，包括Struts 2框架相关内容(Action、Interceptor、配置文件)、JSP和 JS脚本等，负责接收、处理浏览器的请求并将处理结果返回至浏览器端(杨钟鸣，2010)。

1.3 服务器端设计与实现

账户日程模块的实现需要调用部分系统接口，其中转账模块已有UI和接口，因此账户日程模块中需要实现的部分为:能够调用获取转账信息摘要接口的适配器及描述适配器信息的配置文件，摘要信息的载体，用于响应浏览器端请求的Struts2 Action，基于jQuery的用户界面等。由此设计出账户日程模块的系统框架(图2)。

账户日程模块针对转账的操作均由转账模块实现，服务端最主要的功能是获取指定账户中转账信息的摘要和资金余额的查询和预测。为了实现这些功能，应实现响应浏览器端请求的账户日程、管理账户日程模块数据的帐户日程管理器、描述各个适配器信息的配置文件、调用FFI框架中各类转账信息查询接口的Adapters，以及作为转账信息摘要数据载体的账户日程事件等等。具体实现描述如下:

(1)响应浏览器端请求的账户日程Action，它是Struts 2框架下用于解析并完成账户日程模块请求的Action类。

(2)调用FFI框架中各类转账信息查询接口的适配器，其作用是将转账信息中的相关账户信息、发生时间、金额等数据提取出来而成为摘要，并将其存放在转账信息摘要的数据载体中供前端显示。

(3)描述各个适配器信息的配置文件，其作用是配置显示在日程模块需要调用哪些Adapters。

(4)管理账户日程模块数据的账户日程管理器，该模块服务器端的核心类，其功能是受CalendarAction调用，根据配置调用adapters获取账户日程信息并返回结果。其设计还需考虑缓存机制，CalendarManager缓存了账户日程信息和每日余额信息，当浏览器端请求的数据在缓存内完全存在，直接返回缓存中的结果。

(5)Adapters是账户日程模块中另一部分重要的类。CalendarAdapter接口中定义了两个方法getEvents和getCalendarEventMap。getEvents由CalendarAction调用，其中，getEvents方法根据提交的信息查询并返回相应的转账信息摘要;而getCalendarEventMap服务于getEvents方法，其作用是将转账信息中的相关账户信息、发生时间、金额等数据提取出来而成为摘要。历史交易信息及所有类型转账的Adapter都实现了CalendarAdapter接口中的方法，并且实现原理也相似。Adapter中获取相应类型的转账信息摘要的伪代码如下:

图2 账户日程模块的系统框架Fig.2 System framework of accounts-schedule module

1.4 浏览器端设计与实现

1.4.1 日程界面

日程界面的实现借助于jQuery的第三方插件fullcalendar。这个插件提供了分别以月、周、日为单位查看日程信息的方式，提供了配置日程信息数据源、鼠标事件处理等接口，并且还提供了国际化的特性，这些内容在fullcalendar的构造函数中配置。调用fullcalendar的构造函数生成日程界面的代码如下:

options为传入的初始参数，许多功能的实现都只需在此处设置即可实现。其中，在模块开发中主要用到的参数有日程信息的数据源events，日历开始加载或加载完毕时会调用的loading，以及event-Click、eventMouseover、eventMouseout等鼠标事件。将日程信息的数据源设为CalendarAction中获取账户日程信息方法的url地址，加载日程数据完毕即可在日历界面中显示这些信息。在日程界面中点击某条转账信息，就可以显示指定转账信息的详细信息。该功能的实现需在fullcalendar的初始化中编写鼠标点击事件函数，根据转账编号和转账类型，加载对应转账模块中的显示转账信息的界面，并填入对话框中显示出来。

1.4.2 转账信息的增删改

新增转账信息的功能的入口在日历中的每个日期对应的格子(slot)内，在fullcalendar中设置格子按钮并编写鼠标点击事件函数，自动加载指定类型的新增转账界面，并装入对话框中显示出来。然后可以在该对话框中实现转账功能。为了实现快速修改或删除预约转账，鼠标移入某个日程信息时，修改和删除转账信息的按钮出现，而移出时则消失，需要在fullcalendar初始化的参数中，编写鼠标移入事件函数负责显示对应的修改转账和删除转账的按钮，而鼠标移出事件函数负责移除这些按钮。

为了给使用者提供更便捷的服务，转账的修改还可以通过鼠标拖拽完成，在日程界面中将某一日程信息从原日期的格子(slot)中拖动至目标日期的格子以提交修改请求。该功能需在fullcalendar初始化的参数中，编写鼠标拖动事件函数，获取变动日期的天数，计算出目标日期，并提交修改转账信息的请求。

1.4.3 账户余额显示

该功能浏览器端的实现主要有取回数据和显示账户余额信息(包括过去每日的余额和未来每日的余额预测)。在fullcalendar的初始化参数中设置装载数据完毕事件函数，在日程加载完成后发送ajax请求获取相关数据，用于显示资金余额。

用户将鼠标移动至某一日期，即可显示该日的余额、当天总收入和支出等信息。除此之外，还可以点击右下角的“Chart Calculated Bal.”(绘制余额走势图)按钮，将在一个对话框中显示该账户余额的走势情况，如图3所示。该功能的实现借助了jQuery的flot插件，它可以根据给定的数据绘制出折现图、柱状图、饼状图等各种类型的图片。

图3 账户资金余额走势Fig.3 The trend of account fund-balance

2 其它关键技术实现

2.1 国际化的实现

为了满足国际化(根据客户端环境的语言显示对应语言的信息)的需求，所有文件采用UTF－8格式编码。服务器端国际化的实现需编写Struts 2框架配置文件加载各语言的properties文件，在JSP页面中，使用 Struts 2提供的标签s:text即可根据当前语言显示信息。

浏览器端js的国际化主要是用于js文件中显示信息的国际化的需要。jQuery提供了i18n properties插件，通过加载对应语言的properties文件中各个属性至同名的全局变量。在编写JavaScript时，输出信息使用i18n的变量即可在不同语言环境中显示对应语言的信息。

2.2 防止重复请求

为了防止浏览器端同一请求的重复提交(比如连续点击两次“确认转账”按钮)，浏览器端需要做些改进。实现的原理是，由一个数组记录当前正在处理的请求，如果有重复请求，后提交的不予处理。

2.3 安全性实现

网上银行系统的安全性涉及服务器的安全性、通信的安全性、系统的安全性等。在此主要研究与账户日程模块相关的系统安全性的实现，主要包括以下3个方面:

(1)预防SQL注入攻击。预防该种攻击最主要的思路是在使用提交数据进行数据库访问时对该数据的合法性进行检查(张勇等，2004)，使用PreparedStatement过滤SQL关键字。

(2)预防XSS攻击。XSS导致恶意代码注入受害者使用的页面中，可能给受害者带来经济损失(吴耀武等，2008)。该模块中，为防范XSS攻击，统一使用自定义的JSP标签用于对输出内容的特殊字符进行过滤，包括引号、JS的关键字、尖括号等。

(3)参数加密。网上银行系统中，许多参数都是比较敏感的(例如银行账号)，参数加密的目的是为了防止别有用心者截取请求中的参数以达到某种特定目的。当然，实现安全性时也要兼顾效率，在实现中，并不对所有请求和所有的参数进行加密。

3 结论与讨论

本文运用Struts2和jQuery框架技术，开发出了基于OPOA理念的网上银行账户日程模块。该模块在日历界面中展示账户的转账信息并提供转账入口、异步动态地刷新页面，用户可以直观地看到账户在转账信息日程，而不是传统地以表格形式展示的交易记录;并且能根据交易流水和预约转账画出账户余额图，使用户对自己账户资金管理更加得心应手。

该模块在国内外的网上银行都较为鲜见，其新颖的理念给予了网上银行使用者全新的用户体验，也会吸引更多的客户使用。在做该企业网上银行产品的需求调研、使用样例界面与客户银行展示时，许多银行对该模块都表示十分感兴趣;在测试与推广过程中，该功能也受到网上银行用户的称赞。银行为了向客户提供更优质的服务并降低经营成本，也会不断地提供创新功能、提供更加友好的界面，该模块或将成为网上银行的全新用户界面。相信在不久的将来，为了吸引客户及促进网上银行交易规模，我国会有越来越多的网上银行会采用OPOA的理念，并且提供的更多贴近用户需要的服务。

吴建.2011.我国商业银行网上银行操作风险管理研究[J].浙江金融，(10):45-49.

李伟庆.2009.美国网上银行服务策略分析及其启示[J].成都大学学报:社会科学版，(5):21-23.

杨钟鸣.2010.基于SSH框架的社区管理信息系统设计[J].东华理工大学学报:自然科学版，12(4):379-383.

张勇，李力，薛倩.2004.Web环境下SQL注入攻击的检测与防御[J].现代电子技术，8(15):103-105.

吴耀斌，王科，龙岳红.2008.基于跨站脚本的网络漏洞攻击与防范[J].计算机系统应用，(1):38-40.