本文主要內容
我的工程實踐項目是:
- 當前在線教育及微課、慕課、翻轉課堂成為教學實踐探索的熱點網絡教學平台突破了傳統教學中時間空間的限制,使學習可以隨時隨地,讓學生可以更好地利用碎片化時間,因此網絡共享平台地搭建成為一個富有意義的項目。
- 本系統首先基於go語言的Gin框架,通過該平台實現網上教學資源的共享。用戶可以根據頁面鏈接,實現搜索課程、瀏覽課程教學、在線觀看學習視頻、下載課件、教師上傳作業,下載作業,作業評分等功能。
本文主要針對我的工程實踐項目,進行軟件系統分析和設計,最終形成軟件系統概念原型。
設計方案
常見的項目的架構風格有以下幾種:三層架構、MVC、MVVM、管道-過濾器、客戶-服務、P2P、發布-訂閱等。
本項目采用了BS即Browser/Server(瀏覽器/服務器)結構,就是只安裝維護一個服務器(Server),而客戶端選用瀏覽器(Browse)運行軟件。B/S結構應用程序相對於傳統的C/S結構應用程序就是一個特別大的進步。 B/S結構的重要特征就是分布性強、維護方便、開發簡單並且共享性強、總體擁有費用低。
整體方案上采用了前后端分離,然后整體架構使用了MVC架構。
前后端分離
前后端分離,即前后端各自作為一個半自治的技術獨立團隊,協作開發同一業務功能。
1. 為什么選擇前后端分離
前后端分離的原因是多種多樣的,移動優先(Mobile First)戰略將單頁面應用帶到了移動領域,使得后端需要提供RESTful風格的API,也進一步加劇了前后端分離;並且,知識的專業化使得傳統的后端工程師,已經無法滿足前端開發的要求。
缺點:要面臨API管理帶來的挑戰。
優點:
- 獨立部署。前端應用可以獨立運行在自己的服務器上,而不受后端上線計划的影響。
- 分清職責。后端將視圖層(View)從系統架構中拆分出去,使系統變得更加簡潔。
- 技術棧獨立。分離之前,技術選型受一定限制,如模板引擎等。分離之后,只要保證API是一致的,前后端之間就會互不影響。
- 方便系統演進。后端可以遷移到微服務,前端可以遷移到微前端架構。
- 提高效率(相對的)。對於復雜項目而言,拆分可以降低維護成本;而對於簡單的項目而言,拆分則會提高維護成本。
2. 前后端分離的開發模式
瀑布模式的前后端分離,是預先制定API的文檔,再進行聯調。敏捷模式的前后端分離,則是一個業務一個API,每個API單獨集成。
瀑布模式的流程圖如下:
3. 前后端分離的API設計
RESTful API幾乎是前后端分離的標准實踐。
相關的基本規范:
- 標准的HTTP動詞(又稱為HTTP請求方法)。GET/PUT/POST/DELETE/PATCH等。
- 狀態碼。20x/40x/50x等常見的狀態碼。
- 資源路徑。URL用於代表資源,應該確保資源能遵循相關的規范。
- 參數處理。GET/POST。
與API和安全相關的要素:
- Token管理。后端處於安全考慮,會有各種復雜的管理機制。常用的有超過時間跨度則過期、二次登陸失效、多個客戶端可以同時登錄、Token永不過期等。而對於前端來說,只是在遇到401未授權的時候進行相應的邏輯處理。
- 表單校驗。所有的表單校驗都是需要前端和后端都校驗的。前端校驗是出於用戶體驗的目的,后端進行校驗時默認前端是不可信的。
- 權限管理。前端往往只是根據相關的角色和權限來展示現在的頁面,至於權限則要在后端進行判斷。
概念原型相關視圖
MVC架構模式依賴視圖
后台是基於MVC的,由於我們采用了前后端分離,所以view層就單獨分離開了
分解視圖如下
執行視圖如下
- 用戶登陸注冊流程圖如下
- 學生選擇課程學習流程圖如下
- 教師批改作業流程圖如下
核心的數據結構設計
課程目錄的數據結構設計
由於我們使用的是MongoDB,其數據類型就如下json格式
{
courseTitle:'高級網絡技術',
hTitle:'Lab3 SDN環境搭建與協議仿真',
hDescription: "無",
hpublishTime: '2020/11/20',
hendTime: '2020年11月23日',
uploadTime: '2020/11/22',
score: '8',
}
這是作業的基本數據結構:courseTitle
為對應課程名,hTitle
是基本的課程名稱,hDescription
為課程描述,hpublishTime
為作業發表時間,hendTime
為作業提交的截止時間,uploadTime
為作業的上傳時間,score
為作業得分
{
id: 1,
name: "運動與健康",
teacher: ['代方梅', '史文文'],
leftImg: "https://qn-next.xuetangx.com/15724062301298.jpg?imageslim", // 課程的宣傳性質的圖片
startTime: "2020-09-01", // 課程開始時間
endTime:"2020-12-31", // 課程結束時間
totalTime: 12, // 總共要多少周
perTime: 6,//預計一周多少要花多少小時
details:`
《運動與健康》課程以人文社會科學的視野,將體育人文社會科學、運動人體科學和醫學等相關學科有機地結合起來,系統、全面地闡述體育運動與健康的關系、如何向體育運動要健康、不同運動項目的健康機制、運動損傷的預防與處理等基本內容。《運動與健康》祝願每一位同學掌握科學鍛煉的方法,每天鍛煉一小時,健康生活一輩子!
健康是人類發展永恆的主題,追求健康是人們共同的願望,擁有健康是人人享有的權利,維護健康必須走科學的道路,增進健康應遵循自身的規律。《運動與健康》這門課程將帶領大家為健康而運動。
`, // 課程摘要
homework: 0.6, // 最后期末的平時作業占比和考試的占比
finalExam: 0.4,
}
這個是課程的基本信息存儲
{
id: 1,
label: '第零章',
children: [{
id: 4,
label: '本課程簡介',
children: [{
id: 9,
label: 'video'
}, {
id: 10,
label: '課程簡介和學習目標'
},{
id: 11,
label: '第44次中國互聯網絡發展狀況統計報告201909'
},
]
}
這是課程目錄設計
id
是對應的課程id,然后第一級的children
是最外層的目錄,類似於書本的第幾章第幾章。
第二級的children
是對應於第一級目錄的子目錄就是第一章節里面的各個小章節,最后對應的children就是主體內容了。
{
id:'1',
type:'學生',
name: '張三',
sno: 'SS2020123456',
pwd:'********'
}
這是用戶信息存儲,type
是賬號類型,有學生和教師兩個類型,name
是學生姓名, sno
是學生的學號,pwd
是學生的密碼
實現視圖如下
- 后端實現視圖如下
目前還沒有完全實現,只實現了部分功能
- 前端實現視圖如下
軟件運行環境與技術選型
前端:vue2+vuex+vue router + element UI
后端:Go
數據庫:MangoDB
編譯器:Goland
理由:因為采用前后端分離的分離的思想,前端和后端的開發可以各自進行。采用MangoDB主要是因為其適合課程目錄的存儲,課程目錄是一個類似樹一樣的存儲狀態,如果采用關系型數據庫存儲的話會比較麻煩,采用mangoDB的kv存儲就相對簡單很多。
gin框架是目前go語言中很輕量,性能也很好的web框架,故而采用
鑒於實際使用時,數量較多的設備(執行器)會同時向webserver傳輸自身的狀態信息,為了減輕服務器壓力,webserver主要的工作是進行redis緩存,同時響應前端對於設備(執行器)狀態數據的請求。每隔一段時間,將目前已有的緩存數據存入database服務器中。如果用戶需要查看一段時間之前的設備狀態信息,webserver可以從database server中讀取。
系統概念原型的核心工作機制
本在線資源共享系統的核心功能是學生能夠正常在線學習和提交作業,然后教師的上傳作業,然后下載作業評分。
所以學生的學習功能機制是:
- 登陸系統
- 查看自己正在學習的課程
- 進入課程頁面
- 根據自己的學習進度打開視頻進行在線學習
- 學習並記錄筆記
- 下載對應作業
- 作業完成后提交到系統
- 系統驗證作業格式返回提交信息
教師的下載批改作業的功能機制是:
- 教師看自己所教授的課程
- 查看已提交作業
- 在線預覽作業,然后批改給出分數
- 上傳分數,並給出評論到系統
- 批改下一個學生的系統