基于Ionic+Node.js的高校預報到系統(tǒng)設計

徐明強 吳新華

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

關(guān)鍵詞：Ionic Node.js;預報到;信息系統(tǒng)

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

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

1 ? ?高校預報到系統(tǒng)設計

1.1 ?開發(fā)技術(shù)簡介

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

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

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

1.2 ?系統(tǒng)功能分析

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

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

1.3 ?系統(tǒng)設計

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

2 ? ?高校預報到系統(tǒng)實現(xiàn)

2.1 ?環(huán)境搭建

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

2.2 ?客戶端組件設計

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

2.3 ?路由設置

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

2.4 ?路由守衛(wèi)

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

2.5 ?服務器端設計

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

2.6 ?系統(tǒng)調(diào)試和生成

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

3 ? ?結(jié)語

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

[參考文獻]

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

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

[3]楊眾.高校智慧迎新系統(tǒng)的設計與實現(xiàn)[J].信息技術(shù)與信息化，2019（1）：50-52.

[4]高興建，花曉慧，邢溧萍.基于Ionic的混合移動應用的研究與實現(xiàn)[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