模仿實驗樓專案

需要專案原始碼的私信我

執行截圖

主要技術

• 1、Springboot
• 2、shiro
• 3、docker
• 4、websocket
• 5、Vue

1.ubuntu映象安裝的軟體

名字	映象ID	安裝的軟體
vnmsubuntu	e63ac7f6d854	vim、ifconfig、passwd openssl openssh-server、mysql、通過dockerjava啟動能夠自動在後臺執行
bu	fcf91b03907a	vim、ifconfig、通過dockerjava啟動能夠自動在後臺執行
sshcentos	d70c73f12822	ifconfig、ssh
consol/ubuntu-xfce-vnc	a86ae35bf09a	帶有圖形化介面的ubuntu系統
sqlxfceubuntu	6a5fefacbf83	帶有圖形化介面的ubuntu系統、裝有mysql

1、mq-ssh-ub-xfce   4bc3aa73ca0c      
	安裝了MySQL、ssh的Ubuntu的xfce映象
2、theia-python     d537eb288af0
	可寫python的Ubuntu的theia映象，python版本：2.7.13
3、theia-java       7ecaa75800bb
	可寫java的ubuntu的theia的映象，jdk版本：1.8
4、theia-html       40786e135c9f
	可寫html的ubuntu的theia映象
5、pythonxfceubt    9832e7710c5d
	可寫python3的ubuntu的xfce映象
6、had-jdk-ct-xfce  242c8e3713fc
	安裝了Hadoop偽分散式的xfce的centos映象（hadoop:2.7.7,jdk：1.8），安裝了ssh，root密碼：123456

1. 登入阿里雲Docker Registry

$ sudo docker login --username=dawnxlb registry.cn-hangzhou.aliyuncs.com

用於登入的使用者名稱為阿里雲賬號全名，密碼為開通服務時設定的密碼。

您可以在訪問憑證頁面修改憑證密碼。

2. 從Registry中拉取映象

$ sudo docker pull registry.cn-hangzhou.aliyuncs.com/dkz/dk1:[映象版本號]

3. 將映象推送到Registry

$ sudo docker login --username=dawnxlb registry.cn-hangzhou.aliyuncs.com
$ sudo docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/dkz/dk1:[映象版本號]
$ sudo docker push registry.cn-hangzhou.aliyuncs.com/dkz/dk1:[映象版本號]

2.目前實現功能

1、連線圖形化映象

每次進入都會判斷cookie中是否有containerid和containerport，看是否已經建立了映象，如果建立了直接連線，否則當使用者點選建立的時候將containerid和containerport儲存到cookie中，當時時間了或者關閉了環境刪除cookie中的值。

2、連線終端映象

每次進入都會判斷cookie中是否有containerid，看是否已經建立了映象，如果建立了直接連線，否則當使用者點選建立的時候將containerid儲存到cookie中，當時時間了或者關閉了環境刪除cookie中的值。

3、圖形化實驗詳情步驟

在實驗詳情中每一章的所有節的查詢、翻頁、跳轉、重新整理、當前節高亮都ok。每次翻頁都會將當前頁儲存到cookie中，同時記錄當前頁。每一章的所有節一次性查詢完畢，儲存到JS陣列中，然後通過下標更改資料翻頁！
章節的進度條ok！

4、課程列表

課程列表採用vue渲染，首先查詢初方向，然後查出全部的標籤，然後每次點選方向後會查詢該方向的標籤，再根據標籤去查詢課程，可以進行最新和最熱排序，還可以選擇免費、會員、訓練營的類別。點選每個課程進入課程詳情。

首頁課程導航

首頁的課程導航是後臺查詢出來方向和標籤，做成一個LinkedHashMap

LinkedHashMap保證輸出順序就是新增順序

然後點選方向傳入方向名字和方向下標，對於標籤和標籤的下標都是0，點選標籤傳入方向的名字、下標，標籤的tid和下標，傳入到課程列表介面，方便進行選中渲染和課程查詢。
傳入方向的名字是為了查詢下面的標籤，傳入方向的下標是為了定位選中狀態，
傳入標籤的的id，是為了查詢課程，傳入下標是為了定位選中狀態

5、課程詳情

目前完成

根據課程的類別(免費、會員和訓練營)右側展示不同的樣式。中間展示名稱、簡介、你將學到、課程內容、課程詳情。
對於會員和訓練營的課程判斷使用者是否是會員和購買，加入課程評論

未完成

沒加課程回覆，想著所有的評論回覆用一個表，然後加上不同的屬性

6、導航欄

根據登入和未登入展示不同導航欄，登入後查詢最近學習過的5條課程。判斷使用者是否有未讀的通知

7、個人中心

可以修改頭像、修改暱稱
目前可以分頁展示歷史學習的課程！點選每個歷史課程的繼續學習直接跳轉到學習介面。

8、實驗報告

使用者可以釋出報告，每次釋出報告都會查詢是否釋出過該章該節的報告，如果釋出了直接替換內容，否則插入一條報告。

9、報告、帖子詳情

點選報告可以檢視詳情，詳情介面可以下載報告的PDF
點選帖子可以檢視詳情，
帖子和報告詳情介面有一個可以跳轉到對應課程的詳情頁面的報告或者帖子列表
帖子詳情右邊可以自動根據h1-h6標籤生成目錄。

10、個人報告、帖子

使用者的個人報告、帖子可以分頁展示

11、開頭會員

實現支付寶沙箱支付開通 標準會員、高階會員

12、課程詳情開始學習

點選進入學習介面會判斷課程型別，然後判斷使用者是否是vip或者購買了該課程。

13、課程詳情右側

課程詳情右側根據使用者的身份、課程的型別展示不同的樣式。

14、聊天

1、聊天採用websocket，實現多使用者之間的聊天，會記錄使用者之間的聊天記錄，自動新增好友，每次發訊息都會把新訊息新增到vue的聊天記錄的陣列中，自動渲染聊天記錄，點選使用者頭像自動查詢兩者之間的聊天記錄。新訊息來後，如果當前使用者不再傳送訊息使用者的聊天介面會彈出提示框：某某某傳送一條資訊。

2、聊天記錄每次和某個使用者聊天的時候會查詢出所有聊天記錄，點選每條聊天記錄會遍歷其中的img標籤，提取出其中的src，然後彈出預覽。

3、如果對方不線上，則彈出框提示對方不線上。

message=message.replace(/</g,"<");
message=message.replace(/>/g,">");
js替換某個字元

15、搜尋

1、搜尋介面進入的時候會在後臺根據關鍵字查詢課程、帖子、討論的數量

2、在前臺介面會使用vue將課程、帖子、討論的三個模組的內容分別查詢出來，之後每次切換都只是判斷，然後展示某個，隱藏另一個即可。