基於微服務架構開發線上教育網站

CooperMiNi發表於2021-08-16
  • 專案介紹

本專案採用前後端分離開發,其中

後端技術棧

SpringBoot作為快速開發框架;

SpringCloud作為微服務架構框架;

Nacos-服務發現、分散式配置;

Feign-服務呼叫;

Hystrx-熔斷器;

GateWay-服務閘道器;

Redis作為非關係型資料庫為簡訊驗證碼、主頁資料快取等提供資料儲存;

MyBatis-Plus作為持久層框架。

前端技術棧

Vue作為前端開發框架;

Element-ui作為後臺管理系統模板框架;

nodejs作為JavaScript執行環境;

Echars作為資料圖表工具。

第三方技術

阿里雲OSS作為物件儲存服務;

阿里雲視訊點播服務;

阿里雲簡訊服務;

EsayExcel作為讀取Excel工具;

  • 資料庫

 

  •  微服務架構

  • 功能點分析

 

後臺管理系統

登入介面和許可權管理:登入採用SpringSecurity,對使用者進行許可權管理,過程是首先通過SpringSecurity的攔截器TokenLoginFilter將登入資訊攔截,呼叫實現類查出使用者資訊,對呼叫配置類密碼進行處理,比對成功呼叫登入成功方法,並向前端返回一個token,比對失敗呼叫失敗方法返回失敗資訊。

 

講師管理

主要有講師列表和新增講師

講師列表主要是遍歷講師表,將資料庫資訊傳送給前端,這裡頭銜列在資料庫中使用的是0和1來代表高階講師和首席講師,而在前端使用三元運算來實現頭銜的顯示,同時這裡也提供了根據講師名稱以及時間段的查詢功能;

新增講師中主要是講師頭像,這裡使用的是阿里雲的OSS(物件儲存)來儲存講師頭像可以從eacher表中看到avatar欄位中儲存的是頭像的地址,這裡上傳頭像會呼叫後端的oss服務,這個服務就是上傳頭像或者檔案的,在這個服務中設定AccessKey、accessKeySecret、endpoint以及bucketName就可以連線上你的阿里雲OSS,同時也可以設定所儲存的資料夾,具體業務細節可以參考阿里雲OSS的SDK。

課程分類

課程分類這裡課程採用的是一級分類和二級分類的劃分模式,一級分類的id是二級分類的pid,以這樣的形式來關聯兩種分類的關係。

匯入課程分類這裡使用了EsayExcel,首先從前端讀取file檔案,呼叫EasyExcel的read方法向裡面傳入檔案輸入流InputStream,所需要讀取的實體類的class物件以及監聽器SubjectExcelistener,具體的監聽器實現流程可以參考EasyExcel官方文件。

 課程管理

釋出課程,首先是課程的基本資訊的存入,然後是課程的大綱和小節的儲存,這裡儲存課程小節時需要將本節的課程視訊上傳到阿里雲的視訊點播服務中,這裡同樣是將前端傳回的檔案流進行處理,這裡使用的是vod模組微服務,與講師頭像上傳類似,具體可以參考阿里雲視訊點播的SDK,最後是課程的釋出,這裡是對課程狀態的改變。

課程列表,這裡提供了查詢功能以及對課程的編輯和刪除功能。

 

統計分析

這裡採用了微服務之間的呼叫,因為這個模組需要對不同的微服務中的資料進行統計,所以將這個模組單獨建立為一個微服務來對其他微服務進行呼叫,這裡呼叫的方法採用了Feign,使用方法為,首先先需要呼叫的服務中建立一個介面,在介面上加上@FeignClient("服務的name")(name 可以在Nacos中看到,同時也要保證呼叫的服務於被呼叫的服務都要在Nacos中註冊)將需要呼叫的方法複製過來,其中請求地址需要加上controller類的地址,為呼叫端的啟動類上新增@EnableFeignClients註解,這樣就可以呼叫其他微服務中的方法了。統計分析模組就是讓其他模組為其提供所需要的資料,然後由statistics這個微服務處理。而前端是圖表則採用了Echars這個工具來實現圖表的顯示。

前端網站

 主頁

輪播圖採用獨立的微服務,來實現輪播圖。前端使用swiper元件來實現。

熱門課程根據課程釋出時間,將前八個課程展示在主頁;

名師根據課程釋出時間,將前四位名師展示先主頁。

 

課程介面

主要用於顯示課程以及根據課程分類來查詢所需的課程。

 

課程詳情介面

主要有課程的詳細資訊,以及購買連結,這裡採用微信支付的方式。同時本頁面也支援評論功能,可以在登入後對課程進行評論。

 

講師介面

主要是顯示全部講師

講師詳情介面

主要顯示講師的詳細資訊以及講師所講的課程

登入、註冊介面

註冊採用了通過簡訊驗證的方式實現註冊

通過簡訊驗證的方式,這裡使用到了阿里的簡訊服務,簡訊服務使用獨立的微服務模組,其中主要的實現流程為,首先我們通過前端獲取到註冊者的手機號,需要從Redis中查詢在過去五分鐘內是否已經傳送過驗證碼,如果沒有,我們在本地生成一個驗證碼然後傳送到阿里雲的簡訊服務,這裡同樣與OSS和視訊點播服務一樣需要regionId等,具體的實現流程可以參考阿里雲簡訊服務的SDK,當使用者收到簡訊後,將驗證碼輸入後,資料完整的傳入後端會通過Redis獲取驗證碼,與註冊者的驗證碼進行比對,如果相同將註冊成功。

登入採用了手機號密碼的方式和微信登入的方式來實現登入

 

通過微信登入的方式,這裡首先要生成一個登入的二維碼,通過訪問微信提供的一個固定的地址來獲取二維碼地址,掃碼後,微信會向後端介面返回一個code(臨時票據),通過這個code去訪問微信的一個固定地址,得到一個access_token(訪問憑證)和openid(微信唯一標識),然後再通過這兩個去訪問微信的一個固定地址來獲取使用者資訊。獲取完後會將資訊放入ucenter(使用者表)中,同時通過jwt工具生成一個token返回給前端。

通過手機號密碼的方式,首先從前端獲取到使用者的手機號和密碼,這裡需要先對手機號密碼進行非空判斷,當然也可以進行異常處理,驗證成功後通過jwt工具生成一個token返回給前端。

 

  • 總結

 本專案在編寫中所遇到的問題

後端

跨域問題,在專案之初使用@CrossOrigin註解解決,之後結合前端使用nginx實現反向代理,前端只需訪問一個地址就可以訪問到所有微服務,在專案最後通過gateway閘道器來實現;

實體類註解偶爾失效例如:@TableField(fill = FieldFill.INSERT),解決辦法Maven去clear或install一下;

服務埠號偶爾會被其他程式佔用,在工作管理員中找到結束程式,或者直接重啟電腦;

有時寫mapper可能會用xml寫一些複雜的sql,但在啟動後找不到mapper,在配置檔案中加上xml檔案的路徑,例如mybatis-plus.mapper-locations=classpath:com/atguigu/eduservice/mapper/xml/*.xml

當取url中傳的值時最好加上@PathVariable註解,在取實體類引數是加上@RequestBody註解,本專案後端返回的值為JSON格式的所以在controller上也要加上@RestController註解。

前端

在向cookie傳值是需要將值轉換成JSON格式,在取值時要將值再轉換回來;

 

 

相關文章