基于jQuery的電子工資條前端頁面設計與開發

曾玉紅

摘要：企業微信，作為一種高效辦公平臺，已經被各行各業廣泛使用。值得一提的是，企業微信支持企業內部應用開發，因此企業管理員可以根據企業微信API開發個性化辦公應用。如今一些學校也緊跟時代，開通了企業微信，以此來提高學校的服務水平。根據江西服裝學院智慧校園的建設需要，同時為更好地服務教職工，在企業微信API的基礎上，學校的網絡與信息化管理中心部門開發并實現了電子工資條應用小程序。該應用小程序的前端頁面采用了jQuery和Ajax技術相結合的方式，以提高數據加載的效率和前端開發效率。

關鍵詞：企業微信;電子工資條;應用小程序;前端開發;jQuery;Ajax技術

中圖分類號：TP311.5? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）10-0079-02

Abstract： As a highly efficient office platform， Enterprise WeChat has been widely used by all walks of life. It is worth mentioning that Enterprise WeChat supports enterprise internal application development， so enterprise administrators can develop personalized office applications based on enterprise WeChat API. Nowadays， some schools are also keeping up with the times and opening up WeChat to improve the service level of the school. According to the construction needs of the smart campus of Jiangxi Institute of Fashion Technology， and at the same time to better serve the faculty and staff， based on the enterprise WeChat API， the school's Network & Information Management Center department developed and implemented the electronic payroll application applet. The front-end page of the application applet uses a combination of jQuery and Ajax technology to improve data loading efficiency and front-end development efficiency.

Key words： enterprise WeChat; electronic payroll; application applet; web and mobile front-end development; jQuery; Ajax technology

1 背景

隨著時代的發展，工資條形式逐步發生變化。由于企業微信的出現，各類第三方應用小程序也隨之而來，常見的就有公告、考勤、請假、報銷等[1]。而公司要想使用優質的第三方應用小程序就要付出一筆費用，因此公司內部需要開發屬于自身的內部應用小程序來減免一部分開銷。文章接下來主要是對電子工資條前端頁面的設計與開發進行詳細的介紹。

2 前端頁面介紹

電子工資條項目是企業微信的內部應用小程序，采用了前后端分離的方式開發，前端主要通過Ajax調用后臺接口。電子工資條項目分為網頁端和移動端，其中網頁端要實現管理員用戶登錄、修改密碼、上傳Excel文件、查詢上傳記錄、查詢工資詳情以及下發工資信息功能，包括以下八個頁面：login.html、index.html、main.html、upload_excel.html search_upload_record.html、search_wage_detail.html、 search_getFeedback.html 和edit_password.html。

移動端要實現普通用戶查詢工資詳情和反饋意見等功能，包括三個頁面：app_index.html、app_search_wage_detail.html 、app_feedback.html。

3 Ajax調接口

jQuery調用后臺接口有三種方式，分別是$.ajax（{}）、$.post（{}）和$.get（{}），本項目采用的是ajax方法[2]。以登錄頁為例，通過設置請求方式為POST，數據類型為json，來向后臺提交賬號和密碼參數[3]，接下來可在本地通過瀏覽器的開發者工具查看返回的數據，返回錯誤碼為0則登錄成功，跳轉至網頁端首頁。

4 網頁端

4.1 首頁菜單實現

首頁排版參照了柏慧通電子工資條網頁的菜單樣式設計，通過設置ul li a樣式和jQuery的toggleClass方法來達到菜單點擊有展開折疊[4]的效果。

由于本項目網頁端頁面較少，因此菜單鏈接采用了iframe標簽（頁面嵌套）。在菜單li標簽中設置html5里面出的新屬性data-src[5]，再寫一個函數即當用戶點擊某個li標簽時，相應的data-src傳入iframe標簽中的src中，來達到內嵌頁面跳轉的效果，從而精簡代碼。當然，為了頁面美觀，項目中將iframe標簽的邊界設置為0，寬高設置為100%。為了各頁面的安全性，每個頁面都有判斷是否登錄的方法來防止用戶跳過登錄界面直接訪問[6]。

4.2 上傳Excel文件

導入工資條頁面因為有發放月份的字段，因此引用了date_time_picker的樣式和js文件，方便用戶進行日期選擇。由于后臺接收的日期參數是時間戳到秒，所以input框接收到的數據還需要經過處理Date.parse（date）/1000，然后以formData的形式將各參數和文件傳給后臺[7]。在測試中，發現input框總是記住上一次輸入日期，給用戶帶來不便，就通過設置autocomplete="off"來消除上一次的輸入內容;為避免用戶上傳其他類型的文件，也可在上傳文件input框中設置accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet， application/vnd.ms-excel"。

4.3 有條件的分頁查詢

根據后臺接口傳來的json數據，需要對數據進行有條件的分頁查詢，所以工資條上傳記錄頁和詳情頁都使用了較為靈活的jq-paginator.js分頁插件。此分頁插件之所以靈活，是因為調用該方法較為簡單，只需要寫出$（"#pagination-bottom"）.jqPaginator（pagination）即可。Pagination為一個集合，里面的元素可為全局變量。

拼接分頁數據時，可通過if語句判斷是否要傳遞當前頁和一頁顯示記錄數以外參數，以達到點擊查詢按鈕查詢的效果。但是查詢條件拉去的數據跟之前默認的分頁數據是不一樣的[8]，所以要通過$（"#pagination-bottom"）.jqPaginator（'destroy'）語句銷毀之前拼接好的數據。有一點需要注意，ajax請求后臺數據時，需要設置async為false，讓所有的請求均為同步請求，分頁效果才能正常。

因為沒有使用完整的jQuery框架，所以在測試時發現項目沒有切換一頁記錄數的功能。為了改進其功能，項目增加了select的onchange事件，讓用戶自由選擇一頁顯示的記錄數，從而讓分頁功能更加貼近用戶習慣。

4.4 下發工資信息

查詢工資詳情頁除了條件查詢分頁功能以外，還有一個下發消息按鈕。實現原理則是設置按鈕只能被點擊一次，根據sendStatus的狀態判斷用戶是否可以再進行點擊。項目中使用的是jQuery中的hide（）和show（）方法[9]。當用戶點擊發送按鈕，頁面拉取后臺數據，返回數據中的錯誤碼為0則發送成功，按鈕隱藏，就算重新打開頁面按鈕也會隱藏，避免用戶重復點擊[10]。

4.5 其他基礎知識

前端開發人員可以通過瀏覽器的開發者工具調試代碼，當發現頁面有緩存問題時，可以在各個鏈接地址后面添加隨機數Math.round（Math.random（）*100）來解決。

項目內實現返回上一頁功能可用onclick="Javascript： window.history.go（-1）"，其中的history.go（-1）表示后退與刷新。

5 移動端

5.1 動態構建年月下拉框

移動端頁面主要引用了jquery.mobile的樣式和js文件，因為頁面是在企業微信內使用，所以首頁一開始就要通過企業微信的code換取用戶的id，然后動態構建年月select下拉框。

頁面通過getFullYear（）方法獲取當前年份，再用for循環將最近五年的數字通過語句$（"#year"）.append（"" + year + ""）放入option中。為了讓數據正常顯示，要用移動端刷新語句$（"#year"）.selectmenu（'refresh'， true）。

當同一個月下發了兩次工資時，例如有績效獎金，月份下拉框可以通過Map方法去掉重復的月份來保持頁面美觀性。用戶可以在下一個頁面用工資名稱查詢相應的工資情況。

5.2 個人工資信息展示

個人工資信息展示頁面主要用到了jQuery控制css類的知識點，通過條件判斷頁面的div顯示與隱藏問題。這需要前端開發人員有清晰的思維，在編寫代碼前有一個設計框架，再逐步調試和改進。

6 結束語

電子工資條項目經過用戶的體驗測試，前端頁面進行了部分修改，已正式投入使用。通過這個項目的開發，可以知道，前端設計和開發不僅僅要求前端開發人員掌握html、css、js等基礎，還需具備一定的審美，了解用戶的需求和習慣，這樣才能讓項目更加受歡迎。

參考文獻：

[1] 鄭李園.基于企業微信的高校移動辦公平臺建設[J].中國電力教育，2019（2）：77-78.

[2] Jack Franklin，Russ Ferguson.A jQuery Image Slider[M]//Beginning jQuery. Apress， 2017.

[3] Camino H J B，Olalo R J C，Salamo D D，et al.An Ajax-Based Hotel Management System Implementing Three-Tier Architecture Approach[J].Cloud，2013，1（1）.

[4] 趙愛濤.實現網頁下拉菜單的常用方法[J].石家莊職業技術學院學報，2017，29（2）：42-44.

[5] Jeanine Meyer. Quiz： Using Games to Learn HTML5 and JavaScript[M]// The Essential Guide to HTML5，2018.

[6] 賈軒，王棟軒.基于SSM框架下用戶注冊登錄界面的設計與實現[J].信息系統工程，2019（2）：54.

[7] 徐迪新，吳長孫.基于.NET平臺jQuery Ajax異步處理JSON數據應用[J].科技廣場，2017（4）：77-80.

[8] 熊慧.jQuery技術在網頁美工中的應用[J].中國新通信，2018，20（6）：100.

[9] Shuai Wang，Wensheng Dou，Chushu Gao.Mining API Type Specifications for JavaScript[C]//2017 24th Asia-Pacific Software Engineering Conference （APSEC）.IEEE Computer Society，2017.

[10] 張艷敏，喬陽陽.基于HTML5的移動端游戲助手APP的設計與實現[J].數碼世界，2018（8）：92-93.

【通聯編輯：謝媛媛】