基于React框架的智慧校園的前端開發(fā)設(shè)計

史志騰 楊保華

摘要：該文為常州機電職業(yè)技術(shù)學(xué)院教學(xué)事務(wù)管理設(shè)計了智慧課堂系統(tǒng)，功能包括老師課程的安排，授課教師的安排，教課地點的安排，學(xué)生的請假，活動使用教室的安排等等。該系統(tǒng)有利于后期信息的查詢，更新，維護，保存等，避免了人工操作對于數(shù)據(jù)準確性造成的偏差。在智慧課堂的設(shè)計中，運用了React，Spring，B/S結(jié)構(gòu)，數(shù)據(jù)庫MYSQL與TOMCAT服務(wù)等技術(shù)。智慧課堂提高了管理學(xué)校事務(wù)的效率，使學(xué)校的管理更加簡單，方便，準確。

關(guān)鍵詞：智慧課堂 前端React-rative MYSQL15.0

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2018）22-0208-02

1 緒論

隨著互聯(lián)網(wǎng)的日益發(fā)展，越來越多的事件處理變得更加簡潔和方便。當(dāng)前高校中越來越多的學(xué)生，對于學(xué)校管理的壓力日益增加，普通的人工管理已經(jīng)不能滿足現(xiàn)狀。在這種情況下智慧校園就凸顯出他的重要性和必要性。針對本學(xué)校事務(wù)管理工作的實際情況，利用現(xiàn)在網(wǎng)絡(luò)的便捷性，實現(xiàn)基于工作流程的智慧課堂管理系統(tǒng)，實現(xiàn)辦公自動化，大大提高了工作效率。

本文以常州機電職業(yè)技術(shù)學(xué)院實際情況的智慧課堂管理系統(tǒng)，使得教學(xué)管理更加簡潔，易操作，使得信息的查詢更加的靈活，方便，快捷，準確，讓信息的存儲更加的安全。

2技術(shù)概括

本次開發(fā)課題我們對于整個項目使用了B/S三層架構(gòu)表現(xiàn)層（UI）、業(yè)務(wù)邏輯層（BLL）、數(shù)據(jù)訪問層（DAL），在表現(xiàn)層（界面層）采用React-Native技術(shù)來實現(xiàn)頁面與業(yè)務(wù)邏輯層的交互，在數(shù)據(jù)訪問層采用SpringJPA技術(shù)與MySQL數(shù)據(jù)庫進行連接，使用SQL語句對MySQL數(shù)據(jù)庫進行查詢，增加，刪除，更改等操作。整個項目使用到了JSP，React-Rative，SpringJPA，Tomcat服務(wù)器，MySQL15.0等。

3 智慧課堂系統(tǒng)設(shè)計

3.1功能設(shè)計

3.2主體數(shù)據(jù)模塊設(shè)計

主體數(shù)據(jù)模塊的功能是：教工數(shù)據(jù)修改與查詢，學(xué)生數(shù)據(jù)的修改與查詢，課程的性質(zhì)的定義，上課課程的排版，校園時間的管理和上課教室的安排。

（1） 教工數(shù)據(jù)

在教工模塊中，我們根據(jù)機電學(xué)院的原本數(shù)據(jù)庫和官網(wǎng)的CRP數(shù)據(jù)，我們按照原本的數(shù)據(jù)建造了與之前數(shù)據(jù)相同的數(shù)據(jù)庫，教工中我們從數(shù)據(jù)庫提取了教職工的姓名，自己的工號，自己所在的二級學(xué)院或者是自己所在工作部門，聯(lián)系方式移動電話號碼短號和長號，家庭住址（現(xiàn)居地與自己戶籍所在地）等簡略信息。在每一條數(shù)據(jù)前有個小小的標志，點擊后會獲取自己想要知道老師的具體數(shù)據(jù)。

在此模塊中我們搜集了全校教職工的信息，設(shè)置了查找功能，根據(jù)自己所要查找的姓名，工號就可以找到。

在查找中我們不僅僅設(shè)置了根據(jù)姓名查找也設(shè)置了批量查詢可以直接搜索部門或者團隊等，查詢整個部門和團隊的人員。

（2） 班級數(shù)據(jù)

利用SpringJPA讀取數(shù)據(jù)庫，列舉出班級代碼，班級所在的系部，同時班級的輔導(dǎo)員，自己所學(xué)專業(yè)，班級名稱和屆數(shù)。

同時與教工數(shù)據(jù)也可根據(jù)一些來查找班級的信息，如可以根據(jù)自己的班主任的名字來搜索她所管理的班級，也可以根據(jù)自己的班級名稱來查找自己的班級信息。根據(jù)權(quán)限大于第五等級的權(quán)限才可以查詢有關(guān)學(xué)生數(shù)據(jù)的信息，第五級權(quán)限只能查看自己的信息和數(shù)據(jù)。老師或者書記及院長可以根據(jù)學(xué)生所在的系部，班級，姓名和學(xué)號來查找自己想要了解的學(xué)生。學(xué)生信息里面包括自己的姓名，學(xué)號，聯(lián)系方式，入學(xué)時間，家庭住址，自己所在系部，身份證號等。

（3） 教室管理

教室管理是屬于教務(wù)管理人員的安排，教務(wù)管理人員根據(jù)本周上課安排是否使用機房，階梯教室，班級人數(shù)，上課需要用到哪些設(shè)備，教學(xué)區(qū)等一系列的要求幫老師安排上課的教室。

學(xué)生亦可以根據(jù)自己上課的區(qū)域，教室名稱，教室編號等信息來查找自己的課程是在哪里進行上課。

主體數(shù)據(jù)模塊的功能是：教工數(shù)據(jù)修改與查詢，學(xué)生數(shù)據(jù)的修改與查詢，課程的性質(zhì)的定義，上課課程的排版，校園時間的管理和上課教室的安排。

直接利用SpringJPA讀取數(shù)據(jù)庫，列舉出教師信息和學(xué)生信息，例如教師工號、院系單位；學(xué)生信息里面包括自己的姓名，學(xué)號，聯(lián)系方式，入學(xué)時間，家庭住址，自己所在系部，身份證號，學(xué)生的班級代碼，班級所在的系部，同時班級的輔導(dǎo)員，自己所學(xué)專業(yè)，班級名稱和屆數(shù)。

校歷管理安排整個學(xué)院的各個班級的課表，課時，上課老師，上課地方，上課時間等。

4功能模塊設(shè)計

通過前期對學(xué)校事務(wù)管理的了解，系統(tǒng)有以下要求：

（1） 每個系統(tǒng)必有的賬號登錄功能：

由于此課題不僅對于老師，院長等領(lǐng)導(dǎo)登錄，還有教務(wù)查詢，學(xué)生等，最后還有一個管理員管理等。因此對于此系統(tǒng)登錄我們設(shè)置4個等級權(quán)限。

（2） 較為友好的登錄界面：

此系統(tǒng)供學(xué)生及老師等使用，人數(shù)較為多，因此需要有較為有好，且簡潔易懂，容易操作的界面。

（3） 系統(tǒng)內(nèi)部須有的功能：

（a）對于登錄用戶信息的修改；（b）老師與老師之間聯(lián)系；（c）對于自己班級人員，課程，上課安排的管理；（d）對課程安排進行管理；（e）對請假事務(wù)的進行安排；（f）對授課計劃進行安排；（g）系統(tǒng)退出功能。

因此，系統(tǒng)中主要包括以下功能模塊：系統(tǒng)登錄模塊，主體數(shù)據(jù)模塊，事務(wù)管理模塊，授課安排模塊，個人信息模塊，系統(tǒng)退出模塊……

基于流程的事務(wù)管理模塊：事務(wù)管理中分為多個功能，學(xué)生請假，老師調(diào)課安排，機房的申請使用，考試地點的安排，學(xué)生.教職工的考情審核等等。以學(xué)生請假請假為例，其流程是：一至兩天的請假，系統(tǒng)將通過郵箱給班主任發(fā)送提醒，來處理學(xué)生請假問題；三天至一周請假需先交由班主任審批， 繞后由二級學(xué)院的教務(wù)管理人員審批，請假成功后通知學(xué)生。其流程圖如圖2所示，操作界面如圖3所示。

5 結(jié)論

本文設(shè)計的智慧課堂系統(tǒng)，功能包括日常教務(wù)管理任務(wù)，使得后期信息的查詢，更新，維護，保存等變得簡潔和高效。在智慧課堂的設(shè)計中，運用了React，Spring，B/S結(jié)構(gòu)，數(shù)據(jù)庫MYSQL與TOMCAT服務(wù)等技術(shù)，智慧課堂系統(tǒng)使學(xué)校的管理更加簡單，方便，準確。

參考文獻：

[1] 祁暉，底曉強，畢琳，等. 基于React的MOOC移動學(xué)習(xí)平臺建設(shè)研究[J]. 教育現(xiàn)代化， 2016（38）.

[2] 趙培. 基于B/S結(jié)構(gòu)的圖書館管理系統(tǒng)的設(shè)計與實現(xiàn)[J]. 中小企業(yè)管理與科技旬刊， 2018（1）.

[3] 張來卿，徐震宇，季統(tǒng)凱. Mobile side data upload rapid realization method based on react-native：， CN 105635265 A[P]. 2016.

【通聯(lián)編輯：王力】