基于Ionic+Node.js的高校預報到系統設計

徐明強 吳新華

摘 ? 要：文章分析了高校現階段迎新工作面臨的主要問題，提出了一種使用Ionic和Node.js技術設計的高校預報到系統。該系統主要實現了新生登錄、新生信息查詢和填報等功能。Ionic混合開發模式具有跨平臺優勢和Node.js服務器具有輕量級優勢，為高校信息系統建設提供參考。

關鍵詞：Ionic Node.js;預報到;信息系統

云計算、人工智能、大數據分析、5G通信等多種新興信息技術隨著推廣和日趨成熟，在教育和生產中得以廣泛應用[1]。教育信息化“十三五”規劃中提出，提倡利用信息化的手段共享優質教育資源，提升教育管理服務能力。校園信息化建設水平是衡量全國高校在高水平內涵建設中的重要組成部分。

近年來，受益于我國高等教育的高速發展，江蘇工程職業技術學院每年都要迎接大量新生入學報到，生源地較多，且覆蓋我國大多數省份和地區。新生被學校錄取后，學校和新生之間缺少更進一步、相互了解的橋梁，影響后期新生報到工作的有序開展，車站接送車輛的安排、人工報到繳費登記、宿舍分配和物品領取等流程存在擁塞、滯后。如何利用新興信息技術服務原有的新生報到流程，簡化學生報到手續，提升學生報到的效率，是各高校管理者面臨的重要課題[2-3]。

1 ? ?高校預報到系統設計

1.1 ?開發技術簡介

隨著移動技術的迅猛發展，人們更多青睞于使用移動終端設備?；ヂ摼W開發技術層出不窮，如HTML5，CSS3，Ionic，Node.js，Angular，React等在移動開發中逐漸興起。目前移動開發主要有三種模式：原生開發（Native APP）、智能終端瀏覽器開發（Web APP）、混合開發（Hybrid APP）[4]。原生開發的開發周期長、開發成本大且平臺間不兼容。而Web開發成本低，升級和維護簡單，但體驗性不高。混合開發介于上述兩者之間，具有良好的體驗性和跨平臺等優勢。

Ionic是一款強大的混合式/hybrid HTML5輕量級移動開發框架，具有速度快、界面美觀等特點，用戶體驗較好。Ionic基于Angular語法，簡單易學。使用 HTML，CSS和JavaScript等Web技術，可以快速開發基于Ionic框架下的各種移動端應用程序[5]。

Node.js是運行在服務器端的JavaScript，基于谷歌Chrome V8引擎的JavaScript運行。它是一個事件驅動的I/O服務端的JavaScript環境，通過其官網，用戶可以下載安裝，使用Node.js來搭建服務器[6]。

1.2 ?系統功能分析

由于各省招生錄取原始數據格式并不完全一致，考生信息中的出生年月如2000年8月，部分省招辦的數據格式為2000-08，而另一些省招辦的數據格式可能是200008，這會導致數據的不一致性，設計預報到系統時，需要先將新生信息統一處理成學校標準數據。

在系統設計中提供一部分學生特征數據如姓名、性別、生源地、錄取院系班級等基礎信息供瀏覽。為了提升新生在報到時獲得的便捷體驗，學生需要在預報到系統中更新來學校報到的交通工具或方式、家長是否陪同、學生或家長的聯系方式、是否寄宿，需要宿舍的被褥和洗漱等生活用品、學費繳納方式等。系統通過對上述信息的實時統計，校方招就處可以有序安排接送車輛工作，后勤處提前準備生活用品和軍訓服裝，學工處負責新生宿舍安排、財務處負責入學收費和新生貸款等事宜，信息中心負責制作新生的校園卡等。學校各個部門相互協作，提高了迎新工作的效率。

1.3 ?系統設計

將整個預報到系統分為移動設備客戶端和服務器端，在移動端使用Ionic框架實現系統的前端UI界面及數據邏輯。通過網絡路由設備，實現客戶端和服務器端通信?？蛻舳艘苿又悄茉O備需要處理登錄模塊，學生報到信息填報與展示模塊通過Ionic框架實現。在服務器端，使用Node.js平臺作為服務器，在此基礎上，使用Express框架進行Web開發。使用Ionic原生Http插件，客戶端通過網絡發送數據請求，服務器接收請求并響應，數據通過網絡傳輸后客戶端獲得響應，完成客戶端和服務器端的數據通信，系統架構如圖1所示。

2 ? ?高校預報到系統實現

2.1 ?環境搭建

選擇安裝目前流行的開源VS Code編輯器作為系統開發環境。在Node.js官網中下載并安裝最新版本，同時Node.js自帶npm。在客戶端通過npm install命令安裝Cordova，Ionic和http等模塊和框架，通過ionic start stuRegistry tabs命令快速生成帶tabs導航的程序模板。在服務器端，為了建立Web應用框架和連接SQL Server數據庫服務器，通過npm install命令安裝Express和msSQL開源模塊。通過npm命令生成一個基于Express的應用框架服務器。

2.2 ?客戶端組件設計

在客戶端應用程序中，根據報到需求，設計了報到登錄、個人信息、家庭成員及聯系方式和報到情況（新生財務繳費、走讀意向、結伴同行等）4個頁面。在Ionic中使用Typescript語言編程，實現業務邏輯關系，每個頁面視圖內容由一個組件類完成，組件類由裝飾器@Component（）標識，裝飾器中可以配置一些諸如自定義標簽selector，組件對應的顯示模板template，模板的樣式style等元數據。通過ionic g component命令，創建了報到登錄、個人信息、家庭成員及聯系方式和報到情況4大組件，通過http模塊向服務器發送數據請求。圖2為登錄頁面和個人信息頁面。

2.3 ?路由設置

路由跳轉完成各頁面間的切換，新生完成登錄驗證后，進入tabs視圖頁面，該頁面可以通過底部tabs完成不通視圖頁面的切換。接下來，需要給各組件在app-routing文件中設置它們的路由，如routes=[{ path： 'personal'， component： PersonalComponent}]。

2.4 ?路由守衛

對于進入除登錄頁面的其他頁面的行徑，需首先判斷用戶是否具有瀏覽該頁面的權限。其次，通過ionic g guard loginGuard指令創建路由守衛，編寫路由守衛規則，并在app-routing文件中配置需要路由守衛（canActivate屬性）的組件路由routes={path： 'xxx'，component： xxxComponent，canActivate： [LoginGuard]}。這樣就可以避免頁面被沒有訪問權限的用戶所瀏覽。

2.5 ?服務器端設計

服務器端通過Express框架搭建服務器，開啟監聽服務app.listen（），主要負責監聽移動端發送過來的數據請求，后臺對這些請求處理并響應。使用SQL Server作為服務器端的數據庫，需要安裝開源的mssql模塊，配置數據庫連接參數，實現服務器與數據庫的連接，如圖3所示。根據業務需求，通過數據庫的增刪改查完成對SQL數據庫的操作。服務器將數據以JSON格式返回給移動端，如圖4所示。當移動端接收到學生信息的JSON數據后，前端可以將需要的數據解析并展現出來。

2.6 ?系統調試和生成

本系統移動端和服務器端設計完成后，使用谷歌瀏覽器對其進行在線配置、測試。服務器端進入服務器程序目錄，使用VS Code，輸入npm start開啟服務器?？蛻舳舜a中，進入客戶端程序目錄，輸入ionic serve在線調試APP程序。調試完成后，使用ionic命令打包并生成APK安裝包。工作人員采用混合開發模式，所以其應用基本上無需修改也可以制作成iOS安裝包或部署在微信平臺上。

3 ? ?結語

通過新生提前填報相關信息，文章系統可以較好地解決高校在迎新工作中存在的問題。在移動端，采用Ionic框架搭建前端應用，開發上手快，提高了應用開發的效率，一次開發可以適用于多種不同終端，復用性高，而服務器端，采用了目前較為流行的Node.js作為服務器，采用異步事件驅動和非阻塞I/O操作，可以充分利用CPU資源，較輕量級的服務可以提高服務器的執行效率。

[參考文獻]

[1]何克抗.21世紀以來的新興信息技術對教育深化改革的重大影響[J].電化教育研究，2019（3）：5-12.

[2]王朋.智慧校園環境下高校迎新工作探討[J].科技與創新，2018（4）：115-116.

[3]楊眾.高校智慧迎新系統的設計與實現[J].信息技術與信息化，2019（1）：50-52.

[4]高興建，花曉慧，邢溧萍.基于Ionic的混合移動應用的研究與實現[J].計算機時代，2018（3）：31-34.

[5]佚名.Ionic框架參考資料[EB/OL].（2020-01-20）[2020-03-25].https：//ionicframework.com.

[6]佚名.Node.js參考資料[EB/OL].（2020-01-20）[2020-03-25].https：//nodejs.org/en/.

Design of college enrollment system based on Ionic+Node.js

Xu Mingqiang， Wu Xinhua

（Library and Information Center， Jiangsu College of Engineering and Technology， Nantong 226007， China）

Abstract：This paper analyzes the mayor problems faced by college in recent enrollment works， and proposes Ionic and Node.js to design college enrollment system. The system mainly realizes the functions of new student login， information inquiry and report. Ionic hybrid development model has the advantage of cross-platform and Node.js server has the priority in the lightweight， which providing reference for the construction of college information system.

Key words：Ionic Node.Js; forecast to roll in; information system