基于WebAPP框架的電子學生證平臺設計

陳 燈，黃 超

（武漢工程科技學院 湖北 武漢 430200）

0 引言

當前，數字化校園的概念已在教育行業廣泛普及，各高校都建立了學生信息數據平臺用于實現學生學籍、考試成績、圖書借閱等領域的信息化高效管理[1]。但當前在學生證的使用方面，大部分高校還是采用傳統的紙質證書管理方式，普遍存在著攜帶不便、易污損、易丟失、易偽造以及信息無法實時更新等方面的問題，對于紙質證書的選用，主要是受限于學生證數量巨大且需要隨身攜帶的應用場景特征。而現階段大學生群體中智能手機的普及與移動應用程序開發技術的成熟，為實現學生證件的電子化與移動化提供了載體和技術保障，依托智能手機設備與移動應用開發技術以及云服務器技術可以有效的解決以上問題，大幅提升高校學生管理工作的信息化水平與工作效率。同時，中心化的數據集中管理模式，也為學生證的真實性審核提供實時、便捷化的實現基礎，有效杜絕了學生證被偽造的潛在隱患。

1 WebAPP技術在數字化校園領域中的應用優勢

電子學生證平臺整合了云服務器技術、數據庫技術、Web頁面技術以及手機端應用程序（Application,APP）技術，對于學生用戶，電子學生證以手機APP的形式安裝部署在每一位學生的智能手機設備上，可以實現便捷化的數據訪問與操作。而對于面向高校大學生的應用場景，手機APP的設計開發過程中要解決的首要問題就是程序的兼容性問題，由于學生用戶群體數量龐大，智能手機設備型號復雜且系統版本種類繁多，手機APP如果無法適配所有的機型和系統版本，必然導致電子學生證平臺因無法全面覆蓋所有的學生而難以投入日常運行，而針對不同機型和系統版本推出大量的手機APP升級程序又會造成開發與實施成本過高，同時也為系統投入運行后的運維工作帶來嚴重負擔[2]。

WebAPP作為當前主流的移動應用程序開發技術，其基本原理是在手機端應用程序中嵌入超文本標記語言第5版（Hyper Text Markup Language，HTML5）頁面，應用程序本身僅承擔全屏適配、設備識別等基礎功能[3]，具體的數據展示和用戶交互功能由部署在Web服務器上的HTML5頁面負責完成，需要進行系統更新維護操作時，運維人員只需要更新Web服務器上的HTML5文件即可在所有終端上完成內容與功能的實時更新。WebAPP技術作為當前主流的手機應用程序開發技術，以其建構簡單、故障率低、易于維護、低成本、高兼容性的特點被廣泛應用在多種行業和領域，而電子學生證平臺的應用場景特征為用戶多、系統運行周期長、對系統穩定性和終端設備兼容性要求高，非常適合選用WebAPP技術來構建用戶終端模塊，尤其是在設備兼容性與可維護性方面，WebAPP只需要構建有限的幾個升級版本即可在當前市場上推出的所有機型上完成部署，保障每位學生的智能手機上都能夠安裝電子學生證終端程序。

2 電子學生證平臺的模型設計

本文所設計的電子學生證平臺見圖1，由3個子系統構成，分別是信息管理子系統、學生端子系統與證件核驗子系統，由系統核心數據庫負責，基于相同的基礎數據為3個子系統提供相應的數據實時訪問接口，完成數據的存儲、檢索與更新管理功能。

學生端子系統面向學生用戶提供服務，負責從系統核心數據庫中讀取每一位學生的數據并實現電子學生證信息的展示功能。學生證信息主要包括文本型信息和圖片型信息，用于描述學生的姓名、性別、系部、班級、學號等基礎數據，圖片型信息則分為學生人像照片與二維碼兩部分，二維碼的功能是向證件核驗子系統提供基于二編碼的學生證件檢索關鍵字，為在證件核驗子系統中實現快捷的掃碼核驗功能提供數據支持。

證件核驗子系統面向系部層級的各級管理人員提供服務，負責基于學生端的二維碼信息實現對電子學生證件的信息核驗功能。證件核驗子系統首先從學生所出示的二維碼中獲取到數據檢索關鍵字，再通過該關鍵字從系統核心數據庫中讀取該學生的基礎數據與人像照片并展示，用于系部管理人員進行人證對比核驗。

信息管理子系統面向學生管理部門的用戶提供服務，負責電子學生證的維護與管理，包括對學生基礎信息的添加與更新、人像照片的采集與上傳以及為每位學生用戶創建獨一無二的二維碼圖片等功能。

由于不同的子系統之間必需保持數據的一致性，任何信息的更新必需實時同步到所有子系統中，平臺的各子系統之間需要實時共享完全相同的學生數據，因此系統核心數據庫以中心化的方式集中統一管理全部學生的信息，各子系統不在本地存儲任何數據，所有的數據訪問操作均通過系統核心數據庫所提供的規范化的數據訪問接口來完成。

3 關鍵實現技術分析

本文所設計的電子學生證平臺的學生端子系統與證件核驗子系統以WebAPP技術為核心構建，其主要功能由HTML5頁面實現，而信息管理子系統則以Web程序開發技術構建，考慮到程序的通用性與控制項目開發復雜度的因素，選用了HTML5、jQuery框架來構建信息管理子系統與學生端子系統的用戶界面。數據庫交互接口則選用超文本預處理器（Hypertext Preprocessor，PHP）程序完成，以提供良好的可擴展性能，系統核心數據庫選用SQL Server以有效應對高并發的應用場景。

3.1 學生端子系統的關鍵實現技術

學生端子系統基于WebAPP實現，分為應用程序和HTML5頁面兩部分，其中應用程序的核心技術為WebView組件，在Android系統中WebView組件的正常運行需要在AndroidManifest文件中配置參數以啟動網絡訪問功能[4]，關鍵參數如下：

對于WebView組件的調用，則需要在Java文件類中構建WebView對象，其關鍵實現過程如下：

對于HTML5頁面部分，主要涉及從系統核心數據庫中實時同步信息以及用戶界面的自適應性能兩個方面，數據庫中的信息同步功能使用PHP程序實現，在用戶登入系統后立即向數據庫發起數據檢索請求，并將用戶通過身份驗證后保留在Session中的身份ID作為檢索關鍵字以獲取相應的學生基本信息與人像、二維碼圖片地址，其關鍵實現過程如下：

基本信息與人像、二維碼圖片在用戶界面上的展示則基于PHP在HTML代碼中的數據輸出原理來完成，其關鍵實現過程如下：

3.2 證件核驗子系統的關鍵實現技術

證件核驗子系統的工作流程見圖2，首先使用智能手機的攝像頭拍攝學生端顯示的學生證二維碼圖片，然后對二維碼內容進行解碼獲取其中的學生ID，最后根據ID號從系統核心數據庫中獲取該學生的相關信息并顯示。

證件核驗子系統的核心功能圍繞二維碼識別模塊展開，該模塊的功能基于WebAPP中的應用程序部分實現，在Android系統中實現二維碼的識別，首先需要調用智能手機的攝像頭功能，行需要在AndroidManifest文件中配置參數以啟動攝像頭訪問功能[5]，關鍵參數如下：

二維碼圖片中信息的解析，基于Android第三方提供的zxing開發包實現需要在項目中添加zxing依賴，并在程序中調用onAnalyzeSuccess方法讀取二維碼圖片中的信息，最后將讀取到的學生ID號使用POST模式發送至HTML5頁面。在證件核驗子系統的HTML5頁面中，則需要使用PHP接收從APP程序發送來的學生ID號，并將該參數作為檢索關鍵字發送至系統核心數據庫的數據檢索接口。

3.3 信息管理子系統的關鍵實現技術

信息管理子系統采用B/S模式設計，為管理人員提供基于瀏覽器的訪問操作，學生基本信息的管理通過平臺統一構建的數據訪問接口完成。而人像照片的上傳與二維碼圖像文件的創建則需要使用PHP中的數據接收對象與文件操作對象實現。

人像照片的上傳流程見圖3，首先需要通過Web頁面上的表單控件將圖片文件轉換為BASE64編碼后以POST模式提交至服務器端的PHP程序，PHP程序對BASE64編碼進行解析后，將描述圖片內容的二進制字符寫入文件后，以圖片文件的格式保持在服務器上。

二維碼圖片的創建則基于PHPQRCODE類庫實現，通過將系統核心數據庫中每一位學生的ID號作為參數，進行二維碼編碼并存儲為圖片格式。關鍵實現過程如下：

3.4 身份驗證功能的關鍵實現技術

用戶身份驗證基于系統核心數據庫中存儲的用戶信息展開，具體實現過程通過PHP程序完成，主要涉及對系統核心數據庫的檢索、MD5加密、Session數據緩存以及頁面重定向技術。平臺對用戶所提交的賬號、密碼信息首先要進行合法性檢測，接下來將用戶名作為檢索關鍵字提交至系統核心數據庫的檢索接口并獲取返回的用戶賬號信息，然后根據返回的結果決定是否進行密碼校驗，密碼校驗的過程需要在對字符串進行MD5的32位加密的前提下進行。最后，根據密碼校驗的結果進行頁面重定向操作，將用戶轉向功能頁面或前往登錄頁面重新輸入賬號密碼。關鍵實現過程如下：

3.5 數據訪問接口的關鍵實現技術

針對電子學生證平臺高并發訪問的特點，為保證數據訪問的效率與可靠性，基于PHP程序為系統核心數據庫構建了WebService接口為各子系統提供統一規范的數據檢索和操作功能。WebService作為高安全性的數據訪問接口，對各子系統數據的接收與返回均采用Json格式進行封裝。在接收到數據更新或檢索請求后，通過PHP的數據庫訪問對象向系統核心數據庫發送SQL命令，并將系統核心數據庫反饋結果用SAS非對稱加密的方式進行返回至各子系統。

4 結語

本文基于數字化校園中學生證信息化管理的需求，以WebAPP技術為核心整合了多種軟件開發技術，嘗試構建了適用于高校學生管理工作的電子學生證平臺，提供了信息化、網絡化的學生證數據管理、日常使用、防偽核驗等服務，在設計過程中兼顧保證了用戶使用的便捷性與實時性，充分滿足了學生證電子化的應用需求，在提升學生管理工作效率的同時，也有效擴展了數字化校園的應用場景。