姜麗莉 孫自梅

摘? 要：為了保證C++程序設(shè)計(jì)課程的在線實(shí)驗(yàn)教學(xué)的質(zhì)量，文章設(shè)計(jì)并實(shí)現(xiàn)了一個C++在線實(shí)驗(yàn)平臺。平臺采用B/S架構(gòu)、SSM框架、Tomcat服務(wù)器、MySQL數(shù)據(jù)庫等開發(fā)工具與技術(shù)。系統(tǒng)分為教師端與學(xué)生端。教師可以發(fā)布實(shí)驗(yàn)任務(wù)與資源，并實(shí)時(shí)監(jiān)督學(xué)生的學(xué)習(xí)進(jìn)度。學(xué)生可以在線觀看視頻、編輯和編譯代碼、提交成果等。該系統(tǒng)可以為教師的實(shí)驗(yàn)課堂管理提供幫助，同時(shí)可以督促學(xué)生學(xué)習(xí)，也為學(xué)生實(shí)驗(yàn)提供資源和平臺。

關(guān)鍵詞：SSM;在線學(xué)習(xí)平臺;在線編譯

中圖分類號：TP311;G434 ? ? ? ?文獻(xiàn)標(biāo)識碼：A文章編號：2096-4706（2022）03-0036-03

Design and Implementation of “C++ Micro Classroom” Online Experimental Platform Based on SSM

JIANG Lili， SUN Zimei

（Nanjing Tech University Pujiang Institute， Nanjing? 211200， China）

Abstract： In order to ensure the quality of online experimental teaching of C++ programming design course， this paper designs and implements a C++ online experimental platform. The platform adopts B/S architecture， SSM framework， Tomcat server， MySQL database and other development tools and technologies. The system is divided into teacher client and student client. Teachers can release experimental tasks and resources， and monitor students learning progress in real time. Students can watch videos online， edit and compile code， submit results， etc. The system can provide help for teachers experimental classroom management， supervise students learning at the same time， and provide resources and platforms for students experiments.

Keywords： SSM; online learning platform; online compilation

0? 引? 言

在國內(nèi)高校，目前交互平臺主要用于遠(yuǎn)程教學(xué)，例如超星學(xué)習(xí)通、雨課堂、中國大學(xué)MOOC等平臺[1-3]。平臺的功能適合大部分傳統(tǒng)課程，但針對具有編程類的實(shí)驗(yàn)課程則并沒有提供足夠的支持。

實(shí)驗(yàn)教學(xué)對程序設(shè)計(jì)類課程的教學(xué)質(zhì)量具有至關(guān)重要的作用[4]，教學(xué)效果最終要體現(xiàn)在學(xué)生的編程能力上。對實(shí)驗(yàn)課程來說，單純的直播、錄播并不能滿足教師和學(xué)生的需求。教師端需要及時(shí)發(fā)布實(shí)驗(yàn)內(nèi)容，并能監(jiān)督學(xué)生實(shí)驗(yàn)，及時(shí)獲取學(xué)生的實(shí)驗(yàn)成果和進(jìn)度。學(xué)生端需要及時(shí)提交學(xué)習(xí)成果，并在實(shí)驗(yàn)過程中與教師進(jìn)行交互。

“C++面向?qū)ο蟪绦蛟O(shè)計(jì)”是計(jì)算機(jī)科學(xué)與技術(shù)相關(guān)專業(yè)一門重要的專業(yè)基礎(chǔ)課。為解決上述問題，結(jié)合C++語言的特性，本文設(shè)計(jì)并開發(fā)了C++線上實(shí)驗(yàn)平臺。

1? 系統(tǒng)分析與技術(shù)方案

1.1? 系統(tǒng)分析

系統(tǒng)分為教師端與學(xué)生端，不同使用者給予不同功能入口。教師端需要具有發(fā)布信息并對其進(jìn)行管理的功能，教師可以根據(jù)實(shí)際教學(xué)進(jìn)度，發(fā)布實(shí)驗(yàn)與作業(yè)，同時(shí)也可將課程資源進(jìn)行上傳以供學(xué)生下載。學(xué)生端可以通過網(wǎng)頁進(jìn)行對應(yīng)課程與實(shí)驗(yàn)視頻的觀看，也可在網(wǎng)頁中編寫代碼并進(jìn)行作業(yè)的提交，在網(wǎng)頁中實(shí)現(xiàn)C++代碼編譯、運(yùn)行并查看結(jié)果，對于簡單的課后作業(yè)不需要打開ide即可完成。

系統(tǒng)基于B/S架構(gòu)進(jìn)行開發(fā)，通過Maven進(jìn)行jar包版本管理，針對用戶的要求并不高，大多數(shù)Windows系統(tǒng)都可通過瀏覽器正常進(jìn)行訪問與使用。對Windows系統(tǒng)，服務(wù)器端要配置數(shù)據(jù)庫和C++編譯環(huán)境即可。若在Linux系統(tǒng)上運(yùn)行，則可使用Docker配置容器并拉取對應(yīng)環(huán)境，即可進(jìn)行項(xiàng)目部署。因此，在技術(shù)上系統(tǒng)開發(fā)是可行的。

1.2? 技術(shù)方案

1.2.1? 在線編譯功能

本系統(tǒng)的在線編譯功能擬采用GCC編譯器[5]實(shí)現(xiàn)。Linux系統(tǒng)下的GCC（GNU C Compiler）是GNU推出的功能強(qiáng)大、性能優(yōu)越的多平臺編譯器，是GNU的代表作品之一。GCC是可以在多種硬體平臺上編譯出可執(zhí)行程序的超級編譯器。

GCC提供了多條警告信息以及多個警告級別，方便用戶調(diào)試時(shí)查找原因，通過它們可以增強(qiáng)程序穩(wěn)定性和可移植性[6]。此外，GCC還對標(biāo)準(zhǔn)C/C++語言進(jìn)行擴(kuò)展，提高了程序的執(zhí)行效率，有助于編譯器進(jìn)行代碼優(yōu)化，可以減輕編程工作量。

1.2.2? 在線視頻學(xué)習(xí)功能

本系統(tǒng)的在線視頻播放功能擬采用開源的多媒體框架FFmpeg和網(wǎng)絡(luò)視頻播放器Chimee實(shí)現(xiàn)[7]。2BE22783-D69A-47F0-93D0-1EB02B3C6EA3

FFmpeg采用LGPL或GPL許可證?？捎糜趯γ襟w文件進(jìn)行記錄、轉(zhuǎn)換并將其轉(zhuǎn)化為流，按照用戶的功能需求進(jìn)行訂制。它可以在各種系統(tǒng)、構(gòu)建環(huán)境、機(jī)器架構(gòu)和配置下編譯運(yùn)行，對于視頻來說其自帶庫libavcodec提供了常見的視頻文件處理的完整方案，能滿足大多數(shù)處理需求。自帶的各種庫可以被應(yīng)用程序使用，也可依據(jù)其進(jìn)行二次開發(fā)擴(kuò)展功能，保證了編解碼質(zhì)量的同時(shí)還具有高可移植性。

Chimee是Qiwoo團(tuán)隊(duì)創(chuàng)建的網(wǎng)絡(luò)視頻播放器，是一套基于video視頻元素的組件框架，可直接用于H5頁面中，無須安裝，引入組件庫即可使用。大多數(shù)情況下，對于視頻的處理如果僅限于使用video元素編寫那不利于維護(hù)與擴(kuò)展。所以可以使用Chimee，它支持mp4、m3u8、flv等多種媒體流，因?yàn)楸举|(zhì)上還是video元素，所以并不會有太大的兼容性問題，同時(shí)也擴(kuò)展出各種插件可用于滿足大多數(shù)交互，如透明效果插件、穿透插件、內(nèi)外部插件等，這些插件可以直接使用在video元素上，除了解決常見的視頻需求以外，也可以將復(fù)雜功能拆分為多個插件，通過這種開發(fā)方法可以相對容易的實(shí)現(xiàn)其他功能。

2? 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

2.1? 架構(gòu)設(shè)計(jì)

系統(tǒng)基于SSM框架進(jìn)行開發(fā)，選擇B/S架構(gòu)，開發(fā)語言為JavaEE，數(shù)據(jù)庫使用MySQL。系統(tǒng)采用三層結(jié)構(gòu)，分別是表示層、Web應(yīng)用層和數(shù)據(jù)層。

2.2? 功能設(shè)計(jì)

根據(jù)需求分析，本系統(tǒng)分為教師端與學(xué)生端。教師端可分為學(xué)生管理模塊、微視頻管理模塊、實(shí)驗(yàn)管理模塊、作業(yè)管理模塊、課程資源管理模塊。學(xué)生端可分為個人信息模塊、在線學(xué)習(xí)模塊、實(shí)驗(yàn)?zāi)K、作業(yè)管理、課程資源下載模塊。系統(tǒng)功能模塊圖如圖1所示。

2.3? 關(guān)鍵功能實(shí)現(xiàn)

2.3.1? 微視頻管理

微視頻管理模塊可對視頻文件進(jìn)行管理，實(shí)現(xiàn)對視頻的上傳、信息編輯、刪除等功能。下面以視頻上傳為例，介紹系統(tǒng)的處理流程。

首先選擇所需上傳的一個或多個視頻文件，再對文件大小進(jìn)行判斷，若超出設(shè)定的上傳大小，則拋出異常并結(jié)束流程，若滿足大小則將其轉(zhuǎn)化為二進(jìn)制數(shù)據(jù)傳入。

接著，對文件存放目錄進(jìn)行檢測，若不存在則創(chuàng)建文件存放目錄，并配置對應(yīng)的虛擬目錄，可用于訪問服務(wù)器上的視頻文件。在目錄中創(chuàng)建File，將二進(jìn)制數(shù)據(jù)寫入標(biāo)準(zhǔn)File類中，然后對其進(jìn)行視頻編碼格式的判斷，若不符合要求則先對其進(jìn)行編碼格式的轉(zhuǎn)換，再判斷編碼格式是否可被轉(zhuǎn)換，對于可直接轉(zhuǎn)換的編碼格式直接將其轉(zhuǎn)換為符合要求的格式，對于不可直接轉(zhuǎn)換的編碼格式（wmv9，rm，rmvb等）可通過其他工具（mencoder）先將其轉(zhuǎn)換為可直接轉(zhuǎn)換的格式（如avi），之后再進(jìn)行二次轉(zhuǎn)換，然后再進(jìn)行下一步，若是mp4、flv等符合要求的視頻編碼格式便可通過FFmpeg截取視頻封面，使用抓取器FFmpegFrameGrabber抓取視頻特定幀生成圖片作為視頻封面。

最后再將對應(yīng)屬性存入數(shù)據(jù)庫，即可實(shí)現(xiàn)視頻上傳功能。

視頻管理界面如圖2所示，預(yù)覽視頻信息如圖3所示，可以查看視頻的標(biāo)題、簡介、封面等信息。

2.3.2? 在線實(shí)驗(yàn)功能

學(xué)生在使用作業(yè)模塊或?qū)嶒?yàn)?zāi)K時(shí)可在網(wǎng)頁中進(jìn)行代碼的編寫，并實(shí)現(xiàn)在線編譯、運(yùn)行并查看結(jié)果。

代碼編寫完畢后點(diǎn)擊編譯按鈕，發(fā)送編譯請求，檢測目錄是否存在，若不存在則創(chuàng)建臨時(shí)文件目錄，用以存放對應(yīng)生成的文件，如源文件以及可執(zhí)行程序等。

將代碼內(nèi)容寫入文件作為源文件，通過字符串拼接將編譯命令構(gòu)造出來，通過JAVAAPI創(chuàng)建進(jìn)程，調(diào)用CMD，將構(gòu)建好的編譯命令傳入并執(zhí)行，通過抓取異常判斷是否出現(xiàn)錯誤，如程序中斷、超時(shí)、執(zhí)行錯誤等，若出錯則返回錯誤碼以及對應(yīng)的錯誤原因，結(jié)束流程。

若編譯成功即運(yùn)行生成的可執(zhí)行文件，同樣的通過抓取異常判斷是否出現(xiàn)錯誤，如gcc調(diào)用出錯以及C程序運(yùn)行出錯等，若出錯則返回錯誤碼及對應(yīng)的錯誤原因，結(jié)束流程。

運(yùn)行成功時(shí)返回標(biāo)準(zhǔn)輸出，并且繼續(xù)調(diào)用CMD將對應(yīng)exe的進(jìn)程殺掉，如果不對其進(jìn)行處理再次發(fā)送請求則會提示權(quán)限問題，因?yàn)橹斑\(yùn)行的exe程序并未停止。即每次提交編譯請求便創(chuàng)建進(jìn)程調(diào)用CMD，直到流程結(jié)束時(shí)再將對應(yīng)進(jìn)程殺死，只保留輸出結(jié)果。

學(xué)生在線實(shí)驗(yàn)的界面如圖4所示。

2.3.3? 課程資源下載

課程資源下載模塊主要實(shí)現(xiàn)資源下載功能。學(xué)生選擇所需下載的文件，點(diǎn)擊按鈕后將文件名與url等信息傳入后臺，之后通過File類獲取到存放目錄中的對應(yīng)文件，而后通過springmvc實(shí)現(xiàn)文件下載，設(shè)置好對應(yīng)屬性后將其封裝入ResponseEntity返回瀏覽器，瀏覽器將收到的請求解析處理以實(shí)現(xiàn)瀏覽器的文件下載。

文件加載到內(nèi)存中，轉(zhuǎn)換為字節(jié)數(shù)組作為響應(yīng)體，設(shè)置響應(yīng)頭，其中包含MIME協(xié)議擴(kuò)展出的Content-disposition以及Contetnt-Type，設(shè)置對應(yīng)的編碼、文件名、擴(kuò)展名等信息，再加上響應(yīng)狀態(tài)，封裝為ResponseEntity返回即可在瀏覽器中獲取到文件下載請求，在瀏覽器中使用mime類型application/octet-stream進(jìn)行傳輸。

對于學(xué)生來說可下載教師發(fā)布的各種資源，點(diǎn)擊對應(yīng)資源可進(jìn)行下載，瀏覽器通過解析返回的http請求將返回的響應(yīng)體轉(zhuǎn)化為對應(yīng)文件，進(jìn)行下載。

課程資源下載界面如圖5所示。

3? 結(jié)? 論

“C++微課堂”在線實(shí)驗(yàn)平臺可以對學(xué)生的任務(wù)完成情況進(jìn)行實(shí)時(shí)查詢和統(tǒng)計(jì)。教師可在課后根據(jù)統(tǒng)計(jì)數(shù)據(jù)，了解學(xué)生的學(xué)習(xí)狀態(tài)和掌握情況，得到及時(shí)的反饋信息。根據(jù)反饋信息，教師調(diào)整教學(xué)方法和教學(xué)內(nèi)容，對進(jìn)度落后的學(xué)生，也可以進(jìn)行督促。

通過該系統(tǒng)，可以實(shí)現(xiàn)C++實(shí)驗(yàn)課的線上教學(xué)。在線下教學(xué)時(shí)，也可以使用該系統(tǒng)進(jìn)行線上線下的混合式教學(xué)，教學(xué)方式靈活，保證教學(xué)效果。

參考文獻(xiàn)：

[1] 閆劍鋒.新形勢下高校在線教育模式探索與實(shí)踐 [J].教育信息化論壇，2022（1）：3-5.

[2] 程蹊，任詩航，馬梅.基于SPOC/MOOC“在線教學(xué)工具+會議系統(tǒng)”的混合教學(xué)創(chuàng)新——以“超星直播+騰訊會議”混合教學(xué)為例 [J].大學(xué)教育，2022（1）：155-157.

[3] 劉海濤，張春妹.全視角學(xué)習(xí)理論下高校在線教學(xué)質(zhì)量保障研究 [J].教育評論，2021（12）：26-32.

[4] 張千友，劉梅竹，沈力，等.后疫情時(shí)代高校教學(xué)模式改革研究 [J].西昌學(xué)院學(xué)報(bào)（社會科學(xué)版），2021，33（4）：124-128.

[5] 張開活.基于Web的C語言交互式可視化教學(xué)平臺的設(shè)計(jì)與實(shí)現(xiàn) [D].西安：西安電子科技大學(xué)，2017.

[6] 梅剛，林齡，潘峰.基于Web的在線編譯環(huán)境設(shè)計(jì) [J].計(jì)算機(jī)時(shí)代，2015（5）：29-31.

[7] 王超，李晶晶，朱晶晶.基于SpringCloud的在線視頻教育系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].數(shù)字技術(shù)與應(yīng)用，2021，39（12）：198-200.

作者簡介：姜麗莉（1985—），女，漢族，江蘇徐州人，講師，碩士，研究方向：深度學(xué)習(xí)、數(shù)據(jù)挖掘、軟件工程;孫自梅（1986—），女，漢族，河南商丘人，講師，碩士，研究方向：云計(jì)算、軟件工程。2BE22783-D69A-47F0-93D0-1EB02B3C6EA3