基于jQuery的企業(yè)網(wǎng)上銀行賬戶日程模塊設(shè)計(jì)與實(shí)現(xiàn)

姜美珠， 何劍鋒

(東華理工大學(xué)軟件學(xué)院，江西 南昌 330013)

網(wǎng)上銀行業(yè)務(wù)作為在傳統(tǒng)銀行業(yè)務(wù)上新增的服務(wù)渠道，在國(guó)外獲得了很大的發(fā)展(吳建，2011)。有大型銀行建立自有團(tuán)隊(duì)開發(fā)網(wǎng)上銀行，也有中小銀行購買由大型信息科技公司開發(fā)的成熟的網(wǎng)上銀行產(chǎn)品，如IBM提供的多渠道銀行電子商務(wù)解決方案(李偉慶，2009)，用戶在使用中得到良好的用戶體驗(yàn)。在國(guó)內(nèi)，雖然尚有多家銀行使用Frame加頁面跳轉(zhuǎn)形式的界面，但隨著招商銀行等率先將OPOA理念運(yùn)用于其網(wǎng)上銀行用戶界面中，新技術(shù)的運(yùn)用也逐漸多了起來。

本文闡述了企業(yè)網(wǎng)上銀行中賬戶日程模塊的設(shè)計(jì)思想，該模塊使用JavaScript與Ajax技術(shù)異步地提交請(qǐng)求、收到響應(yīng)結(jié)果后局部動(dòng)態(tài)刷新的瀏覽器頁面，致力于提供一個(gè)更加用戶友好的界面。該模塊的亮點(diǎn)在于以日程的方式在日歷中展示用戶賬戶的交易明細(xì)，可直接在某日的格子內(nèi)預(yù)約該日的轉(zhuǎn)賬，并用走勢(shì)圖的直觀方式向用戶展示賬戶資金余額，也是國(guó)內(nèi)外網(wǎng)上銀行的一個(gè)良好的功能創(chuàng)新點(diǎn)。

1 模塊功能設(shè)計(jì)

1.1 賬戶日程模塊的功能需求

企業(yè)網(wǎng)上銀行產(chǎn)品，致力于為金融機(jī)構(gòu)提供一個(gè)為零售客戶、小企業(yè)客戶以及大型企業(yè)客戶部署在線解決方案的獨(dú)立平臺(tái)。主要開發(fā)目標(biāo)是為客戶提供基于OPOA理念的更加友好界面，并且增加新功能以便為網(wǎng)上銀行使用者提供更優(yōu)質(zhì)的服務(wù)①Top 10 2010-Main，https://www.owasp.org/index.php/Top_10_2010-Main[EB/OL]，OWASP，2010.。賬戶日程模塊是一個(gè)全新的功能，其功能主要分為三個(gè)部分:

(1)查詢賬戶日程信息:將轉(zhuǎn)賬信息的摘要(包括相關(guān)賬戶及金額)以日程的形式顯示(可以按一個(gè)月、一周或一日的方式顯示)，方便用戶把握自己賬戶每日的轉(zhuǎn)賬信息。轉(zhuǎn)賬信息共分四種狀態(tài):已完成、待處理、待審批、待定的。

(2)快速轉(zhuǎn)賬功能:該模塊支持確定轉(zhuǎn)賬和待定轉(zhuǎn)賬。確定轉(zhuǎn)賬即用戶同意可以生效的轉(zhuǎn)賬;待定轉(zhuǎn)賬即用戶暫定的、可能還需修改的轉(zhuǎn)賬，該轉(zhuǎn)賬需轉(zhuǎn)為確定轉(zhuǎn)賬后方可生效。在日歷界面中可以直接添加轉(zhuǎn)賬而無需進(jìn)入轉(zhuǎn)賬模塊，減少用戶的操作，并可以即時(shí)地在日程中反映出新增轉(zhuǎn)賬給賬戶帶來的變化。

(3)資金余額查詢及走勢(shì)圖:此功能可以查詢過去日期內(nèi)的余額信息，并提供在未來某日指定賬戶的資金余量，還可以根據(jù)用戶預(yù)先設(shè)置的賬戶資金范圍提供資金不足和資金過量的提示，方便該網(wǎng)上銀行用戶對(duì)資金提前進(jìn)行分配，以提高資金的利用效率并防止出現(xiàn)資金余額不足的情況。

圖1 系統(tǒng)框架Fig.1 System framework

1.2 系統(tǒng)架構(gòu)

該企業(yè)網(wǎng)上銀行采用了Struts2和jQuery整合的方式實(shí)現(xiàn)服務(wù)器端和瀏覽器端的功能。系統(tǒng)的總體框架如圖1所示:

圖1中，后端系統(tǒng)為銀行的交易記錄數(shù)據(jù)庫。FFI框架部分是業(yè)務(wù)邏輯層，負(fù)責(zé)核心邏輯及與表示層及數(shù)據(jù)庫的交互。該部分已經(jīng)提供了轉(zhuǎn)賬、查詢余額等功能。

賬戶日程模塊開發(fā)的重點(diǎn)是表示層的構(gòu)建，該層負(fù)責(zé)顯示用戶界面、響應(yīng)用戶請(qǐng)求并與業(yè)務(wù)邏輯層進(jìn)行交互，包括Struts 2框架相關(guān)內(nèi)容(Action、Interceptor、配置文件)、JSP和 JS腳本等，負(fù)責(zé)接收、處理瀏覽器的請(qǐng)求并將處理結(jié)果返回至瀏覽器端(楊鐘鳴，2010)。

1.3 服務(wù)器端設(shè)計(jì)與實(shí)現(xiàn)

賬戶日程模塊的實(shí)現(xiàn)需要調(diào)用部分系統(tǒng)接口，其中轉(zhuǎn)賬模塊已有UI和接口，因此賬戶日程模塊中需要實(shí)現(xiàn)的部分為:能夠調(diào)用獲取轉(zhuǎn)賬信息摘要接口的適配器及描述適配器信息的配置文件，摘要信息的載體，用于響應(yīng)瀏覽器端請(qǐng)求的Struts2 Action，基于jQuery的用戶界面等。由此設(shè)計(jì)出賬戶日程模塊的系統(tǒng)框架(圖2)。

賬戶日程模塊針對(duì)轉(zhuǎn)賬的操作均由轉(zhuǎn)賬模塊實(shí)現(xiàn)，服務(wù)端最主要的功能是獲取指定賬戶中轉(zhuǎn)賬信息的摘要和資金余額的查詢和預(yù)測(cè)。為了實(shí)現(xiàn)這些功能，應(yīng)實(shí)現(xiàn)響應(yīng)瀏覽器端請(qǐng)求的賬戶日程、管理賬戶日程模塊數(shù)據(jù)的帳戶日程管理器、描述各個(gè)適配器信息的配置文件、調(diào)用FFI框架中各類轉(zhuǎn)賬信息查詢接口的Adapters，以及作為轉(zhuǎn)賬信息摘要數(shù)據(jù)載體的賬戶日程事件等等。具體實(shí)現(xiàn)描述如下:

(1)響應(yīng)瀏覽器端請(qǐng)求的賬戶日程Action，它是Struts 2框架下用于解析并完成賬戶日程模塊請(qǐng)求的Action類。

(2)調(diào)用FFI框架中各類轉(zhuǎn)賬信息查詢接口的適配器，其作用是將轉(zhuǎn)賬信息中的相關(guān)賬戶信息、發(fā)生時(shí)間、金額等數(shù)據(jù)提取出來而成為摘要，并將其存放在轉(zhuǎn)賬信息摘要的數(shù)據(jù)載體中供前端顯示。

(3)描述各個(gè)適配器信息的配置文件，其作用是配置顯示在日程模塊需要調(diào)用哪些Adapters。

(4)管理賬戶日程模塊數(shù)據(jù)的賬戶日程管理器，該模塊服務(wù)器端的核心類，其功能是受CalendarAction調(diào)用，根據(jù)配置調(diào)用adapters獲取賬戶日程信息并返回結(jié)果。其設(shè)計(jì)還需考慮緩存機(jī)制，CalendarManager緩存了賬戶日程信息和每日余額信息，當(dāng)瀏覽器端請(qǐng)求的數(shù)據(jù)在緩存內(nèi)完全存在，直接返回緩存中的結(jié)果。

(5)Adapters是賬戶日程模塊中另一部分重要的類。CalendarAdapter接口中定義了兩個(gè)方法getEvents和getCalendarEventMap。getEvents由CalendarAction調(diào)用，其中，getEvents方法根據(jù)提交的信息查詢并返回相應(yīng)的轉(zhuǎn)賬信息摘要;而getCalendarEventMap服務(wù)于getEvents方法，其作用是將轉(zhuǎn)賬信息中的相關(guān)賬戶信息、發(fā)生時(shí)間、金額等數(shù)據(jù)提取出來而成為摘要。歷史交易信息及所有類型轉(zhuǎn)賬的Adapter都實(shí)現(xiàn)了CalendarAdapter接口中的方法，并且實(shí)現(xiàn)原理也相似。Adapter中獲取相應(yīng)類型的轉(zhuǎn)賬信息摘要的偽代碼如下:

圖2 賬戶日程模塊的系統(tǒng)框架Fig.2 System framework of accounts-schedule module

1.4 瀏覽器端設(shè)計(jì)與實(shí)現(xiàn)

1.4.1 日程界面

日程界面的實(shí)現(xiàn)借助于jQuery的第三方插件fullcalendar。這個(gè)插件提供了分別以月、周、日為單位查看日程信息的方式，提供了配置日程信息數(shù)據(jù)源、鼠標(biāo)事件處理等接口，并且還提供了國(guó)際化的特性，這些內(nèi)容在fullcalendar的構(gòu)造函數(shù)中配置。調(diào)用fullcalendar的構(gòu)造函數(shù)生成日程界面的代碼如下:

options為傳入的初始參數(shù)，許多功能的實(shí)現(xiàn)都只需在此處設(shè)置即可實(shí)現(xiàn)。其中，在模塊開發(fā)中主要用到的參數(shù)有日程信息的數(shù)據(jù)源events，日歷開始加載或加載完畢時(shí)會(huì)調(diào)用的loading，以及event-Click、eventMouseover、eventMouseout等鼠標(biāo)事件。將日程信息的數(shù)據(jù)源設(shè)為CalendarAction中獲取賬戶日程信息方法的url地址，加載日程數(shù)據(jù)完畢即可在日歷界面中顯示這些信息。在日程界面中點(diǎn)擊某條轉(zhuǎn)賬信息，就可以顯示指定轉(zhuǎn)賬信息的詳細(xì)信息。該功能的實(shí)現(xiàn)需在fullcalendar的初始化中編寫鼠標(biāo)點(diǎn)擊事件函數(shù)，根據(jù)轉(zhuǎn)賬編號(hào)和轉(zhuǎn)賬類型，加載對(duì)應(yīng)轉(zhuǎn)賬模塊中的顯示轉(zhuǎn)賬信息的界面，并填入對(duì)話框中顯示出來。

1.4.2 轉(zhuǎn)賬信息的增刪改

新增轉(zhuǎn)賬信息的功能的入口在日歷中的每個(gè)日期對(duì)應(yīng)的格子(slot)內(nèi)，在fullcalendar中設(shè)置格子按鈕并編寫鼠標(biāo)點(diǎn)擊事件函數(shù)，自動(dòng)加載指定類型的新增轉(zhuǎn)賬界面，并裝入對(duì)話框中顯示出來。然后可以在該對(duì)話框中實(shí)現(xiàn)轉(zhuǎn)賬功能。為了實(shí)現(xiàn)快速修改或刪除預(yù)約轉(zhuǎn)賬，鼠標(biāo)移入某個(gè)日程信息時(shí)，修改和刪除轉(zhuǎn)賬信息的按鈕出現(xiàn)，而移出時(shí)則消失，需要在fullcalendar初始化的參數(shù)中，編寫鼠標(biāo)移入事件函數(shù)負(fù)責(zé)顯示對(duì)應(yīng)的修改轉(zhuǎn)賬和刪除轉(zhuǎn)賬的按鈕，而鼠標(biāo)移出事件函數(shù)負(fù)責(zé)移除這些按鈕。

為了給使用者提供更便捷的服務(wù)，轉(zhuǎn)賬的修改還可以通過鼠標(biāo)拖拽完成，在日程界面中將某一日程信息從原日期的格子(slot)中拖動(dòng)至目標(biāo)日期的格子以提交修改請(qǐng)求。該功能需在fullcalendar初始化的參數(shù)中，編寫鼠標(biāo)拖動(dòng)事件函數(shù)，獲取變動(dòng)日期的天數(shù)，計(jì)算出目標(biāo)日期，并提交修改轉(zhuǎn)賬信息的請(qǐng)求。

1.4.3 賬戶余額顯示

該功能瀏覽器端的實(shí)現(xiàn)主要有取回?cái)?shù)據(jù)和顯示賬戶余額信息(包括過去每日的余額和未來每日的余額預(yù)測(cè))。在fullcalendar的初始化參數(shù)中設(shè)置裝載數(shù)據(jù)完畢事件函數(shù)，在日程加載完成后發(fā)送ajax請(qǐng)求獲取相關(guān)數(shù)據(jù)，用于顯示資金余額。

用戶將鼠標(biāo)移動(dòng)至某一日期，即可顯示該日的余額、當(dāng)天總收入和支出等信息。除此之外，還可以點(diǎn)擊右下角的“Chart Calculated Bal.”(繪制余額走勢(shì)圖)按鈕，將在一個(gè)對(duì)話框中顯示該賬戶余額的走勢(shì)情況，如圖3所示。該功能的實(shí)現(xiàn)借助了jQuery的flot插件，它可以根據(jù)給定的數(shù)據(jù)繪制出折現(xiàn)圖、柱狀圖、餅狀圖等各種類型的圖片。

圖3 賬戶資金余額走勢(shì)Fig.3 The trend of account fund-balance

2 其它關(guān)鍵技術(shù)實(shí)現(xiàn)

2.1 國(guó)際化的實(shí)現(xiàn)

為了滿足國(guó)際化(根據(jù)客戶端環(huán)境的語言顯示對(duì)應(yīng)語言的信息)的需求，所有文件采用UTF－8格式編碼。服務(wù)器端國(guó)際化的實(shí)現(xiàn)需編寫Struts 2框架配置文件加載各語言的properties文件，在JSP頁面中，使用 Struts 2提供的標(biāo)簽s:text即可根據(jù)當(dāng)前語言顯示信息。

瀏覽器端js的國(guó)際化主要是用于js文件中顯示信息的國(guó)際化的需要。jQuery提供了i18n properties插件，通過加載對(duì)應(yīng)語言的properties文件中各個(gè)屬性至同名的全局變量。在編寫JavaScript時(shí)，輸出信息使用i18n的變量即可在不同語言環(huán)境中顯示對(duì)應(yīng)語言的信息。

2.2 防止重復(fù)請(qǐng)求

為了防止瀏覽器端同一請(qǐng)求的重復(fù)提交(比如連續(xù)點(diǎn)擊兩次“確認(rèn)轉(zhuǎn)賬”按鈕)，瀏覽器端需要做些改進(jìn)。實(shí)現(xiàn)的原理是，由一個(gè)數(shù)組記錄當(dāng)前正在處理的請(qǐng)求，如果有重復(fù)請(qǐng)求，后提交的不予處理。

2.3 安全性實(shí)現(xiàn)

網(wǎng)上銀行系統(tǒng)的安全性涉及服務(wù)器的安全性、通信的安全性、系統(tǒng)的安全性等。在此主要研究與賬戶日程模塊相關(guān)的系統(tǒng)安全性的實(shí)現(xiàn)，主要包括以下3個(gè)方面:

(1)預(yù)防SQL注入攻擊。預(yù)防該種攻擊最主要的思路是在使用提交數(shù)據(jù)進(jìn)行數(shù)據(jù)庫訪問時(shí)對(duì)該數(shù)據(jù)的合法性進(jìn)行檢查(張勇等，2004)，使用PreparedStatement過濾SQL關(guān)鍵字。

(2)預(yù)防XSS攻擊。XSS導(dǎo)致惡意代碼注入受害者使用的頁面中，可能給受害者帶來經(jīng)濟(jì)損失(吳耀武等，2008)。該模塊中，為防范XSS攻擊，統(tǒng)一使用自定義的JSP標(biāo)簽用于對(duì)輸出內(nèi)容的特殊字符進(jìn)行過濾，包括引號(hào)、JS的關(guān)鍵字、尖括號(hào)等。

(3)參數(shù)加密。網(wǎng)上銀行系統(tǒng)中，許多參數(shù)都是比較敏感的(例如銀行賬號(hào))，參數(shù)加密的目的是為了防止別有用心者截取請(qǐng)求中的參數(shù)以達(dá)到某種特定目的。當(dāng)然，實(shí)現(xiàn)安全性時(shí)也要兼顧效率，在實(shí)現(xiàn)中，并不對(duì)所有請(qǐng)求和所有的參數(shù)進(jìn)行加密。

3 結(jié)論與討論

本文運(yùn)用Struts2和jQuery框架技術(shù)，開發(fā)出了基于OPOA理念的網(wǎng)上銀行賬戶日程模塊。該模塊在日歷界面中展示賬戶的轉(zhuǎn)賬信息并提供轉(zhuǎn)賬入口、異步動(dòng)態(tài)地刷新頁面，用戶可以直觀地看到賬戶在轉(zhuǎn)賬信息日程，而不是傳統(tǒng)地以表格形式展示的交易記錄;并且能根據(jù)交易流水和預(yù)約轉(zhuǎn)賬畫出賬戶余額圖，使用戶對(duì)自己賬戶資金管理更加得心應(yīng)手。

該模塊在國(guó)內(nèi)外的網(wǎng)上銀行都較為鮮見，其新穎的理念給予了網(wǎng)上銀行使用者全新的用戶體驗(yàn)，也會(huì)吸引更多的客戶使用。在做該企業(yè)網(wǎng)上銀行產(chǎn)品的需求調(diào)研、使用樣例界面與客戶銀行展示時(shí)，許多銀行對(duì)該模塊都表示十分感興趣;在測(cè)試與推廣過程中，該功能也受到網(wǎng)上銀行用戶的稱贊。銀行為了向客戶提供更優(yōu)質(zhì)的服務(wù)并降低經(jīng)營(yíng)成本，也會(huì)不斷地提供創(chuàng)新功能、提供更加友好的界面，該模塊或?qū)⒊蔀榫W(wǎng)上銀行的全新用戶界面。相信在不久的將來，為了吸引客戶及促進(jìn)網(wǎng)上銀行交易規(guī)模，我國(guó)會(huì)有越來越多的網(wǎng)上銀行會(huì)采用OPOA的理念，并且提供的更多貼近用戶需要的服務(wù)。

吳建.2011.我國(guó)商業(yè)銀行網(wǎng)上銀行操作風(fēng)險(xiǎn)管理研究[J].浙江金融，(10):45-49.

李偉慶.2009.美國(guó)網(wǎng)上銀行服務(wù)策略分析及其啟示[J].成都大學(xué)學(xué)報(bào):社會(huì)科學(xué)版，(5):21-23.

楊鐘鳴.2010.基于SSH框架的社區(qū)管理信息系統(tǒng)設(shè)計(jì)[J].東華理工大學(xué)學(xué)報(bào):自然科學(xué)版，12(4):379-383.

張勇，李力，薛倩.2004.Web環(huán)境下SQL注入攻擊的檢測(cè)與防御[J].現(xiàn)代電子技術(shù)，8(15):103-105.

吳耀斌，王科，龍?jiān)兰t.2008.基于跨站腳本的網(wǎng)絡(luò)漏洞攻擊與防范[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，(1):38-40.