徐明強(qiáng) 吳新華

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

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

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

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

1 ? ?高校預(yù)報(bào)到系統(tǒng)設(shè)計(jì)

1.1 ?開(kāi)發(fā)技術(shù)簡(jiǎn)介

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

Ionic是一款強(qiáng)大的混合式/hybrid HTML5輕量級(jí)移動(dòng)開(kāi)發(fā)框架，具有速度快、界面美觀等特點(diǎn)，用戶(hù)體驗(yàn)較好。Ionic基于Angular語(yǔ)法，簡(jiǎn)單易學(xué)。使用 HTML，CSS和JavaScript等Web技術(shù)，可以快速開(kāi)發(fā)基于Ionic框架下的各種移動(dòng)端應(yīng)用程序[5]。

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

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

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

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

1.3 ?系統(tǒng)設(shè)計(jì)

將整個(gè)預(yù)報(bào)到系統(tǒng)分為移動(dòng)設(shè)備客戶(hù)端和服務(wù)器端，在移動(dòng)端使用Ionic框架實(shí)現(xiàn)系統(tǒng)的前端UI界面及數(shù)據(jù)邏輯。通過(guò)網(wǎng)絡(luò)路由設(shè)備，實(shí)現(xiàn)客戶(hù)端和服務(wù)器端通信。客戶(hù)端移動(dòng)智能設(shè)備需要處理登錄模塊，學(xué)生報(bào)到信息填報(bào)與展示模塊通過(guò)Ionic框架實(shí)現(xiàn)。在服務(wù)器端，使用Node.js平臺(tái)作為服務(wù)器，在此基礎(chǔ)上，使用Express框架進(jìn)行Web開(kāi)發(fā)。使用Ionic原生Http插件，客戶(hù)端通過(guò)網(wǎng)絡(luò)發(fā)送數(shù)據(jù)請(qǐng)求，服務(wù)器接收請(qǐng)求并響應(yīng)，數(shù)據(jù)通過(guò)網(wǎng)絡(luò)傳輸后客戶(hù)端獲得響應(yīng)，完成客戶(hù)端和服務(wù)器端的數(shù)據(jù)通信，系統(tǒng)架構(gòu)如圖1所示。

2 ? ?高校預(yù)報(bào)到系統(tǒng)實(shí)現(xiàn)

2.1 ?環(huán)境搭建

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

2.2 ?客戶(hù)端組件設(shè)計(jì)

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

2.3 ?路由設(shè)置

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

2.4 ?路由守衛(wèi)

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

2.5 ?服務(wù)器端設(shè)計(jì)

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

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

本系統(tǒng)移動(dòng)端和服務(wù)器端設(shè)計(jì)完成后，使用谷歌瀏覽器對(duì)其進(jìn)行在線(xiàn)配置、測(cè)試。服務(wù)器端進(jìn)入服務(wù)器程序目錄，使用VS Code，輸入npm start開(kāi)啟服務(wù)器。客戶(hù)端代碼中，進(jìn)入客戶(hù)端程序目錄，輸入ionic serve在線(xiàn)調(diào)試APP程序。調(diào)試完成后，使用ionic命令打包并生成APK安裝包。工作人員采用混合開(kāi)發(fā)模式，所以其應(yīng)用基本上無(wú)需修改也可以制作成iOS安裝包或部署在微信平臺(tái)上。

3 ? ?結(jié)語(yǔ)

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

[參考文獻(xiàn)]

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

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

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

[4]高興建，花曉慧，邢溧萍.基于Ionic的混合移動(dòng)應(yīng)用的研究與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，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