計算機畢業設計 ssm基于VUE.js的在線教育系統 vue 畢設

第5章系統實現

一、技術路線：

開發語言：Java

前端技術：JavaScript、VUE.js（2.X）、css3

數據庫：MySQL 5.7

數據庫管理工具：Navicat或sqlyog

開發工具：IDEA或Ecplise

二、項目介紹：

三、運行截圖：

3.1前臺界面的實現

在前臺里所有的信息都是共享的，注冊用戶、非注冊用戶、游客都可以瀏覽。主要為課程信息、個人中心和后臺管理。

3.1.1首頁界面的實現

   本功能設計的目的是幫助用戶一鍵返回首頁，在首頁里的元素包括輪播圖、列表框、文字、圖片等。在首頁的上半部分是綠底白字的系統名稱，系統名稱下面是導航欄，接著就是輪播圖，輪播圖下面是課程信息。首頁界面的實現界面如下圖3.1所示：

圖3.1首頁界面的實現效果

3.1.2課程信息功能的實現界面

在課程信息界面里可以看到所有的課程。課程信息以課程的封面來展示，學生可以一目了然。課程信息功能的實現界面如下圖3.2所示：

圖3.2課程信息功能的實現界面

課程詳情的實現界面如下圖3.3所示：

圖3.3課程詳情的實現界面

3.1.3個人中心功能的實現界面

用戶登錄后在個人中心里可以管理自己的注冊信息和收藏信息、訂單信息，實現界面如下圖3.4所示：

圖3.4用戶中心的功能實現界面

3.1.4課程購買功能的實現界面

在本功能模塊里展示購買的課程名稱、點擊次數以及訂單號。課程購買信息功能的實現界面如下圖3.5所示：

圖3.5課程購買信息功能的實現界面

3.1.5課程視頻功能的實現界面

課程視頻功能里可以看到課程的圖片和標題，點擊課程圖片可以進入課程詳情里，在課程詳情里用戶可以留言和收藏課程以及播放課程視頻。課程視頻功能的實現界面如下圖3.6所示：

圖3.6課程視頻功能的實現界面

3.1.6在線留言功能的實現界面

用戶在添加留言時可以只填寫留言內容，留言成功后會顯示留言人的賬號和頭像。用戶在線留言功能的實現界面如下圖3.7所示：

圖3.7用戶在線留言功能的實現界面

3.1.7章節信息功能的實現界面

學生在課程詳情里可以瀏覽該課程的章節。章節信息功能的實現界面如下圖3.8所示：

圖3.8章節信息功能的實現界面

3.1.8課程訂單管理功能的實現界面

學生可以管理已購買的課程。課程訂單管理功能的實現界面如下圖3.9所示：

圖3.9課程訂單管理功能的實現界面

3.2管理員功能的實現界面

管理員的功能為管理前臺信息和更新前臺信息以及管理學生、教師信息。管理的前臺信息包括課程信息、章節信息、課程收藏信息、課程留言信息、課程訂單信息等。管理員功能的實現界面如下圖3.10所示：

圖3.10管理員功能的實現界面

3.3教師功能的實現界面

教師的功能為管理個人資料和管理章節、課程信息以及回復學生留言、管理學生訂單等。教師功能的實現界面如下圖3.11所示：

圖3.11教師功能的實現界面