張遠(yuǎn)平

（東莞市經(jīng)濟(jì)貿(mào)易學(xué)校，廣東東莞 523000）

0 引言

班費(fèi)管理是班級(jí)日常管理的重要組成部分。傳統(tǒng)的班費(fèi)管理通常由生活委員負(fù)責(zé)，涉及收款、支出、報(bào)銷、統(tǒng)計(jì)和公示等業(yè)務(wù)，主要采取記賬本方式操作。但傳統(tǒng)的賬目管理方式或多或少存在一些不足，如班費(fèi)收支不透明、管理責(zé)任不到位、賬目公示滯后等，這些問(wèn)題易引起師生、家校之間不信任，有些地方還引發(fā)一系列矛盾［1］。究其原因，主要是傳統(tǒng)的記賬方式落后，賬目難于保管，記賬信息容易丟失并存在被刪改的風(fēng)險(xiǎn)。隨著信息技術(shù)和網(wǎng)絡(luò)技術(shù)的發(fā)展，采用信息化手段進(jìn)行班費(fèi)管理成為趨勢(shì)。特別是隨著智能手機(jī)的普及，通過(guò)APP 管理班費(fèi)成為一種科學(xué)、高效、便捷的手段［2］。

本文針對(duì)目前班費(fèi)管理實(shí)際需求，基于Android 快速開發(fā)工具開發(fā)了班費(fèi)管理APP，實(shí)現(xiàn)班費(fèi)的收支申請(qǐng)、審核、公示、投訴等功能。使班費(fèi)管理流程更加清晰，班費(fèi)流向更加透明，管理責(zé)任到人，信息實(shí)時(shí)公開，解決了傳統(tǒng)班費(fèi)管理存在的一系列問(wèn)題。

1 系統(tǒng)開發(fā)環(huán)境及技術(shù)

1.1 WeX5 開發(fā)平臺(tái)

WeX5 是一款開源的基于H5 的APP 應(yīng)用開發(fā)框架，它具有可擴(kuò)展性高、開發(fā)速度快等特點(diǎn)［3］。該平臺(tái)采用H5+CSS3+JS 標(biāo)準(zhǔn)技術(shù)，封裝了豐富的組件體系，其混合應(yīng)用開發(fā)模式能輕松調(diào)用手機(jī)設(shè)備如相機(jī)、地圖、通訊錄等，讓開發(fā)者輕松應(yīng)對(duì)各類復(fù)雜數(shù)據(jù)應(yīng)用［4］。在開發(fā)環(huán)境方面，WeX5 的IDE 基于Eclipse，提供一個(gè)完全可視化、組件化、拖拽式的開發(fā)環(huán)境，完全實(shí)現(xiàn)所見即所得；通過(guò)使用向?qū)Щ湍０寤裙ぞ?，能快速生成常見的?yīng)用場(chǎng)景界面［4］。

1.2 信息推送技術(shù)

APP 消息推送（Push）指運(yùn)營(yíng)人員通過(guò)自己的產(chǎn)品或第三方工具對(duì)用戶移動(dòng)設(shè)備主動(dòng)進(jìn)行消息推送。通過(guò)信息推送技術(shù)，用戶可在移動(dòng)設(shè)備屏幕和通知欄上看到Push 消息通知。極光推送是目前流行的第三方云推送平臺(tái)，它面向普通開發(fā)者提供免費(fèi)的第三方消息推送服務(wù)，開發(fā)者只需在客戶端集成極光推送SDK 即可輕松地將Push 功能添加到APP 中［5］。

2 班費(fèi)管理APP 需求分析及功能設(shè)計(jì)

班費(fèi)管理APP 用戶包括班主任、生活委員（或其他班干部）和普通學(xué)生（或家長(zhǎng)）。主要功能包括班費(fèi)明細(xì)賬目查詢、班費(fèi)收支申報(bào)、班費(fèi)收支審核、班費(fèi)投訴等功能。根據(jù)實(shí)際需求，生活委員和班主任用例如圖1 所示，整個(gè)應(yīng)用包括下列模塊：

（1）系統(tǒng)登錄模塊。為班主任和生活委員提供登錄界面，登錄成功后按權(quán)限自動(dòng)跳轉(zhuǎn)到相應(yīng)頁(yè)面。首次登錄成功后實(shí)現(xiàn)自動(dòng)登錄功能，減少每次運(yùn)行都要輸入賬號(hào)和密碼的繁瑣操作。

（2）班費(fèi)申報(bào)模塊。生活委員需要登記班費(fèi)收支項(xiàng)目時(shí)，錄入賬目信息，如支出項(xiàng)目、金額、經(jīng)手人、證明人和收據(jù)圖片等，并把信息推送到班主任手機(jī)APP 上，提醒班主任查閱和審核。

（3）班費(fèi)審核模塊。班主任查看待審核的收支項(xiàng)目，如情況屬實(shí)即給予申報(bào)，否則駁回申報(bào)。申報(bào)成功的項(xiàng)目屬于可公示賬目，會(huì)自動(dòng)同步到賬目表中。

（4）班費(fèi)明細(xì)賬目查詢模塊。采用賬目式表格顯示班費(fèi)的使用情況，使學(xué)生和家長(zhǎng)能通過(guò)此模塊了解每一筆班費(fèi)的使用情況。

3、秧苗素質(zhì)，絲核菌和鐮刀菌等水稻立枯病病源菌廣泛存在于土壤中，均為弱寄生菌，一般能在水中或土壤內(nèi)營(yíng)腐生生活。這類病菌致病性不強(qiáng)，它們一般不宜侵染健壯的幼苗，只有當(dāng)天氣不良和管理不當(dāng)，致使秧苗生長(zhǎng)弱、抗性降低后，各種弱寄生菌才得以乘虛而入并傳播蔓延。因此，秧苗素質(zhì)差、生長(zhǎng)弱、抗病抗逆力差是發(fā)生立枯病的直接原因。

（5）投訴模塊。為確保班費(fèi)使用公開公正，減少糾紛，為家長(zhǎng)或?qū)W生提供投訴頁(yè)面。

Fig.1 A use case diagram圖1 用例圖

3 數(shù)據(jù)庫(kù)設(shè)計(jì)

APP 采用mysql 數(shù)據(jù)庫(kù)，設(shè)計(jì)表格包括用戶表（user）、學(xué)生表（student）、投訴信息表（advice）、賬目申報(bào)表（preac?count）、賬目表（account）、班級(jí)配置表（class）等。其中，與業(yè)務(wù)流程密切相關(guān)的是賬目申報(bào)表和賬目表，如表1、表2所示。

4 系統(tǒng)主要功能實(shí)現(xiàn)

4.1 系統(tǒng)登錄

系統(tǒng)登錄功能主要包括用戶賬號(hào)驗(yàn)證和登錄信息保存。賬號(hào)驗(yàn)證使用BaasData 組件的SetFilter 實(shí)現(xiàn)，如果通過(guò)驗(yàn)證則根據(jù)登錄用戶角色激活父級(jí)頁(yè)面Contents 的子頁(yè)面進(jìn)行跳轉(zhuǎn)。保存登錄信息的目的是為了實(shí)現(xiàn)用戶的自動(dòng)登錄，在HTML5 中，localstorage 對(duì)象能有效實(shí)現(xiàn)該功能。系統(tǒng)登錄功能關(guān)鍵代碼如下：

Table 1 Account declaration表1 賬目申報(bào)

Table 2 Accounts表2 賬目

4.2 班費(fèi)收支申報(bào)

4.2.1 使用attachementsimple 組件實(shí)現(xiàn)班費(fèi)收據(jù)附件上傳

票據(jù)附件上傳功能實(shí)現(xiàn)采用attachmentsimple 組件，該組件用于實(shí)現(xiàn)圖片的上傳和下載功能。在應(yīng)用中必須綁定一個(gè)data 組件，對(duì)應(yīng)的data 組件最少有兩個(gè)字段，一個(gè)是ID 列，另一個(gè)是attachmentSimple 需要綁定的字段，上傳的圖片文件名保存在第2 個(gè)字段中。使用attachmen?tsimpe 組件實(shí)現(xiàn)圖片上傳需要解決兩個(gè)問(wèn)題：

（1）限制圖片上傳張數(shù)。在班費(fèi)管理APP 中，為節(jié)約帶寬、提高效率，票據(jù)上傳限制只能上傳一張圖片，實(shí)現(xiàn)方法是在attachmentsimple 組件中把添加按鈕的data-bind 屬性設(shè)置為：

（2）設(shè)定圖片上傳位置。attachmentsimple 控件上傳圖片有兩種方式，一種是通過(guò)baas，一種是通過(guò)UIServer。如果生成Apk 文件時(shí)選擇模式1，必須使用baas 方式。由于baas 方式下圖片上傳目錄為在WeX 的data 目錄，因此需要修改baasjustep 下的simpleFileStore.java 文件的目錄變量，使圖片能上傳到APP 工程目錄，以方便審核頁(yè)面調(diào)用image 顯示該圖片。在simpleFileStore.java 中修改圖片上傳目錄的語(yǔ)句為：

該語(yǔ)句使圖片上傳路徑變?yōu)榕c工程對(duì)應(yīng)的WeX5modelUI2classfundpic 目錄。

4.2.2 班費(fèi)收支賬目申報(bào)

該功能將收支申報(bào)頁(yè)面錄入的信息填入到申報(bào)表中，注意填入信息后申報(bào)表該筆賬目的狀態(tài)（state 字段）被設(shè)置為0，收據(jù)圖片附件的文件名來(lái)自通過(guò)attachmentsimple組件得到的文件名變量uploadstorefile。其主要代碼如下：

班費(fèi)收支項(xiàng)目提交成功后，屏幕下方的“審批”標(biāo)題會(huì)自動(dòng)顯示當(dāng)前待審批的項(xiàng)目個(gè)數(shù)，該功能主要通過(guò)組件的綁定操作實(shí)現(xiàn)。實(shí)現(xiàn)方法是增加一個(gè)Data 組件statusDa?ta，添加一個(gè)表示申報(bào)賬目數(shù)量的字段declarecount。為該字段編輯規(guī)則：（$model.comp（‘preaccountData’）。count（）>0）？‘審核（’+$model.comp（‘preaccountData’）。count（）+‘）’：‘審核’，然后在審核按鈕的bind-text 屬性里綁定$model.statusData.ref（+“declarecount”）。可見，組件屬性的綁定操作無(wú)需輸入大量代碼就可實(shí)現(xiàn)數(shù)字的自動(dòng)更新。

4.2.3 使用極光推送插件實(shí)現(xiàn)通知推送

消息精確推送實(shí)現(xiàn)方法是調(diào)用極光推送插件。首先，要在極光推送官網(wǎng)注冊(cè)應(yīng)用。然后，在WeX5 自帶的JPush 服務(wù)中配置好相關(guān)參數(shù)，使班費(fèi)管理APP 能調(diào)用極光推送的SDK。同時(shí)，使用WeX5 外賣案例中的jpush.js文件建立極光推送實(shí)例變量，修改JPush.java 文件中的部分代碼，實(shí)現(xiàn)消息推送功能。主要代碼如下：

4.3 班費(fèi)收支賬目審批

班主任審批班費(fèi)收支賬目，首先瀏覽待審批賬目表，然后打開需要審批的項(xiàng)目，查看項(xiàng)目的完整信息，包括詳細(xì)說(shuō)明、證明人、票據(jù)附件等。如果班費(fèi)使用情況屬實(shí)則點(diǎn)擊同意申報(bào)按鈕，使申報(bào)表的對(duì)應(yīng)項(xiàng)目寫入班費(fèi)賬目表，同時(shí)對(duì)余額進(jìn)行統(tǒng)計(jì)登記。如果班費(fèi)使用不合理或存在其它問(wèn)題，班主任有權(quán)在APP 中駁回班費(fèi)收支申報(bào)。關(guān)鍵技術(shù)包括：

（1）讀取賬目收據(jù)附件。在該頁(yè)面中需要使用image顯示賬目中的收據(jù)圖片?？梢宰远x一個(gè)函數(shù)，通過(guò)讀取收支審批表的stuPic 字段生成圖片的URL。該函數(shù)定義為：

為使圖片正常顯示，圖片的bind-attr-src 屬性設(shè)置為$model.getPicUrl（$model.preaccountData.val（“stupic”））。同時(shí)，使用一個(gè)output 組件來(lái)提示附件信息。該output 組件的bind-text 屬性設(shè)置為$model.preaccountData.val（“picUrl”）==null：“該筆賬目無(wú)附件”：“該筆賬目包含單據(jù)圖片如下：”。

（2）審批班費(fèi)收支流程。在班費(fèi)申報(bào)環(huán)節(jié)，班干部提交的申報(bào)數(shù)據(jù)保存在preaccount 數(shù)據(jù)表中，并設(shè)置字段state 的值為0。審批頁(yè)面根據(jù)state 的狀態(tài)生成待審核賬目列表。審核通過(guò)后，把待審批賬目表的state 值設(shè)置為1，同時(shí)取account 數(shù)據(jù)表的最后一條數(shù)據(jù)進(jìn)行計(jì)算，統(tǒng)計(jì)出當(dāng)前余額，最后在account 數(shù)據(jù)表中插入當(dāng)前賬目信息，生成最新的賬目表。其實(shí)現(xiàn)流程如圖2 所示。

4.4 班費(fèi)統(tǒng)計(jì)匯總

班費(fèi)明細(xì)賬目在首頁(yè)顯示，主要是呈現(xiàn)班費(fèi)賬目表信息。顯示組件為dataTable，該組件能方便地顯示數(shù)據(jù)表內(nèi)容。由于手機(jī)屏幕尺寸有限，APP 僅顯示上期余額、收支金額、目前余額、項(xiàng)目、經(jīng)手人和日期等信息。這里主要解決兩個(gè)問(wèn)題：①日期縮寫為月日格式，實(shí)現(xiàn)方法是把日期列的format 屬性設(shè)置為MM-DD；②支出金額用紅色字體顯示，其代碼如下：

4.5 頁(yè)面跳轉(zhuǎn)后數(shù)據(jù)自動(dòng)刷新

在用戶執(zhí)行收支申報(bào)或?qū)徍瞬僮骱?，后臺(tái)數(shù)據(jù)發(fā)生了更改，但各個(gè)功能頁(yè)面不會(huì)自動(dòng)同步更新數(shù)據(jù)。Contents組件包含一個(gè)ActvieChange 事件，該事件在頁(yè)面激活時(shí)產(chǎn)生，刷新對(duì)應(yīng)的windowContainer 可以解決頁(yè)面跳轉(zhuǎn)后數(shù)據(jù)不更新問(wèn)題，主要代碼如下：

4.6 APP 打包及安裝

完成APP 的前端頁(yè)面和后端服務(wù)開發(fā)后，可使用WeX5 的打包功能生成APP，使之能在手機(jī)上運(yùn)行［7］。為實(shí)現(xiàn)通過(guò)互聯(lián)網(wǎng)訪問(wèn)班費(fèi)管理APP，需把有關(guān)資源部署到云服務(wù)器上，上傳資源包括數(shù)據(jù)庫(kù)腳本、后端服務(wù)、UI 資源等。應(yīng)用運(yùn)行效果如圖3-圖5 所示。

5 結(jié)語(yǔ)

WeX5 開發(fā)工具提供的可視化組件及第三方插件縮短了開發(fā)周期，節(jié)約了開發(fā)成本，大大提高了手機(jī)APP 開發(fā)效率。為方便推廣，班費(fèi)管理APP 被命名為“班費(fèi)掌上通（安卓版）”，寓意通過(guò)手機(jī)就可輕松管理和查詢班費(fèi)。實(shí)踐證明，作為校園信息化創(chuàng)新應(yīng)用的一個(gè)案例，該APP 操作完全符合班費(fèi)管理場(chǎng)景，滿足班費(fèi)管理的日常需要，它使班費(fèi)管理過(guò)程完全數(shù)字化，用戶能隨時(shí)隨地查詢班費(fèi)收支情況。班費(fèi)掌上通時(shí)效性強(qiáng)，結(jié)合推送技術(shù)，使信息公開及時(shí)、全面，提高了班費(fèi)管理效率。該案例開發(fā)與應(yīng)用融合了“互聯(lián)網(wǎng)+教育”的思維方式，是教育信息化融合創(chuàng)新的有效實(shí)踐，提升了用戶體驗(yàn)，推進(jìn)了技術(shù)創(chuàng)新。

Fig.3 Declaration page圖3 申報(bào)頁(yè)面

Fig.4 Pages of examination and approval圖4 審批頁(yè)面

Fig.5 Publicity of accounts圖5 賬目表公示