非計算機專業教師線上課程云平臺架構探索

張吉，李曉潔，周誼霞，馬俊，楊想紅，劉金芳

（1.貴州民族大學，貴州 貴陽；2.貴州中醫藥大學，貴州 貴陽；3.貴州財經大學，貴州 貴陽；4.泰州職業技術學院，江蘇 泰州）

新冠疫情造成學生不能返校需要居家學習給線上學習帶來了井噴式需求，同時線上教學也接受空前的實戰檢驗。為響應中央與教育部的停課不停學的號召，各類院校基本上都采用過線上教學模式。評價線上、線下教學的好壞，最重要的指標是師生的反映。鄔大光、李文等對全國334所高校、13997名教師、256504名學生進行了調研發現：教學平臺功能不完善是當前最為緊迫的問題[1]。課程平臺功能不完善體現在多個方面。首先體現在對基礎的PPT、PDF、MP3/MP4格式的數字、影像等資源中的部分功能支持不完善。例如：動畫是教學課件中的常規內容，也是教師為了講述重點、難點知識采用的方法之一，目前學習通等平臺的現有功能并不能支持PPT課件中的動畫播放，在線下教學過程中，教師可采用動畫形式進行教學，但將課件傳至平臺，有動畫的頁面很多信息被覆蓋，只呈現一個圖層，無法實現教學目標。其次體現在訓練模塊。例如：作業、考試等模塊中，醫學類護士資格證考試中固定題型——公用題干的選擇題學習通目前也不支持，因此無法在平臺上設置此類選擇題，與職業資格證書考試形式無法匹配。最后，在建筑工程、醫學、體育等領域，對新興的教學手段和方法支持力度還不夠。

教師根據學科特點構建符合課程特色的平臺可提升教學效果。在Forge、BIMFace等三維Web端渲染引擎基礎上進行二次開發，在3dMax、Revit、Lumion軟件中完成建模后將模型轉換成三維渲染引擎所接受的格式，可以爆炸圖方式對教學模型進行分解展示。采用智能手機對教學模型進行拍照，結合Three.js將360度/720度全景技術引入到課教學當中，可對復雜建筑節點、構件內部的鋼筋構造進行交互式查看，對人體解剖學中的器官構造、體操/武術動作做全方位展示。

教材+二維碼的線下與線上結合目前是主流，根據多門課程的關聯性建立完善的知識圖譜是大勢所趨，而現有線上教育平臺資源如大學慕課是不能完全支持上述教學手法，須依托于教師自主開發符合自身特色的線上平臺。

此外，大數據時代應充分利用數據分析提高教學效率。建設基于Web技術的線上平臺，通過匿名發言打通學生和老師之間的“通訊障礙”。學生在線上平臺發起提問后，平臺自動將問題收集成庫，并對問題庫進行數據分析與挖掘，基于Python的jieba庫進行分詞統計，得出學生的高頻問題。按搜索頻次由高到低對問題進行排序，教研組首先針對高頻問題做出回答，從而做到有的放矢，提高教學效率。學生再作出評價或追問，直至弄清楚全部概念及原理、深層次的知識間內在聯系。疫情就全世界范圍而言，仍處在一個不穩定期，新冠肺炎也被醫學專家評價為“一個被嚴重低估的病毒”。因此，在后疫情時代，無論從疫情的不穩定狀態需要為教學做好充足準備而言，還是從線上教學改革而言，搭建符合課程特色的平臺都是非常重要的事情。

開發一套線上課程教學平臺，涉及一系列關鍵技術，包含系統架構、開發環境搭建、前端頁面、后端頁面與服務器、數據庫、域名、公網IP及內網穿透等，具體涉及內容如下。

一 系統架構

系統架構統籌平臺的各個環節以及環節之間的通訊機制。在全球Python語言盛行的形式下[2]，對于非計算機專業的教師而言，采用基于Django[3]或Flask[4]平臺框架部署平臺架構，具備可行性。相比Django，Flask屬于輕量級的開發框架，許多應用在需要在開發過程中進行擴展。而Django屬于重量級的框架，原生功能比較齊全，易于開發出全面、穩定的企業級的網站。目前采用Django更適合開發一成套完整的教學平臺。

（1）Django具有開源、免費、易用的特點。Django是一個開源框架，基于目前最為流行的計算機編程語言Python研發而成。該平臺框架具有編程環境易于搭建、代碼量少、開發效率高的特點。例如調試工具不同于傳統C/C++語言采用的visual studio，Java采用的Eclipse等，Python的IDLE下載及安裝配置過程相當簡單，安裝包也屬于輕量級。若需第三方庫時，在網絡暢通的情況下，可通過pip等命令實時安裝加載即可（開源免費編輯器VScode，Jupyter Notebook，及商用pycharm均可作為調試工具）。入門門檻低且容易掌握，不至于出現非計算機專業人士做線上課程過程中，止步于開發環境的搭建階段。

（2）Django的編程理念先進。采用當今較流行的網絡平臺架構模型MVC，M代表Model，V代表View，C代表Control，主張將前后端進行分離解耦。此外，因其對基礎網頁編程功能函數做了大量的二次封裝，面向對象編程手法如封裝、繼承、多態實現起來相對比較容易，采用{% extends xxx %}、{% block xxx %}與{% endblock xxx%}組合即可實現網頁之間的繼承，頁面頭部、左側樹形菜單、底部等區域不需要重復編寫。

（3）Django的工作流程清晰。從瀏覽器輸入網絡課程的網址發送網頁請求request之后，根據協議類型（目前主要用http，加密要求高的采用https），選用DNS域名解析，將域名轉換成IP地址，然后經過網絡連接訪問對應的Web服務器[5]。通過路由文件urls.py決定由哪個視圖函數接收瀏覽器的請求，在views.py中采用Python語言編寫視圖類，通過關鍵字import導入模型文件models.py中的數據類后，在視圖類函數可實現從數據庫中獲取數據，作為render函數的參數傳遞給模板文件（html文件），再通過render或httpResponse函數，將渲染完成的html模板回送到瀏覽器。以上過程采用基于Django的網絡框架，通過幾個簡單命令即可布置成功，其工作流程框圖如下圖1所示。

圖1 Django框架的工作流程流程圖

二 開發環境搭建

采用Django網絡框架，需先安裝Python與Django兩個軟件。關于Python的安裝說明文檔非常豐富全面，在其主頁上https://www.python.org找到Downloads菜單，選擇與電腦操作系統匹配的安裝程序包進行下載安裝（非開源程序壓縮包），除蘋果品牌的電腦，可能會默認安裝macOS系統，或者是出于獨特的需求安裝其它的系統，如Linux系統，目前絕大部分用戶使用的電腦操作系統為Windows 64-bit。適用于Windows系統的Python安裝包大小僅為幾十兆。在Python安裝完成之后，從系統cmd命令窗口采用pip命令安裝Django，完整的pip安裝命令為pip install Django==3.2.8。上述命令中，雙等于號右側的3.2.8表示需要安裝到本機的Django版本號，選擇版本號時需注意與Python版本號適配，不同版本的Python所能支持的Django版本號在Django主頁的文檔說明中均已列出，目前主流版本的對應關系如表1所示。

表1 Django與Python相匹配各版本的對應關系

為了避免版本沖突，或者由于反復安裝、卸載操作導致的軟件不能正常啟動，上述兩個軟件的安裝過程，可在開源集成平臺Anaconda中完成。在Anaconda的官方網站或國內鏡像中選擇Anconda安裝包進行下載安裝（如圖2所示）。Anaconda安裝包內置了Python安裝程序，安裝Anaconda并建立環境（environment），默認會生成一個base環境，然后采用conda install Django命令安裝Django，Anaconda可在網絡上自動搜尋與Python匹配的版本進行安裝。按上述方法安裝一般可避免版本沖突、反復安裝導致注冊表等信息雜亂的問題。

圖2 Anaconda下載頁面局部

安裝完成Django之后，在cmd中通過cd命令切換至將放置網站開發文件夾的目錄，使用django-admin startproject xxx命令創建名為xxx的項目，該命令會自動生成名稱為xxx的文件夾，xxx文件夾中包含MVC模式Django網站框架所需Python文件，如圖3所示。包含總控、配置、路由等py腳本文件。例如，在settings.py文件中已完成數據庫、應用管理、模板路徑、時區、界面采用語言種類等宏觀配置內容。

圖3 Django網站框架所含Python文件

在項目manage.py文件所在目錄下執行cmd命令python manage.py runserver啟動Django服務器。在瀏覽器地址欄中輸入http://127.0.0.1:8000/，若彈出如圖4所示頁面，說明Django開發環境已經配置成功。

圖4 Django服務器啟動成功頁面

三 前端頁面

前端頁面即通過瀏覽器查看到的網頁內容——標題、段落文字、輪播圖片、音視頻、電子書等。每一個網頁對應著一個以html為后綴名的文件，大多數的網站首頁以index.html命名。點擊網頁上的一個超鏈接或按鈕，將通過href或onclick響應事件跳轉至另一個html頁面。前端網頁開發通常涉及html，css，JavaScript三個方面的技術。

Html

主要負責網頁內容的安排和整體布局，比如網頁的頭部寫課程名稱，中部區域放置電子教學資源，底部布置版權信息、聯系地址等，網頁中是否采用樹形菜單，以及超鏈接設置、表單布置均在html文件中進行編寫。

CSS

主要負責網頁內容的具體排版與美化，如字體的大小，圖片框的大小、圖片排列與邊距及顏色調配等問題，簡而言之，起調控網頁美觀的作用。

可采用現有開源樣式控制框架Bootstrap等進行樣式設置，該框架支持的瀏覽器比較全，且不易出現網頁縮放時頁面溢出等異常現象。

JavaScript

主要負責對響應事件進行處理，實時監聽網頁上的用戶事件，比如用戶鼠標單擊、滾動縮放事件。一般采用JavaScript編程語言，對頁面上的表單數據（輸入框輸入內容，復選框的選擇狀態）進行提取，或直接從數據庫中讀取數據，完成必要的運算后，將結果返回并重新渲染模板html頁面。

以上三部分內容可全部寫在一個html中，但容易導致html文件過長，不利于查閱及維護代碼，宜分別放置在三個文件夾中進行分類管理。國內外開源代碼托管與協作平臺Github、Gitee等上面星標多的代碼，絕大部分采用分類管理模式。

前端網頁布局及樣式調控工作比較繁瑣，在掌握其基本工作原理的前提下，盡量采用低代碼開發工具，通過可視化拖拽方式完成網頁設計，大大提高開發效率，可同時兼顧平臺開發質量與速度。

四 后端

后端一般是指網絡課程的服務器端，其主要使用對象是管理員，主要有兩個方面的應用場景。其一，用戶如學生從前端網頁發起提問或上傳了作業文件，不能一直緩存，須編將其傳入后端并存儲到服務器的硬盤中。其二，教師在服務器端可打開管理員（Admin）界面，完成數據分析和管控、添加與編輯信息工作。如將教學PPT、教材PDF、教學動畫/錄像、全景、2D圖紙、3D模型、X線影像、比賽鏡頭回放等教學資源存入服務器，供視圖層讀取此類數據后對前端網頁進行渲染和更新。

可采用傳統的PHP作為后臺操作頁面編寫語言[5]。但采用Django網絡應用框架更符合時代潮流，其后臺維護界面的開發過程十分簡便，Django封裝了全面的后臺界面開發函數，只需Python編程基礎即可開發，適合非計算機專業人士使用[6]。

（1）數據庫。將數據比如學生信息，常見問題及答案等存于數據庫中，數據格式更加規范，用戶搜索數據時的效率會更高[7]。目前流行的數據庫有Oracle、MySQL、PostgreSQL、MongoDB、Redis、SQLite、NoSQL等，按其特點分為關系型數據庫（Relation）、鍵-值型數據庫（Key-Value）、文檔數據庫（document）、時序數據庫（Time series）、圖數據庫（Graphic）。

Django網絡框架中默認配置的數據庫類型為sqlite3，在setting.py中已自動完成配置，如下圖5所示。

圖5 Django網絡框架settings.py文件中自動配置數據庫腳本

采用sqlite3作為網絡課程數據庫時，具有不需額外再執行啟動數據庫服務器、配置成本低等優點。但在數據量大的情況下，存在寫入速度慢的缺點，此時可選用關系型開源數據庫MySQL[8]，Django也能友好的支持MySQL。Django提供一系列對數據庫內容進行增、刪、查、改函數。完成數據庫配置后，在項目manage.py文件所在目錄下，連續執行python manage.py makemigrations和Python manage.py migrate命令完成數據庫的遷移。

（2）站點管理員頁面。配置完數據庫后，輸入python manage.py createsuperuser命令創建站點管理員賬號，創建過程需輸入登陸后端所需用戶名、郵箱、密碼信息。在瀏覽器地址欄中輸入http://127.0.0.1:8000/admin/，鍵入用戶名與密碼后登錄后端管理頁面（如圖6所示，在settings.py文件中修改LANGUAGE_CODE=‘enus’為LANGUAGE_CODE=‘zh-Hans’可對界面進行漢化），通過可視化UI界面操作如點擊添加按鈕可直觀增加學生信息數據，并存入數據庫。在admin.py中根據課程特色編寫代碼對后端頁面進行擴充，還可在models.py中編寫代碼實現批量導入Excel或word中的內容到數據庫。就后端操控頁面開發簡潔程度來說，Django是最為方便的網絡框架之一。

圖6 Django后臺管理界面

（3）服務器或虛擬主機。服務器根據用途可分為運算型與數據型兩大類。運算型服務器，又可稱之為工作站，主要用于高性能的科學計算如大型的線性方程組求解，以及基于GPU的機器學習訓練等對數據處理速度要求高的場景，對CPU與顯卡配置參數要求高。

數據型服務器主要用途是存儲數據，特點是硬盤空間大，網絡通道多，且能快速通過互聯網訪問。

網絡課程建設需存儲大量網絡課程所需展示的資源，如PPT，視頻/動畫/錄像，word文檔等，通常具有存儲數據量大，訪問數多的特點，宜選擇數據型服務器。服務器即可通過租用方式獲取，如租用阿里云、騰訊云、百度云、華為服務器等。租用的服務器通過“遠程桌面”的方式訪問，可形象的稱之為虛擬主機。也可采用教師所在單位的個人臺式電腦或筆記本電腦作為服務器，此時服務器在本地。云服務器與本地服務器的優缺點分析如表2所列。

表2 云服務器與本地服務器優劣對比

若選擇租用云服務器方式，一般由運營商一并提供公網IP和域名；租用云服務器時，費用與所需硬盤容量的相關，故選用服務器時應先預估分析網絡課程所用數據資源的大小，即硬盤空間。尚需綜合考慮流量與網速因素，如帶寬等影響網頁響應速度的參數。此外，對于保密性要求較高的數據，尚需明確云服務器是在國內還是國外。

在網絡課程建設初期，用于調研用途或項目啟動經費有限時，可采用本地電腦自行搭建服務器。若采用自己電腦作為服務器，可采用Nginx等工具完成服務器部署。

將編寫完成的網站代碼發布到外網，在具備域名的前提下，仍需將域名與本地服務器上網站代碼建立對應關系。采用云服務器商提供域名與服務器，可在供應商的指導下完成。而對本地服務器的情況，win7以上系統可通過自帶的IIS實現將本地電腦變成網絡服務器。但設置過程涉及啟用或關閉Windows功能、入站規則、協議和端口等操作。相對Nginx、Tomcat、Apache、NodeJS等配置工具而言，要復雜并且容易出錯。對于非計算機專業的教師而言，選擇Nginx完成服務器端配置更為合適。

Nginx是一款開源的輕量級服務器代理工具，性能穩定，并發能力強、響應速度快[9]。搭建Nginx環境，在其官方主頁下載安裝壓縮包。解壓后雙擊”nginx.exe”即可啟動nginx服務器。啟動服務器后在瀏覽器地址欄中輸入“localhost:80”進行訪問，若彈出如圖7中所示界面，說明Nginx環境安裝成功。

圖7 Nginx啟動成功頁面顯示內容

在配置nginx.conf文件中，將server配置參數端口（listen）指定值為8080、8081等非常規值，可避免因常規端口已被占用，導致啟動失敗。

將網絡課程的主頁文件index.html與依賴的css與js文件夾一并拷貝到Nginx安裝包里的html目錄中。此時，在服務器瀏覽器的地址欄輸入“localhost:8080”，將打開編寫的網絡課程的主頁，此時網頁只能在本地訪問，還需域名與公網IP才能實現外網訪問。

五 外網發布

（1）網絡域名。域名是一組用點分隔的字符串組成的名字。要實現網絡課程能外網訪問，域名是必須要存在的，如同人需要有自己的名字，且域名在全網范圍內都不允許重復，如百度的域名為“http://www.baidu.com”。域名除了以.com結尾以外，還有.net、.org、.cn等形式。可根據課程的名稱自行取定域名，在域名購買網上購買與查重。不同結尾形式的域名，其價格也不同，且有長期和按年購買等多種購買方式。在網絡課程開發初始階段，可采用花生殼提供的小帶寬免費域名，但需額外支付少量運維費用。

（2）IP地址。大部分非計算機專業教師所理解的IP地址是電腦在局域網內的地址。通過cmd命令ipconfig查詢到的iv4地址，為電腦在局域網內的IP地址。若需將自建網絡課程部署成外網可見，僅有局域網內的IP地址是不夠的，需要有公網IP地址。

公網IP地址是電腦上網絡課程服務器在萬維網上的通訊地址，在全球范圍內是唯一的。在某種意義上講，與網絡域名是等同的，IP地址由一組用點分割的數字組成，不容易記憶，故通常在瀏覽器中輸入域名進行訪問。

電腦的內網IP地址通常以192.168.x.x形式，可以重復。如同某個街道上房間的門牌號，不同的街道可有相同的門牌號。但電腦的外網IP，如同xx省xx市xx街道是不能重復的。互聯網上的電腦通過公網IP進行通訊，全球個人電腦數量巨大，并不是每臺電腦都有公網IP，公網IP較少，甚至一所學校只有一個到幾個公網IP。

如能申請到公網IP，將域名解析到公網IP即可實現外網訪問。

（3）內網穿透。如果不能申請到公網IP，可通過NAT內網穿透等技術，將本地的電腦映射成外網可以訪問。可采用花生殼軟件實現內網穿透，在花生殼官網上下載與電腦操作系統匹配的客戶端安裝源程序包并完成安裝。在內網穿透設置頁面中添加映射，應用名稱可指定為網絡課程名稱，外網域名輸入購買或者贈送的域名，外網端口選擇動態端口，內網主機指定為127.0.0.1（部分文獻資料建議指定為本機ipv4地址，經實驗失敗），內網端口指定為8080，此端口必須與前文中Nginx配置的端口保持一致，如圖8所示。

圖8 花生殼添加映射頁面

上述配置完成之后，花生殼自動完成域名解析，并生成訪問地址，在外網環境下，從瀏覽器中輸入訪問地址，即可打開網絡課程首頁。

六 結語

本文較系統的闡述一成套搭建可從外網訪問的線上課程教學平臺的技術方案。整個平臺的搭建方案，對計算機專業知識相對依賴較少，極大程度上的利用現有成果（含開源程序等），成本相對低廉，開發進度較快。本文作者均為非計算機專業從教人員，深刻的理解框架系統設計的難處，對開發過程中可能遇到的痛點與知識盲區比較清楚，在關鍵點上的講解更容易讓人理解，但在計算機線上課程開發技術的認識廣度與深度上有待繼續的提升與加強。當前互聯網技術發展迅猛，涌現出一批低代碼網絡框架，如阿里宜搭、騰訊微搭和百度智能建站等技術，應隨時跟進此類前沿技術，將其應用于網絡課程的建設。