張遠(yuǎn)平

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

0 引言

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

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

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

1.1 WeX5 開發(fā)平臺

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

1.2 信息推送技術(shù)

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

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

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

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

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

（3）班費審核模塊。班主任查看待審核的收支項目，如情況屬實即給予申報，否則駁回申報。申報成功的項目屬于可公示賬目，會自動同步到賬目表中。

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

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

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

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

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

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

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

4.1 系統(tǒng)登錄

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

Table 1 Account declaration表1 賬目申報

Table 2 Accounts表2 賬目

4.2 班費收支申報

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

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

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

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

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

4.2.2 班費收支賬目申報

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

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

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

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

4.3 班費收支賬目審批

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

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

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

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

4.4 班費統(tǒng)計匯總

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

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

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

4.6 APP 打包及安裝

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

5 結(jié)語

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

Fig.3 Declaration page圖3 申報頁面

Fig.4 Pages of examination and approval圖4 審批頁面

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