實(shí)驗(yàn)選課web前端系統(tǒng)開(kāi)發(fā)

劉斌 張雄 廖伊豪

摘要：為了解決高校學(xué)生自主預(yù)約開(kāi)放實(shí)驗(yàn)室，實(shí)現(xiàn)院校實(shí)驗(yàn)室資源合理及其高效的利用。該文設(shè)計(jì)了實(shí)驗(yàn)選課web前端系統(tǒng)，系統(tǒng)采用前后端分離開(kāi)發(fā)方式，通過(guò)接口和Ajax、JSON技術(shù)與后端系統(tǒng)進(jìn)行信息交互。前端系統(tǒng)主要應(yīng)用AngularJS框架和MVC模式，采用HTML5、CSS3、JavaScript、JQuery和bootstrap等前端技術(shù)，編碼實(shí)現(xiàn)實(shí)驗(yàn)選課前端系統(tǒng)。實(shí)驗(yàn)選課系統(tǒng)經(jīng)測(cè)試后，該系統(tǒng)可正常提供服務(wù)。

關(guān)鍵詞：web前端系統(tǒng)；AnuglarJS HTML5 ；Ajax JSON

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）20-0069-03

1 引言

隨著科技的進(jìn)步，越來(lái)越多的軟件產(chǎn)品涌入人們的生活，給人們帶來(lái)很大的便利，對(duì)于身處校園的學(xué)生也一樣，為解決校園生活等問(wèn)題的App或者網(wǎng)站系統(tǒng)層出不窮。傳統(tǒng)院校實(shí)驗(yàn)課管理中，教師以學(xué)號(hào)分組，隨后對(duì)每組安排時(shí)間進(jìn)行實(shí)驗(yàn)課，當(dāng)學(xué)生課程時(shí)間沖突時(shí)，便給教學(xué)帶來(lái)不便；教師在實(shí)驗(yàn)考勤、成績(jī)記錄以及課程資源共享也存在不便；院校不是實(shí)時(shí)掌握實(shí)驗(yàn)室資源動(dòng)態(tài)，從而造成實(shí)驗(yàn)室資源的利用率低等問(wèn)題。為了解決以上問(wèn)題，應(yīng)用信息技術(shù)設(shè)計(jì)實(shí)驗(yàn)選課系統(tǒng)便成為當(dāng)務(wù)之急，本文主要完成實(shí)驗(yàn)選課web前端系統(tǒng)的開(kāi)發(fā)。

2 系統(tǒng)總體架構(gòu)

系統(tǒng)采用前后端分離模式進(jìn)行開(kāi)發(fā)，前端以HTML5[1]和AngularJS[2]為核心進(jìn)行開(kāi)發(fā)，后端則應(yīng)用Java與MySQL數(shù)據(jù)庫(kù)進(jìn)行開(kāi)發(fā)，前后端開(kāi)發(fā)人員只需協(xié)議規(guī)定交互數(shù)據(jù)字段通過(guò)Ajax和JSON便可實(shí)現(xiàn)交互。采用這樣的設(shè)計(jì)，可以使系統(tǒng)高內(nèi)聚低耦合，縮短開(kāi)發(fā)周期，提高系統(tǒng)的維護(hù)性、擴(kuò)展性。系統(tǒng)總體框架如圖1所示。

2.1系統(tǒng)前端架構(gòu)

系統(tǒng)前端架構(gòu)圖如圖2所示，前端系統(tǒng)設(shè)計(jì)以AngularJS框架為核心，采用MVC（Model-View-Controller）設(shè)計(jì)模式[3-4]，即數(shù)據(jù)模型層、視圖層和數(shù)據(jù)控制層，前后端通過(guò)Ajax技術(shù)進(jìn)行數(shù)據(jù)交互。設(shè)計(jì)思想采用模塊化，以功能劃分模塊，模塊由視圖和控制子模塊構(gòu)成，視圖間的切換、控制器與視圖之間的行為由AngularJS路由模塊完成。

2.2角色和權(quán)限設(shè)計(jì)

系統(tǒng)設(shè)計(jì)管理員、教師和學(xué)生三種權(quán)限。學(xué)生擁有訪問(wèn)首頁(yè)、開(kāi)始選課、

查看課表、成績(jī)、個(gè)人信息和修改密碼六大功能模塊。教師擁有首頁(yè)、課程管理、查看課表、成績(jī)、個(gè)人信息、隨堂打分、成績(jī)管理和修改密碼八個(gè)功能模塊。管理員擁有教師和學(xué)生所有功能模塊。

2.3頁(yè)面功能設(shè)計(jì)

系統(tǒng)功能模塊包括首頁(yè)、角色管理、課程管理、開(kāi)始選課等，具體如下：

1） 首頁(yè)：系統(tǒng)的封面頁(yè)面，完成消息的推送。管理員與教師擁有發(fā)布消息權(quán)限，學(xué)生只能查看、下載管理員與相關(guān)教師發(fā)布消息。

2） 角色管理：僅管理員具有權(quán)限。管理員可以完成單個(gè)或者批量角色的添加、角色的刪除或修改。

3） 課程管理：管理員和教師擁有權(quán)限。管理員查看所有教師開(kāi)設(shè)的課程及學(xué)生選課情況，對(duì)學(xué)生的信息具有刪除操作權(quán)限。教師具有查看、添加、刪除、修改課程的權(quán)限。

4） 開(kāi)始選課：學(xué)生擁有查看開(kāi)設(shè)課程和選修權(quán)限。管理員僅擁有查看權(quán)限。

5） 查看課表：系統(tǒng)所有角色都擁有該模塊使用權(quán)。

6） 隨堂打分：管理員僅擁有查看權(quán)限，教師具有打分權(quán)限。

7） 查看成績(jī)：管理員、教師和學(xué)生擁有查看權(quán)限。

8） 成績(jī)管理：教師擁有查看和修改權(quán)限，管理員僅有查看權(quán)限。

9） 個(gè)人信息：管理員、教師和學(xué)生具有查看和修改權(quán)限。

10） 修改密碼：管理員、教師和學(xué)生擁有查看修改自身信息權(quán)限。

2.4系統(tǒng)流程設(shè)計(jì)

系統(tǒng)為非自主注冊(cè)系統(tǒng)，實(shí)驗(yàn)管理系統(tǒng)工作流程如圖3所示，訪客首先由系統(tǒng)服務(wù)器地址進(jìn)入用戶登錄界面，訪客按照表單合法輸入相關(guān)信息登錄，點(diǎn)擊登錄向后端發(fā)送請(qǐng)求，進(jìn)行合法用戶身份驗(yàn)證，驗(yàn)證成功，訪客以管理員、教師或?qū)W生一種匹配角色登錄進(jìn)入系統(tǒng)主頁(yè)，訪客根據(jù)設(shè)置權(quán)限自由使用頁(yè)面顯示功能，如需退出，可以直接關(guān)閉瀏覽器或點(diǎn)擊登出按鈕。

3 系統(tǒng)實(shí)現(xiàn)

3.1系統(tǒng)前端程序加載

系統(tǒng)為響應(yīng)式單頁(yè)應(yīng)用[5]，對(duì)外為一整體，對(duì)內(nèi)是多獨(dú)立模塊。訪問(wèn)系統(tǒng)是，從唯一的入口文件進(jìn)入，首先，瀏覽器加載并解釋頁(yè)面的結(jié)構(gòu)層和表示層文件，將其渲染成靜態(tài)頁(yè)面，采用AngularJS懶加載技術(shù)減少加載時(shí)間；然后，瀏覽器JavaScript引擎執(zhí)行JS文件，創(chuàng)建AngularJS執(zhí)行上下文，完成AngularJS服務(wù)、配置程序初始化，隨后執(zhí)行主模塊文件app.js，依據(jù)路由導(dǎo)航按需執(zhí)行所需的功能模塊，加載當(dāng)前模塊的結(jié)構(gòu)層、表示層、行為層和懶加載依賴的資源文件，最后依賴注入模塊需要的服務(wù)量，在AngularJS觀察者作用下，進(jìn)行事件循環(huán)、異步請(qǐng)求等一系列的程序執(zhí)行。系統(tǒng)前端程序加載流程如圖4。

3.2 系統(tǒng)模塊結(jié)構(gòu)實(shí)現(xiàn)

可選系統(tǒng)前后端分離，前端系統(tǒng)單獨(dú)成為一個(gè)完整工程。前端系統(tǒng)以每個(gè)子功能為模塊，在結(jié)構(gòu)層、表示層和行為層即HTML、CSS和JavaScript上實(shí)現(xiàn)分離，每個(gè)功能模塊由三個(gè)文件模塊組成。

3.3 前端系統(tǒng)路由實(shí)現(xiàn)

系統(tǒng)是單頁(yè)應(yīng)用，頁(yè)面信息只在單個(gè)瀏覽器窗口里進(jìn)行展示，不同頁(yè)面模塊之間的切換由AngularJS路由導(dǎo)航完成。前端路由以URL的哈希值作為路由的入口，通過(guò)路由配置，將控制器、視圖和依賴模塊整合，輸送到路由出口進(jìn)行展示。系統(tǒng)默認(rèn)路由為登錄頁(yè)面，為了提高系統(tǒng)的首屏加載性能，應(yīng)用了懶加載模塊$ocLazyLoadProvider加載依賴資源。

3.4 靜態(tài)頁(yè)面實(shí)現(xiàn)

系統(tǒng)頁(yè)面的設(shè)計(jì)分為兩大模塊：登錄界面和主頁(yè)界面。登錄界面由HTML5畫(huà)布canvas進(jìn)行編寫(xiě)的粒子背景和登錄表單組成，表單通過(guò)由AngularJS正則和指令設(shè)計(jì)具有自動(dòng)檢測(cè)輸入信息語(yǔ)法規(guī)則的能力，當(dāng)輸入信息符合前端制定的規(guī)則，才會(huì)向服務(wù)端發(fā)起登錄請(qǐng)求并進(jìn)行合法用戶的驗(yàn)證。主頁(yè)界面，采用半包圍左右布局的方式。為了提升用戶體驗(yàn)效果，兼容多種瀏覽屏幕，頁(yè)面應(yīng)用CSS媒體查詢屬性和bootstrap UI框架的柵格布局進(jìn)行頁(yè)面響應(yīng)式設(shè)計(jì)，隨著頁(yè)面或者屏幕的大小改變分為768px、992px、1024px三個(gè)層次。

3.5 登錄訪問(wèn)實(shí)現(xiàn)

系統(tǒng)擁有三種角色：管理員、教師、學(xué)生，登錄模塊由登錄控制器和混合的TML+CSS視圖組成。由路由控制$urlRouterProvider.otherwise（/"login"），

使得用戶訪問(wèn)程序的時(shí)候首先進(jìn)入登錄界面進(jìn)行身份驗(yàn)證。為了減少http請(qǐng)求，優(yōu)化頁(yè)面性能，身份驗(yàn)證成功后，前端頁(yè)面會(huì)使用HTML5的網(wǎng)絡(luò)存儲(chǔ)接口localStorage對(duì)從后臺(tái)獲取的用戶信息進(jìn)行暫時(shí)存儲(chǔ)，以用于頁(yè)面其他功能的使用。

3.6 前后端交互實(shí)現(xiàn)

前端與后端系統(tǒng)之間僅通過(guò)規(guī)定接口進(jìn)行數(shù)據(jù)交互。前端頁(yè)面依靠http協(xié)議，使用Ajax技術(shù)向后端發(fā)送或獲取后端數(shù)據(jù)信息[6]。為了提高開(kāi)發(fā)效率、代碼復(fù)用性和語(yǔ)義化，，對(duì)$http服務(wù)的相關(guān)接口封裝成為AngularJS的服務(wù)，并通過(guò)依賴注入的方式注入所需模塊中。

在使用的過(guò)程中，獲取后端數(shù)據(jù)將使用get（）方法，修改或發(fā)送大量數(shù)據(jù)到后端則使用post（）方法，交互時(shí)，前后端一起進(jìn)行JSON[7]數(shù)據(jù)字段的制定，保證前后端的一致性。

3.7 cookie跨域的實(shí)現(xiàn)

用戶訪問(wèn)需建立在一個(gè)會(huì)話session中，其需要依靠cookie信息。但cookie的傳輸是具有同源性，不能進(jìn)行跨域傳輸。為了實(shí)現(xiàn)能在互聯(lián)網(wǎng)環(huán)境下的訪問(wèn)效果，必須要實(shí)現(xiàn)cookie的跨域傳輸。在啟動(dòng)應(yīng)用程序時(shí)設(shè)置$httpProvider.defaults.withCredentials = true，結(jié)合后端對(duì)http頭部字段的跨域允許的設(shè)置，從而實(shí)現(xiàn)cookie的跨域傳輸。

4 前端系統(tǒng)驗(yàn)證與測(cè)試

前端系統(tǒng)是以谷歌和火狐瀏覽器進(jìn)行開(kāi)發(fā)的，因此，為了避免不同瀏覽器之間的兼容性問(wèn)題，應(yīng)使用谷歌瀏覽器或火狐瀏覽器訪問(wèn)系統(tǒng)。前端系統(tǒng)登錄頁(yè)面、教師登錄界面如圖5、圖6所示。

5 總結(jié)

為提高院校實(shí)驗(yàn)課程管理及實(shí)驗(yàn)資源高效利用，本文首先設(shè)計(jì)實(shí)驗(yàn)課選系統(tǒng)框架，著重介紹前端系統(tǒng)設(shè)計(jì)框架、角色及功能設(shè)計(jì)，并詳述系統(tǒng)模塊實(shí)現(xiàn)，最后通過(guò)系統(tǒng)驗(yàn)證與測(cè)試，前端系統(tǒng)可以正常提供服務(wù)。

參考文獻(xiàn)：

[1] 連政.基于HTML5技術(shù)的移動(dòng)Web前端設(shè)計(jì)與開(kāi)發(fā)[D].杭州：浙江工業(yè)大學(xué)，2014.

[2] 董英茹.簡(jiǎn)談AngularJS在下一代Web開(kāi)發(fā)中的應(yīng)用[J].軟件工程師，2015，18（5）：30-31.

[3] 喬淑夷.基于MVC模式的Web前端框架關(guān)鍵技術(shù)研究與實(shí)現(xiàn)[D].青島：中國(guó)海洋大學(xué)，2014.

[4] Li Y， Cui D. Improvement and application of MVC design patterns[J].Computer Engineering，2005，31（9）：96-98.

[5] 葉遠(yuǎn)鋒. 單頁(yè)應(yīng)用技術(shù)在機(jī)頂盒播控系統(tǒng)中的應(yīng)用[D].北京：北京郵電大學(xué)，2017.

[6] 唐倩. Ajax技術(shù)在Web應(yīng)用框架中的研究及應(yīng)用[D].武漢： 湖北大學(xué)，2014.

[7] 邢四為. 基于JSON的信息交互系統(tǒng)的研究與實(shí)現(xiàn)[D].合肥：安徽大學(xué)，2013.