學成在線 第1天 講義-項目概述 CMS接口開發
1 項目的功能構架
1.1 項目背景
受互聯網+概念的催化，當今中國在線教育市場的發展可謂是百花齊放、如火如荼。 按照市場領域細分爲：學前教 育、K12教育、高等教育、留學教育、職業教育、語言教育、興趣教育以及綜合平臺，其中，職業教育和語言教育 的市場優勢突出。 根據Analysys易觀發佈的數據顯示，預計2019年中國互聯網教育市場交易規模將達到3718億元 人民幣，未來三年互聯網教育市場規模保持高速增長。
學成在線借鑑了MOOC（大型開放式網絡課程，即MOOC（massive open online courses））的設計思想，是一 個提供IT職業課程在線學習的平臺，它爲即將和已經加入IT領域的技術人才提供在線學習服務，用戶通過在線學 習、在線練習、在線考試等學習內容，最終掌握所學的IT技能，並能在工作中熟練應用
1.2 功能模塊
當前市場的在線教育模式多種多樣，包括：B2C、C2C、B2B2C等業務模式，學成在線採用B2B2C業務模式，即向 企業或個人提供在線教育平臺提供教學服務，老師和學生通過平臺完成整個教學和學習的過程，市場上類似的平臺 有：網易雲課堂、騰訊課堂等，學成在線的特點是IT職業課程在線教學。
學成在線包括門戶、學習中心、教學管理中、社交系統、系統管理等功能模塊。
1.3 項目原型
通過項目原型進一步瞭解項目的功能，包括：門戶首頁、課程搜索頁、在線學習頁面、個人中心等
參考“項目原型”
2 項目的技術架構
2.1 技術架構
學成在線採用當前流行的前後端分離架構開發，由用戶層、UI層、微服務層、數據層等部分組成，爲PC、App、 H5等客戶端用戶提供服務。下圖是系統的技術架構圖：
\
業務流程舉例：
1、用戶可以通過pc、手機等客戶端訪問系統進行在線學習。 2、 系統應用CDN技術，對一些圖片、CSS、視頻等資源從CDN調度訪問。
3、所有的請求全部經過負載均衡器。 4、對於PC、H5等客戶端請求，首先請求UI層，渲染用戶界面。
5、客戶端UI請求服務層獲取進行具體的業務操作。 6、服務層將數據持久化到數據庫
各模塊說明如下：
2.2 技術棧
下圖是項目技術架構的簡圖，通過簡圖瞭解項目所使用的技術棧
重點了解微服務技術棧：
學成在線服務端基於Spring Boot構建，採用Spring Cloud微服務框架。
持久層：MySQL、MongoDB、Redis、ElasticSearch 數據訪問層：使用Spring Data JPA 、Mybatis、Spring Data Mongodb等
業務層：Spring IOC、Aop事務控制、Spring Task任務調度、Feign、Ribbon、Spring AMQP、Spring Data Redis 等。
控制層：Spring MVC、FastJSON、RestTemplate、Spring Security Oauth2+JWT等 微服務治理：Eureka、Zuul、Hystrix、Spring Cloud Config等
2.3 開發步驟
項目是基於前後端分離的架構進行開發，前後端分離架構總體上包括前端和服務端，通常是多人協作並行開發，開 發步驟如下：
1、需求分析
梳理用戶的需求，分析業務流程
2、接口定義
根據需求分析定義接口
3、服務端和前端並行開發
依據接口進行服務端接口開發。
前端開發用戶操作界面，並請求服務端接口完成業務處理。
4、前後端集成測試
最終前端調用服務端接口完成業務
3 CMS需求分析
3.1 什麼是CMS
1、CMS是什麼 ？ CMS （Content Management System）即內容管理系統，不同的項目對CMS的定位不同，比如：一個在線教育網 站，有些公司認爲CMS系統是對所有的課程資源進行管理，而在早期網站剛開始盛行時很多公司的業務是網站制 作，當時對CMS的定位是創建網站，即對網站的頁面、圖片等靜態資源進行管理。
2、CMS有哪些類型？
上邊也談到每個公司對每個項目的CMS定位不同，CMS基本上分爲：針對後臺數據內容的管理、針對前端頁面的 管理、針對樣式風格的管理等 。比如：一個給企業做網站的公司，其CMS系統主要是網站頁面管理及樣式風格的 管理
3、本項目CMS的定位是什麼？
本項目作爲一個大型的在線教育平臺，對CMS系統的定位是對各各網站（子站點）頁面的管理，主要管理由於運營 需要而經常變動的頁面，從而實現根據運營需要快速進行頁面開發、上線的需求。
3.2 靜態門戶工程搭建
本項目CMS是對頁面進行管理，對頁面如何進行管理呢？我們首先搭建學成網的靜態門戶工程，根據門戶的頁面結 構來分析頁面的管理方案。
門戶，是一個網站的入口，一般網站都有一個對外的門戶，學成在線門戶效果圖如下
3.2.1 導入門戶工程
配置好Nginx ,講前端項目導入到webStorm中，並配置好Server得路徑
3.2.2 配置虛擬主機
在nginx中配置虛擬主機
server{
listen 80;
server_name www.xuecheng.com;
ssi on;
ssi_silent_errors on;
location / {
alias D:/IDEA_work/xc_onine/xc-ui-pc-static-portal/;
index index.html;
}
}
D:/IDEA_work/xc_onine/xc-ui-pc-static-portal 本目錄即爲門戶的主目錄。
PS :這個裏面又 個嚴重的問題就是Ngix可以重複啓動多個，啓動的時候一定要把之前的給停掉在啓動新的，不然一直會加載不出來,這個NGINX配置這個別名的時候最後末尾一定要又反斜槓，從windows直接複製的路徑沒有反斜槓！！！！！
3.3 SSI服務端包含技術
本節分析首頁的管理方案。
1、頁面內容多如何管理？ 將頁面拆分成一個一個的小頁面，通過cms去管理這些小頁面，當要更改部分頁面內容時只需要更改具體某個小頁 面即可。
2、頁面拆出來怎麼樣通過web服務瀏覽呢？ 使用web服務(例如nginx)的SSI技術，將多個子頁面合併渲染輸出。
3、SSI是什麼？
ssi的配置參數如下： ssi on： 開啓ssi支持 ssi_silent_errors on：默認爲off，設置爲on則在處理SSI文件出錯時不 輸出錯誤信息 ssi_types：默認爲 ssi_types text/html，如果需要支持shtml（服務器執行腳本，類似於jsp）
則需 要設置爲ssi_types text/shtml
6、測試 去掉某個#include查看頁面效果
3.3 CMS頁面管理需求
1、這些頁面的管理流程是什麼？
1）創建站點：
一個網站有很多子站點，比如：學成在線有主門戶、學習中心、問答系統等子站點。具體的哪個頁面是歸屬於具體 的站點，所以要管理頁面，先要管理頁面所屬的站點。
2）創建模板：
頁面如何創建呢？比如電商網站的商品詳情頁面，每個頁面的內容佈局、板式是相同的，不同的只是內容，這個頁 面的佈局、板式就是頁面模板，模板+數據就組成一個完整的頁面，最終要創建一個頁面文件需要先定義此頁面的 模板，最終拿到頁面的數據再結合模板就拼裝成一個完整的頁面
3）創建頁面： 創建頁面是指填寫頁面的基本信息，如：頁面的名稱、頁面的url地址等。
4）頁面預覽：
頁面預覽是頁面發佈前的一項工作，頁面預覽使用靜態化技術根據頁面模板和數據生成頁面內容，並通過瀏覽器預 覽頁面。頁面發佈前進行頁面預覽的目是爲了保證頁面發佈後的正確性。
5）頁面發佈：
使用計算機技術將頁面發送到頁面所在站點的服務器，頁面發佈成功就可以通過瀏覽器來訪問了。 2、本項目要實現什麼樣的功能？
1）頁面管理
管理員在後臺添加、修改、刪除頁面信息
2）頁面預覽
管理員通過頁面預覽功能預覽頁面發佈後的效果。
3）頁面發佈
管理員通過頁面發佈功能將頁面發佈到遠程門戶服務器。
頁面發佈成功，用戶即可在瀏覽器瀏覽到最新發布的頁面，整個頁面添加、發佈的過程由於軟件自動執行，無需人 工登錄服務器操作。
4 CMS服務端工程搭建
4.1 開發工具配置
服務端工程使用IntellijIDEA開發。
1、創建工程代碼目錄 XcEduCode（本教程創建XcEduCode01目錄），並且IDEA打開。
2、配置maven環境 拷貝老師提供的maven倉庫，setting.xml文件中配置maven倉庫，maven倉庫的目錄位置不要去使用中文。
配置Maven
配置編碼格式
配置JDK
配置快捷建
配置自動導包
配置自定義代碼模板
4.2 導入基礎工程
4.2.1 工程結構
CMS及其它服務端工程基於maven進行構建，首先需要創建如下基礎工程： parent工程：父工程，提供依賴管理。 common工程：通用工程，提供各層封裝
model工程：模型工程，提供統一的模型類管理 utils工程：工具類工程，提供本項目所使用的工具類
Api工程：接口工程，統一管理本項目的服務接口。
基礎工程代碼及pom.xml配置參考課程資料“基礎工程”。 4.2.2導入父工程
1、將課程資料中的parent工程拷貝到代碼目錄
2、點擊Import Model，選擇parent工程目錄
4.3 MongoDB入
下來就是安裝Mongodb全部下一步下一步就可以安裝 完成了非常的快
mongod.exe ‐‐config "d:\MongoDB\Server\3.4\mongo.conf" ‐‐install
這個MongoDb的命令行窗口一定要用管理員權限打開，才能註冊到服務中
通過客戶端瀏覽器進行方法
打開MongoDb的客戶端
安裝Studio3t客戶端軟件
鏈接成功
基本操作
新增操作
更新操作：
使用Stdio3T進行查詢操作
創建用戶
4.4 導入CMS數據庫
導入cms數據庫：
使用Studio 3T軟件導入cms數據庫
1、創建xc_cms數據庫
2、導入 cms數據庫
右鍵數據庫，點擊導入數據庫
打開窗口，選擇第一個 json。
下一步，選擇要導入的數據文件（json文件
下一步操作即可完成。
導入成功
5 頁面查詢接口定義
5.1 定義模型
5.1.1 需求分析
在梳理完用戶需求後就要去定義前後端的接口，接口定義後前端和後端就可以依據接口去開發功能了。
本次定義頁面查詢接口，本接口供前端請求查詢頁面列表，支持分頁及自定義條件查詢方式。
具體需求如下：
1、分頁查詢CmsPage 集合下的數據 2、根據站點Id、模板Id、頁面別名查詢頁面信息
3、接口基於Http Get請求，響應Json數據 5.1.2 模型類介紹
接口的定義離不開數據模型，根據前邊對需求的分析，整個頁面管理模塊的數據模型如下：
CmsSite：站點模型 CmsTemplate：頁面模板 CmsPage：頁面信息
頁面信息如下
5.2定義接口
5.2.1 定義請求及響應類型
1、定義請求模型QueryPageRequest，此模型作爲查詢條件類型 爲後期擴展需求，請求類型統一繼承RequestData類型。
2.定義接口
6 頁面查詢服務端開發
6.1 創建CMS服務工程
6.1.1 創建CMS工程
搭建完成
編寫測試控制器出現空指針異常
修改，這個裏面又個問題請求的參數是QueryPageRequest,碼字碼的快很容易寫成QueryPageResponse,而根據正常的流程，Repsonse怎麼會出現在請求參數裏面的，明顯是錯的，所以這個錯誤很不好發現，建議一定要把參數寫正確！！！非常重要
完成測試，Bug修復
頁面端開發分頁查詢
可以看到查詢失敗
這個裏面猶豫用的是MongoDb所以URL寫的不對造成的查詢失敗，這個還是YML配置文件寫的又問題，這個地址和密碼一定要寫對
完成BUG修復
代碼總結：
@SpringBootTest
@RunWith(SpringRunner.class)
public class CmsPageRepositoryTest {
@Autowired
private CmsPageRepository cmsPageRepository;
//查詢全部測試
public void test(){
List<CmsPage> list = cmsPageRepository.findAll();
for (CmsPage cmsPage : list) {
System.out.println("查詢出來的數據----》"+cmsPage);
}
}
//分頁測試
@Test
public void testquery(){
int Page=0; //起始頁
int size=5; //每頁顯示的個數
Pageable pageable= PageRequest.of(Page,size);
org.springframework.data.domain.Page<CmsPage> all = cmsPageRepository.findAll(pageable);
System.out.println(all);
}
}
分頁查詢查詢正常
開始進行修改更新的測試
//修改測試
@Test
public void updateTest(){
//先根據ID查詢到這個對象
Optional<CmsPage> cmsPage = cmsPageRepository.findById("5abefd525b05aa293098fca6");
if (cmsPage.isPresent()){
//在得到這個對象
CmsPage cms = cmsPage.get();
//在進行修改
cms.setPageAliase("testUpdate");
//在進行保存
CmsPage save = cmsPageRepository.save(cms);
System.out.println(save);
}
}
測試完成這個是先根據ID查詢，查詢到了之後在進行保存的
自定義方法根據，別名來查詢對象
@Test
public void TestName(){
//根據自定義方法pageNam查詢
CmsPage cmsPage = cmsPageRepository.findByPageAliase("testUpdate");
System.out.println(cmsPage);
}
修改完成：
開始整合Service:
@Service
public class PageService implements CmsPageControllerApi {
@Autowired
private CmsPageRepository cmsPageRepository;
@Override
public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest) {
QueryResult queryResult=new QueryResult();
if (page<=0){
page=1;
}
if (size<=0){
size=10;
}
Pageable pageable= PageRequest.of(page,size);
Page<CmsPage> cmsPages = cmsPageRepository.findAll(pageable);
List<CmsPage> cmsPageList = cmsPages.getContent();
long totalElements = cmsPages.getTotalElements();
queryResult.setTotal(totalElements);
queryResult.setList(cmsPageList);
return new QueryResponseResult(CommonCode.SUCCESS,queryResult);
}
}
優化Controller:
@Override
@GetMapping("/list/{page}/{size}")
public QueryResponseResult findList(@PathVariable("page") int page,@PathVariable("size") int size, QueryPageRequest queryPageRequest) {
return pageService.findList(page,size,queryPageRequest);
}
Service整合成功：
6.6 接口開發規範
6.6.1 Api請求及響應規範
爲了嚴格按照接口進行開發，提高效率，對請求及響應格式進行規範化。
1、get 請求時，採用key/value格式請求，SpringMVC可採用基本類型的變量接收，也可以採用對象接收。
2、Post請求時，可以提交form表單數據（application/x-www-form-urlencoded）和Json數據（ContentType=application/json），文件等多部件類型（multipart/form-data）三種數據格式，SpringMVC接收Json數據 使用@RequestBody註解解析請求的json數據。 4、響應結果統一信息爲：是否成功、操作代碼、提示信息及自定義數據。
5、響應結果統一格式爲json
6.6.2 Api定義約束
Api定義使用SpringMVC來完成，由於此接口後期將作爲微服務遠程調用使用，在定義接口時有如下限制： 1、@PathVariable 統一指定參數名稱，如：@PathVariable("id") 2、@RequestParam統一指定參數名稱，如： @RequestParam（"id")
7 頁面查詢接口測試
上邊的代碼是基於服務端編寫接口，如果前端人員等待服務端人員將接口開發完畢再去開發前端內容這樣做效率是 非常低下的，所以當接口定義完成，可以使用工具生成接口文檔，前端人員查看接口文檔即可進行前端開發，這樣 前端和服務人員並行開發，大大提高了生產效率。
本章節介紹兩種接口開發工具，Swagger和Postman。 7.1 Swagger
7.1.1 Swagger介紹
OpenAPI規範（OpenAPI Specification 簡稱OAS）是Linux基金會的一個項目，試圖通過定義一種用來描述API格 式或API定義的語言，來規範RESTful服務開發過程，目前版本是V3.0，並且已經發布並開源在github上。
（https://github.com/OAI/OpenAPI-Specification） Swagger是全球最大的OpenAPI規範（OAS）API開發工具框架，支持從設計和文檔到測試和部署的整個API生命周 期的開發。 (https://swagger.io/)
Spring Boot 可以集成Swagger，生成Swagger接口，Spring Boot是Java領域的神器，它是Spring項目下快速構建 項目的框架。
7.1.2 Swagger常用註解
在Java類中添加Swagger的註解即可生成Swagger接口，常用Swagger註解如下：
@Api：修飾整個類，描述Controller的作用 @ApiOperation：描述一個類的一個方法，或者說一個接口 @ApiParam：單個參數描述 @ApiModel：用對象來接收參數 @ApiModelProperty：用對象接收參數時，描述對 象的一個字段 @ApiResponse：HTTP響應其中1個描述 @ApiResponses：HTTP響應整體描述 @ApiIgnore：使用 該註解忽略這個API @ApiError ：發生錯誤返回的信息 @ApiImplicitParam：一個請求參數 @ApiImplicitParams：多個請求參數
@ApiImplicitParam屬性：
7.1.3 Swagger接口定義
修改接口工程中頁面查詢接口，添加Swagger註解。
開始定義Swagger參數，方法和其對應的類
@Api(value="cms頁面管理接口",description="cms頁面管理接口，提供頁面的增、刪、改、查")
public interface CmsPageControllerApi {
@ApiOperation("分頁查詢頁面列表")
@ApiImplicitParams({@ApiImplicitParam(name="page",value="頁 碼",required=true,paramType="path",dataType="int"),
@ApiImplicitParam(name="size",value="每頁記錄 數",required=true,paramType="path",dataType="int")})
//此接口編寫後會在CMS服務工程編寫Controller類實現此接口。頁面查詢
public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest);
}
public class QueryPageRequest {
//定義請求模型QueryPageRequest，此模型作爲查詢條件類型
@ApiModelProperty("站點id")
private String siteId; //站點id
@ApiModelProperty("頁面ID")
private String pageId; //頁面ID
@ApiModelProperty("頁面名稱")
private String pageName; //頁面名稱
@ApiModelProperty("別名")
private String pageAliase; //別名
@ApiModelProperty("模版id")
private String templateId; //模版id
}
完成測試
POSTMan測試
今日總結：
總的來說這個學成在線的項目和之前的樂友相比，更加接近基礎，其實個人感覺做項目就是不斷夯實基礎的過程，推翻原來的認知，Get到新的知識點，之前用的新技術很多，但是總部知道爲什麼用這個技術，所以還是的需要不斷的去嘗試，不斷的總結，基礎還是非常重要的，只有基礎打實了，學技術纔會學的更加的的心應手