基于MVC的慕課教學平臺的設計與實現

韓麗媛

【摘要】隨著網絡技術的不斷發(fā)展，國家的教學模式也呈現多樣的方式?；诰W絡技術的在線學習方式，受到了越來越多的人的青睞，“慕課”在此基礎上，以大規(guī)模，開放課程，網絡課程等特點及優(yōu)勢，迅速發(fā)展起來。本平臺設計過程中，平臺主要分為兩個部分：前臺與后臺。前臺采用目前最流行的前端開發(fā)的開源工具包Bootstrap，結合前端CSS布局樣式，設計完成了用戶登錄與注冊，瀏覽課程，學習課程，在線考試，自測，學習筆記，在線問答，文章瀏覽以及經驗值等；后臺通過采用jQueryEasyUI框架技術，使用流媒體技術，視頻的轉碼技術來克服在視頻上出現卡頓和無法加載的現象，保障了視頻的流暢。

【關鍵詞】慕課教學平臺 B/S架構 MVC Microsoft Visual Studio 2012 SQL Server 2008

【中圖分類號】G642 【文獻標識碼】A 【文章編號】2095-3089（2015）08-0049-02

【ABSTRACT】With the development of network technology， the teaching modes have taken a variety of ways. More and more people like the online learning method which is based on network technology. On the basis of that， Mooc is developing rapidly as the characteristics and advantages of large-scale， open courses and the network curriculum.

The platform is divided into two parts during design， which are the foreground and background. The foreground uses the most popular open-source toolkit—Bootstrap. Combined with the fore-end of the CSS layout style， It completes the design of logging on and submitting， browsing courses， leaning courses， online examination， self-test， study notes， online ask and answer，browsing articles and experience.The background uses the jQueryEasyUI framework technology . It overcomes the phenomenon of videos struck and cant load the videos by streaming media technology and video transcode technology ，So that it guarantee the videos played smoothly.

【Keywords】Mooc； B / S architecture； MVC； Microsoft Visual Studio 2012； SQL Server 2008

所謂“慕課”，是將傳統(tǒng)的教學錄制成教學視頻，然后將視頻分割成10分鐘甚至更小的“微課程”，其中由許多小的問題穿插其中連貫而成，使得學習者注意力集中，遇到的任何的疑問，可以直接提出來，與教師進行互動，達到學習的最佳效果。

慕課教學平臺的設計與實現，在參考了國內外慕課系統(tǒng)的發(fā)展現狀與趨勢的基礎上，通過對大學生的具體實際需求，同時考慮到不同大學的教學需求，以及系統(tǒng)的延展性和數據的兼容性，給出了一套較為完整的設計方案。系統(tǒng)的設計與實現，不僅滿足了不同人群的學習需求，同時提高了受教育者的學習效率。

本平臺開發(fā)過程中采用Visual Studio 2012開發(fā)平臺，數據庫采用SQL SERVER 2008管理平臺，使用.NET中經典的MVC框架模式，實現整個慕課教學平臺的搭建。

一、關鍵技術介紹

1.MVC技術

MVC是Model（模型）、View（視圖），Controller（控制器）的簡稱，是一種典型的，實用的軟件設計框架的典范，用于組織代碼用一種業(yè)務邏輯和數據顯示分離的方法。這種技術使得界面與后臺分離，使得開發(fā)者和前臺美工人員，可以很好的分工協(xié)作。

MVC分層有助于管理復雜的應用程序，因為您可以在一個時間內專門關注一個方面。MVC 分層同時也簡化了分組開發(fā)。不同的開發(fā)人員可同時開發(fā)視圖、控制器邏輯和業(yè)務邏輯。

2.Bootstrap

Bootstrap是一款簡潔，直觀，強悍的前端框架，讓web開發(fā)更迅速簡單。其中，內置的全局CSS樣式庫，組件庫，JavaScript插件庫等樣式豐富，使得前臺開發(fā)更加靈活。還有響應式的布局設計，可以適應各種移動終端的需求，完善和改進原有的樣式庫，使得前臺界面的設計大方，美觀。

3.流媒體技術

流媒體技術主要是處理視頻在播放中的卡死現象，它主要有三部分：數據服務中心，Web端子系統(tǒng)，移動端子系統(tǒng)。

數據服務中心：擔當數據請求（瀏覽器或移動設備）和服務器響應（數據庫服務器）的中間層?！皵祿罩行摹蹦軌驅祿旆掌鬟M行增刪改查等操作；能夠通過負載均衡服務器向流媒體服務器集群上傳流媒體文件；還能夠通過負載均衡服務器得到響應的媒體流播放地址以便回傳到客戶端。

Web端子系統(tǒng)：Web端子系統(tǒng)為一個獨立的網站。Web端子系統(tǒng)通過“數據服務中心”進行數據的請求和操作。

移動端子系統(tǒng)：移動端子系統(tǒng)為一個移動客戶端程序，僅包括“學生端學習平臺”。移動端子系統(tǒng)通過“數據服務中心”進行數據的請求和操作。

二、業(yè)務流程分析

本平臺的用戶分為三個角色：學生，教師，管理員。下面就進行業(yè)務流程的分析。

1.學生用戶的業(yè)務流程

流程說明：

（1）學生進入慕課教學平臺，注冊用戶或者直接選擇學號登錄，進而登錄進入系統(tǒng)。

（2）學生根據需要，選擇所需學習的課程，如果是自己要學習的內容，則選擇課程，開始學習；如果不是自己要學習的內容，則繼續(xù)選擇課程。

（3）在學習的過程中，學生可以根據所學習的內容，進行相關內容的練習，以及進行在線的答疑，筆記，自測等

（4）如果有需要，可以再次學習，或者選擇其他課程。

2.教師用戶流程

流程說明：

（1）教師進入慕課教學平臺，首先要登錄到網站的后臺。

（2）教師根據課程安排，進行相應的課程發(fā)布，進而讓學生可以前臺學習此課程。

（3）根據所傳課程視頻的內容，進行試題的生成，以供學生在學習的過程中，學生可以根據所學習的內容，進行相關內容的自測練習。

三、系統(tǒng)設計與實現

系統(tǒng)的設計與實現，是系統(tǒng)開發(fā)過程中最重要的一個環(huán)節(jié)，系統(tǒng)的設計應該按照需求分析階段的分析來進行設計。

1.前臺功能模塊設計

（1）導航設計：通過導航菜單，選擇不同的鏈接選擇，進入相應的界面，同時進行用戶的登陸注冊。

（2）首頁：顯示的內容，用戶可以進行定制。有三種類型：按默認情況，按課程，按文章等內容進行顯示。展示課程的詳細信息（包括課程更新時間，在學人數，更新節(jié)數以及課程時長）。

（3）設置：用戶可以修改個人信息，頭像，修改綁定郵箱，修改密碼等功能。

（4）個人中心：主要包括8個模塊：

我的課程：支持學習歷史記錄功能，可按時間的順序展示學生所學過的所有課時及相關的學習信息

我的試題：顯示自己做過的錯題和收藏的題?？梢赃M行重復練習，加深對知識的掌握。并隨時清除錯題，支持自動判斷和試題解析功能。

我的自測：自動記錄學生在學習過程中自測的試題，學生如果當時沒有完成自測，則可繼續(xù)測試；如果完成測試，可以查看試卷詳細的分析，讓學生在學習中，不僅可以學習，還可以進行考試，分析，提高學生的學習效率。

我的筆記：在線記錄筆記及其參加該課程學習人數之間的交流，好的筆記可以進行收藏，了解不同學生對學習此課程的獨特的見解。

課程代碼：在學習過程中，老師可以進行作業(yè)的布置，如果是計算機類相關課程，需要進行編寫代碼，則所有和代碼有關的作業(yè)、習題都展現在這里，方便學生查看，對代碼進行及時的修改。

課程問答：支持對視頻的承載來完成在線作答、定知識點作答，在此同時還支持涉及到所在知識點的資料，進行在線的學習，下載。

所得經驗值：每學一門課程都會獲得相應的經驗值，作為一個衡量學生學習情況的標準，并且設有排名，來激發(fā)學生的學習斗智。

私信：可以再慕課教學平臺進行在線的交流。學生可以和課程教師進行在線的答疑，解惑，一次解決傳統(tǒng)教學當中時間問題，做到有問題，零負擔。

（5）課程頁面，學習頁面，試卷頁面是用戶分別要進行學習和考試。

在學習視頻觀看的過程中，在視頻中設置了觸發(fā)點，如果視頻播放到觸發(fā)點，視頻自動暫停，并在視頻右側彈出相關練習題，使學生在學習的過程中，加深記憶。并在此知識點處可以翻閱在線資料，做知識點筆記及其在線交流。

（6）本系統(tǒng)還支持線下學習，視頻下載功能。

2.后臺功能模塊

（1）系統(tǒng)模塊主要包含：系統(tǒng)設置、消息設置、系統(tǒng)日志子模塊其中系統(tǒng)設置主要包含一些對網站的LOGO的設置，網站版權設置等，而消息設置模塊主要是用來管理員或者教師發(fā)布一些消息，例如管理員發(fā)布的系統(tǒng)消息或發(fā)給某位老師告知新增加了該教師應該管理的課程，或者是對學生學習狀況查看后的評價、警告等。

系統(tǒng)模塊的設計，主要是用來方便用戶進行定制，不同的大學，網站LOGO等都是不一樣的，此部分的設計，充分滿足了不同的機構對網站使用的不同需求。

（2）用戶管理模塊主要實現對登錄的用戶進行管理及其對其不同用戶的權限設置。

（3）課程模塊包含的課程分類主要用來處理添加前臺顯示的課程大類。

課程管理：在課程分類的情況下，更加細化課程到具體的課程中，并且在課程設置中添加課程的章節(jié)和設置綁定到某些章節(jié)下視頻、試題資源、學習資料等。

課程的問答管理，主要用來查看前臺用戶在學習該課程時對該課程的交流，教師則可針對學生們交流的問題，進行回復，解答。

課程評價管理，主要用來記錄用戶在學習完該課程后對該課程的評價。

課程欄目設置，它主要是用來對課程分欄目，例如把課程分為精品課，公開課等該功能用來實現前臺動課程列表的篩選和實現管理課程權限。

（4）題庫管理模塊實現了現有的考試平臺資源的無縫對接，網站可自由訪問考試平臺的試題、試卷資源，也可以根據需求在題庫中篩選出想要的試題去重新生成想要的試卷并且綁定到需要的課程上，方便使用。

（5）個人中心模塊（僅教師）主要針對的是教師登錄管理系統(tǒng)，該模塊包含一些和教師相關的信息，教師管理的課程，教師收到的消息，教師管理的學生，教師布置的作業(yè)，教師與學生之間的交互同時該模塊也包含了審核課程的功能，前臺用戶在進入課程的時候，第一步是申請該課程的，成功后方可學習該課程，用戶通過申請?zhí)囟ń處煹恼n程，這樣教師就可以實現判斷是否通過審核來完成對學生選課的管理。最后教師還可以通過學生評測模塊來查看學生學習狀況分布圖。從而在需要的時候可以對學生發(fā)出警告。

四、總結與展望

目前，網絡教學平臺的應用非常的廣泛，但是還沒有真正的應用到傳統(tǒng)教學當中，如果網絡教學平臺能夠與傳統(tǒng)的教學相結合，勢必將促國家教育事業(yè)的發(fā)展。隨著“慕課”的到來，基于慕課的教學平臺一定會為促進受教育者的學習效率做出貢獻，而且也會有很好的發(fā)展前景。在設計的整個過程中，前臺主要采用目前最新的Bootstrap框架，搭建響應式的布局，為日后應運在不同平臺打下基礎；后臺采用MVC框架，是前后臺分離，方便搭建。

慕課近幾年的發(fā)展形勢非常的好，慕課教育平臺在未來的教學當中，必將占據重要的地位，這是傳統(tǒng)教學模式與當代信息技術融合的表現，他的發(fā)展勢必將在教育界掀起巨浪，在線的教學方式，將成為人們學習的主要工具，從而促進我國教育事業(yè)的發(fā)展。

參考文獻：

[1] 廖信彥.ASP.NET交互式Web數據庫程序設計[M].中國鐵道出版社，2006.

[2]方柯.基于ASP.NET MVC框架的Web應用開發(fā)研宄[J].電腦知識與技術，2010 （6） ：6213_6215.

[3]徐楓.基于ASP.NET的MVC模式的分析與應用[J].電子科學，2011（10）：31-33.

[4]鄭齊心.ASP.NET項目開發(fā)案例全程實錄[D].北京：清華大學出版 社，2011.

[5]袁宏偉.基于ASP.NET的現代遠程教育網站設計[D].北京：中國地質大學（北京），2009.

[6]楊旭士.基于JQuery框架的Web查詢視圖設計與實現[J].計算機與現代化，2010（8）： 128-129.

[7]李彥，高博.ASP.NET 4.0MVC敏捷開發(fā)給力起飛[M].北京：電子工業(yè)出版社，2011.

[8]呂鳴.網上考試系統(tǒng)的設計與實現[D].上海：復旦大學，2009.

[9]朱濤，周昕.基于ASP.NET MVC模式的精品課程網站系統(tǒng)的設計與實現[J] 科技信息，2011（31）：106-114.

[10]高靜，段會川.JS0N數據傳輸效率研宄[J].計算機工程與設計，2011，32（7）：2267-2270

[11]Bootstrap中文網：http：//www.bootcss.com/