趙曉凡 高天棟 李文迪 陳燕

摘 要：“433”學(xué)生成才工程是為匹配學(xué)院“聚焦智慧企業(yè)、聚力智慧服務(wù)、成就智慧人生”的人才培養(yǎng)定位所制定的方案。系統(tǒng)以我院“433”學(xué)生成才工程為研究?jī)?nèi)容，以師生行為為研究對(duì)象，為我院“433”學(xué)生成才工程提供一個(gè)信息化、智能化的集收集、存儲(chǔ)、分析和匯總為一體的管理平臺(tái)。系統(tǒng)的開(kāi)發(fā)，為我院“433”學(xué)生成才工程的順利實(shí)施添磚加瓦。

關(guān)鍵詞：智慧學(xué)工;“433”學(xué)生成才管理;智慧校園

一、引言

“433”學(xué)生成才工程方案緊貼學(xué)生成才需求，以促進(jìn)學(xué)生更好地發(fā)展、更高質(zhì)量、更充分地就業(yè)創(chuàng)業(yè)為導(dǎo)向。2019年起，助力學(xué)生在校三年期間全部參與成才工程，并全方位全過(guò)程跟蹤、記錄、指導(dǎo)每名學(xué)生的成才過(guò)程。從該方案實(shí)施以來(lái)，學(xué)生成才信息主要每年定期利用離線Excel表格、騰訊在線文檔、問(wèn)卷星小程序等方式進(jìn)行收集、數(shù)據(jù)需要重復(fù)采集、學(xué)生不方便實(shí)時(shí)和自己的規(guī)劃進(jìn)行比對(duì)、二級(jí)學(xué)院、職能部門數(shù)據(jù)統(tǒng)計(jì)工作量繁重，并且通過(guò)騰訊在線文檔等在線方式存在學(xué)生信息泄露安全風(fēng)險(xiǎn)。經(jīng)過(guò)前期需求調(diào)研，本系統(tǒng)確定以“433”學(xué)生成才工程為研究?jī)?nèi)容，以師生行為為研究對(duì)象，采用PHP+Bootstrap+MySQL技術(shù)，實(shí)現(xiàn)全方位全過(guò)程跟蹤指導(dǎo)、隨時(shí)隨地記錄學(xué)生的成才過(guò)程，動(dòng)態(tài)綜合生成學(xué)生成才錄，助力新時(shí)代學(xué)生有新作為。

二、系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

“433”學(xué)生成才管理系統(tǒng)研究及建設(shè)緊密結(jié)合學(xué)院“433”成才工程。充分展現(xiàn)學(xué)院實(shí)施“433”學(xué)生成才工程的總體要求及目標(biāo)、具體任務(wù)、實(shí)施路徑、活動(dòng)與成果等;便于各職能部門跟蹤、分析、監(jiān)控、指導(dǎo)各二級(jí)學(xué)院以及各二級(jí)學(xué)院輔導(dǎo)員、導(dǎo)師指導(dǎo)每個(gè)學(xué)生“433”學(xué)生成才實(shí)施情況;為學(xué)生提供便捷的“433”成才記錄途徑和自我分析數(shù)據(jù)。系統(tǒng)根據(jù)應(yīng)用情境和用戶對(duì)象規(guī)劃系統(tǒng)的功能模塊，如下圖1所示。在系統(tǒng)頁(yè)面結(jié)構(gòu)上，采用Bootstrap技術(shù)，實(shí)現(xiàn)響應(yīng)式布局的“433”成才管理頁(yè)面布局，便于用戶在移動(dòng)端、PC端等各種終端設(shè)備隨時(shí)隨地登錄并使用系統(tǒng)。在邏輯功能實(shí)現(xiàn)上，基于PHP+ MySQL技術(shù)實(shí)現(xiàn)業(yè)務(wù)流程處理和數(shù)據(jù)的交互，重點(diǎn)圍繞學(xué)生成才信息的采集、存儲(chǔ)、提交與分析匯總展開(kāi)，并提出可行的解決方案。

三、系統(tǒng)功能模塊的實(shí)現(xiàn)

（一）公共入口的實(shí)現(xiàn)

系統(tǒng)為用戶提供統(tǒng)一的用戶登錄界面。由于系統(tǒng)的使用對(duì)象是本校學(xué)生和教師，為方便管理，系統(tǒng)共享學(xué)院教務(wù)系統(tǒng)學(xué)生教師用戶權(quán)限，無(wú)需用戶另外設(shè)置注冊(cè)功能，只要為用戶指定登錄賬號(hào)為學(xué)生學(xué)號(hào)或者教師工號(hào)，并且設(shè)置一個(gè)初始密碼，用戶根據(jù)權(quán)限進(jìn)入系統(tǒng)更改密碼即可。

用戶輸入學(xué)號(hào)或工號(hào)以及初始密碼，通過(guò)POST方式請(qǐng)求服務(wù)器，服務(wù)器根據(jù)數(shù)據(jù)庫(kù)信息自動(dòng)判斷用戶身份。如果輸入的是工號(hào)和初始密碼，系統(tǒng)判斷工號(hào)和密碼是否有誤，沒(méi)有錯(cuò)誤自動(dòng)跳轉(zhuǎn)到教師如圖端首頁(yè)面。如果輸入的是學(xué)號(hào)和初始密碼，系統(tǒng)判斷沒(méi)有錯(cuò)誤則自動(dòng)跳轉(zhuǎn)到學(xué)生端首頁(yè)面。為保證系統(tǒng)安全性，系統(tǒng)對(duì)用戶表單提交的密碼信息進(jìn)行了MD5加密處理。學(xué)生和教師根據(jù)權(quán)限進(jìn)入系統(tǒng)后立即更改密碼即可。

（二）學(xué)生端功能模塊的實(shí)現(xiàn)

1.學(xué)生端導(dǎo)航菜單的實(shí)現(xiàn)

學(xué)生按照學(xué)號(hào)、密碼成功登錄，進(jìn)入“433”學(xué)生成才系統(tǒng)學(xué)生端首頁(yè)面，系統(tǒng)為學(xué)生提供的導(dǎo)航菜單包括“433”簡(jiǎn)介、“433”典范、“433”信息、我的“433”、個(gè)人中心和退出，助力學(xué)生全方位了解、實(shí)施、完成“433”學(xué)生成才工程。

為滿足學(xué)生群體不受時(shí)空限制，隨時(shí)隨地記錄自己成長(zhǎng)信息，系統(tǒng)采用Bootstrap前端開(kāi)發(fā)工具包，Bootstrap基于HTML、CSS、JavaScript等前端技術(shù)，提供了功能強(qiáng)大的內(nèi)置組件和基于Web的定制功能，為開(kāi)發(fā)人員創(chuàng)建接口提供了一個(gè)簡(jiǎn)潔、統(tǒng)一的解決方案，支持主流的Chrome、IE、Firefox、Safari等瀏覽器，Bootstrap的響應(yīng)式CSS能夠適用于PC機(jī)、平板電腦和手機(jī)等屏幕大小分辨率，為系統(tǒng)的跨平臺(tái)應(yīng)用提供了較好的技術(shù)服務(wù)。

系統(tǒng)使用Bootstrap包中的.container類和.container-fluid類。.container類用于固定寬度并支持響應(yīng)式布局容器，.container-fluid類用于設(shè)置界面100%寬度，占據(jù)全部視口（viewport）的容器。先在容器中添加<nav>標(biāo)簽，然后采用Bootstrap的.navbar類和.navbar-default類制作導(dǎo)航欄，并且為<nav>標(biāo)簽添加role=”navigation”屬性值，可以增加可訪問(wèn)性。然后在<nav>標(biāo)簽中添加類為.navbar-header的div標(biāo)簽，用于設(shè)置導(dǎo)航菜單的標(biāo)題。添加類為.nav 和.navbar-nav的ul標(biāo)簽用于設(shè)置界面導(dǎo)航菜單即可實(shí)現(xiàn)系統(tǒng)響應(yīng)式的界面布局方式，用戶不僅可以在PC端，還可以在平板電腦或手機(jī)端隨時(shí)隨地使用系統(tǒng)，滿足用戶更好的需求和體驗(yàn)。下圖2分別為系統(tǒng)在手機(jī)端和PC端的頁(yè)面展示效果圖。

2.我的“433”的實(shí)現(xiàn)

學(xué)生提交“433”成才數(shù)據(jù)到服務(wù)器后，各職能部門、二級(jí)學(xué)院以及各導(dǎo)師、輔導(dǎo)員按照權(quán)限不同依次審核，并提出具有針對(duì)性的反饋或者指導(dǎo)意見(jiàn)。在我的“433”模塊，以學(xué)期為單位，為學(xué)生生成“433”數(shù)據(jù)畫(huà)像，最終生成“433”成才錄。此模塊用于為學(xué)生隨時(shí)提交“433”成才信息，等待導(dǎo)師審核認(rèn)證通過(guò)后反饋的詳細(xì)成才信息，以便學(xué)生了解并掌握“433”任務(wù)完成的進(jìn)度以及導(dǎo)師給予的指導(dǎo)性意見(jiàn)。技術(shù)實(shí)現(xiàn)上，學(xué)生端通過(guò)POST請(qǐng)求服務(wù)器，請(qǐng)求成功，系統(tǒng)使用數(shù)據(jù)庫(kù)的state字段識(shí)別信息審核狀態(tài)，“0”代表未審核，“1”代表審核未通過(guò)，“2”代表審核通過(guò)。當(dāng)學(xué)生隨機(jī)提交一條成才記錄，數(shù)據(jù)庫(kù)中的state會(huì)自動(dòng)更新為“0”。當(dāng)導(dǎo)師執(zhí)行審核操作后，系統(tǒng)根據(jù)學(xué)生提交記錄信息的正確與否，state字段動(dòng)態(tài)更新為“1”或“2”。審核完成，動(dòng)態(tài)拼接“433”學(xué)生成才積分表，將添加的記錄存儲(chǔ)數(shù)據(jù)庫(kù)，并通過(guò)JSON格式傳送到學(xué)生端，根據(jù)數(shù)據(jù)狀態(tài)，動(dòng)態(tài)更新學(xué)生端顯示效果。下圖3為學(xué)生某一學(xué)期完成“433”的進(jìn)度狀態(tài)圖。

（三）教師端功能模塊的實(shí)現(xiàn)

1.教師端導(dǎo)航菜單的實(shí)現(xiàn)

教師按照教師工號(hào)、密碼成功登錄，進(jìn)入“433”學(xué)生成才系統(tǒng)教師端首頁(yè)面，系統(tǒng)為教師（以導(dǎo)師權(quán)限為例）提供的導(dǎo)航菜單包括工作臺(tái)、學(xué)生管理、成才信息、消息通知、個(gè)人中心和退出系統(tǒng)6個(gè)部分。

為教師用戶可以不受時(shí)間空間限制，為系統(tǒng)適配不同終端設(shè)備是本系統(tǒng)設(shè)計(jì)的重點(diǎn)。由于目前終端設(shè)備的屏幕分辨率不一致，系統(tǒng)采用Bootstrap開(kāi)發(fā)的響應(yīng)式布局調(diào)整內(nèi)容樣式大小達(dá)到預(yù)期效果。技術(shù)手段上與學(xué)生端首頁(yè)導(dǎo)航菜單實(shí)現(xiàn)方法類似，主要使用Bootstrap包中的.container類和.container-fluid類，結(jié)合<nav>、<ul>和<li>標(biāo)簽實(shí)現(xiàn)系統(tǒng)的響應(yīng)式界面布局方式以適配不同瀏覽器、不同分辨率終端設(shè)備的正常顯示。下圖4分別為系統(tǒng)在手機(jī)端和PC端的頁(yè)面展示效果圖。

2.成才信息的實(shí)現(xiàn)

“成才信息”模塊包括“433”成才典范和“433”成才信息管理兩個(gè)子模塊。其中，“433”成才典范模塊可以為教師群體查詢或者添加滿足成才典范條件的學(xué)生信息。技術(shù)實(shí)現(xiàn)上與學(xué)生信息的添加和查詢功能類似。

以查詢功能為例，通過(guò)查詢數(shù)據(jù)庫(kù)，將符合條件的數(shù)據(jù)信息以JSON數(shù)據(jù)格式返回，然后使用AJAX將讀取到的符合條件的數(shù)據(jù)信息展示到前端頁(yè)面。教師也可以根據(jù)所帶學(xué)生“433”完成進(jìn)度及質(zhì)量情況，將符合條件的學(xué)生信息添加到“433”成才典范庫(kù)。在“433”成才信息管理模塊，教師可以查詢所帶學(xué)生的成才進(jìn)度信息，也可以按照個(gè)人、年級(jí)或者專業(yè)分類匯總各項(xiàng)成才數(shù)據(jù)信息，以便給予精準(zhǔn)的指導(dǎo)與反饋。在功能實(shí)現(xiàn)上，除了直接將后端返回的數(shù)據(jù)展示到前端界面外，還使用了可視化的圖表展示，讓數(shù)據(jù)信息變得更加直觀。

開(kāi)發(fā)時(shí)使用了開(kāi)源免費(fèi)，功能豐富的Echarts數(shù)據(jù)可視化圖表組件，Echarts是一個(gè)純JavaScript開(kāi)源可視化庫(kù)，具有豐富的可視化類型，支持交互式數(shù)據(jù)、跨平臺(tái)應(yīng)用。系統(tǒng)使用加載異步數(shù)據(jù)的方式生成可視化圖表。

實(shí)現(xiàn)步驟具體如下：1、首先在系統(tǒng)中引入Echarts的JavaScript文件，<script src=”echarts.js”></script>;2、設(shè)置一個(gè)具有寬高的DOM容器，<div id=”box” style=”width：400px;height：300px”></div>用于放置圖表;3、基于準(zhǔn)備好的DOM容器（必須使用JavaScript代碼獲?。┏跏蓟疎charts對(duì)象;4、使用Echarts對(duì)象調(diào)用setOption（）方法設(shè)置圖標(biāo)的顯示標(biāo)題、圖例以及數(shù)據(jù)的坐標(biāo)軸相關(guān)參數(shù);5、加載異步數(shù)據(jù)，通過(guò)$.post（）方法將后端返回的JSON數(shù)據(jù)顯示到圖表中。下圖5分別使用柱狀圖和餅圖展示了2018級(jí)學(xué)生個(gè)人完成“433”工程任務(wù)的進(jìn)度和2018級(jí)學(xué)生積分得分總體分布情況。通過(guò)多層次、多維度獲得的匯總數(shù)據(jù)信息，可以幫助教師更加精準(zhǔn)、更加有效的為學(xué)生提供指導(dǎo)和幫助。

四、小結(jié)

本系統(tǒng)是在“互聯(lián)網(wǎng)+”智慧學(xué)工建設(shè)的背景下，根據(jù)我院“433”學(xué)生成才工程的實(shí)施需求而開(kāi)發(fā)。系統(tǒng)兼顧PC端和移動(dòng)終端，包括學(xué)生端和教師端。充分展現(xiàn)學(xué)院實(shí)施“433”學(xué)生成才工程的總體要求及目標(biāo)，具體任務(wù)，實(shí)施路徑，活動(dòng)與成果等;便于各職能部門、二級(jí)學(xué)院、各導(dǎo)師跟蹤、分析、監(jiān)控、指導(dǎo)每個(gè)學(xué)生的“433”實(shí)施情況;為學(xué)生提供便捷的“433”成才記錄途徑和自我分析數(shù)據(jù)。本系統(tǒng)是我院高效實(shí)施“433”學(xué)生成才工程的重要工具，也是我院學(xué)生全生命周期管理系統(tǒng)中的重要組成部分。

參考文獻(xiàn)：

[1]吳旻瑜，劉歡，任友群.“互聯(lián)網(wǎng)+”校園：高校智慧校園建設(shè)的新階段[J].遠(yuǎn)程教育雜志， 2015， 7（4）：8-15.

[2]NMC. The NMC horizon report： 2017 higher education edition[EB/OL]. 2017-03-10.

[3]李超，周涵.學(xué)習(xí)管理系統(tǒng)綜述和發(fā)展趨勢(shì)展望[J].現(xiàn)代教育技術(shù)， 2018.

[4]張偉遠(yuǎn)，段承貴，封晨.香港大學(xué)“互聯(lián)網(wǎng)+”繼續(xù)教育系統(tǒng)模式的實(shí)踐思考[J].現(xiàn)代遠(yuǎn)程教育研究， 2016（01）：11-18+26.

[5]蔣東興，付小龍，袁芳，蔣磊宏.高校智慧校園技術(shù)參考模型設(shè)計(jì)[J].中國(guó)電化教育，2016（09）：108-114.