侯俐　姚李岳　鄒家肴

摘要：隨著web技術高速發(fā)展，組件化與服務端渲染的web實現(xiàn)技術正在成為內(nèi)容管理系統(tǒng)（CMS）的發(fā)展方向之一。該文將以組件化與服務端渲染的web實現(xiàn)的設計和原理為核心，對組件、組件設計、組件的web實現(xiàn)，服務端渲染，以及整體的CMS系統(tǒng)的構建進行闡述。研究基于組件化與服務端渲染的動態(tài)內(nèi)容管理系統(tǒng)的設計與實現(xiàn)過程。

關鍵詞：內(nèi)容管理系統(tǒng);動態(tài);組件化;服務端渲染

中圖分類號：TP319 文獻標識碼：A

文章編號：1009-3044（2020）09-0068-03

1 引言

便利化和實用化是當前大部分的動態(tài)內(nèi)容管理系統(tǒng)的發(fā)展趨勢，并且除了對用戶體驗進行更高的優(yōu)化，在開發(fā)方面也出現(xiàn)了兩種相對新型的開發(fā)理念;1）實現(xiàn)客戶端界面的組件式開發(fā)。2）將動態(tài)客戶端界面進行服務端渲染再進行傳輸。 本系統(tǒng)的客戶端組件開發(fā)主要源于web開發(fā)中的組件開發(fā)思想，其通過將復雜的大中型應用進行劃分，同時對每個劃分的小型界面和功能代碼進行組件化，使得其相對獨立其通常可復用，并且可以進行組件的嵌套和信息交流，從而實現(xiàn)高效的開發(fā)和便利的管理。

而服務端渲染（ SSR：server side render）則是為組件化頁面服務并且基于webpack、vue.js、node.js等技術的一項綜合性技術，其將組件或組件頁面通過服務器生成html，再發(fā)送到瀏覽器，進而它將更利于頁面的SEO，并且減少網(wǎng)頁的首屏渲染時間，同時減輕客戶端的運行負擔，可使客戶端更加順暢地運行。

2 系統(tǒng)開發(fā)模式的選擇

2.1 系統(tǒng)開發(fā)模式的確定

在現(xiàn)有的web頁面的組件開發(fā)系統(tǒng)中，vue.Js是當前最熱門的開發(fā)系統(tǒng)。它作為一套構建用戶界面的漸進式框架，有著白底向上逐層應用，只關注圖層等特點。組件系統(tǒng)是Vue的另一個重要概念，組件將允許使用小型、獨立和通?？蓮陀玫慕M件構建大型應用，使開發(fā)更易管理，并且減少代碼的冗余，精簡系統(tǒng)的開發(fā)過程，減少重復功能的開發(fā)。

2.2 系統(tǒng)架構和開發(fā)環(huán)境

本系統(tǒng)選用基礎的B/C開發(fā)模式，提高系統(tǒng)的靈活性和便利性，并且通過web端的UI提高用戶體驗以及通過HTTPS進行數(shù)據(jù)內(nèi)容的高效傳輸。

服務器硬件部署環(huán)境是centos7.0操作系統(tǒng)，cpu高于奔騰G5500，內(nèi)存在1G以上;軟件部署使用node.js和nglnx;數(shù)據(jù)庫則使用mongodb對lson進行存儲，文件數(shù)據(jù)則使用node.js的Ex-press實現(xiàn)存儲;通用程序開發(fā)語言采用JavaScript進行編寫。

3 系統(tǒng)功能設計

3.1 系統(tǒng)模塊劃分

按照功能需求不同，本動態(tài)內(nèi)容管理系統(tǒng)的服務端模塊分為數(shù)據(jù)錄入模塊、數(shù)據(jù)查詢模塊、數(shù)據(jù)操作模塊、請求認證模塊、文件上傳模塊、文件生成模塊，用戶信息管理模塊等。

3.2 數(shù)據(jù)錄入模塊設計

本系統(tǒng)將使用npm依賴中的mongodb包所包含的mongo-client對象進行數(shù)據(jù)庫的鏈接和操作，并且JavaScript作為弱類型的語言，從而實現(xiàn)數(shù)據(jù)操作的多樣性和可變性。利用數(shù)據(jù)庫對象中的coUection函數(shù)可獲取所需的存儲數(shù)據(jù)，并且轉換為JavaScript數(shù)組，從而可直接對前臺服務器中的vuex數(shù)據(jù)進行對比和處理。服務端可以通過客戶端瀏覽器http傳人記錄數(shù)據(jù)，并且通過token進行數(shù)據(jù)認證，確認數(shù)據(jù)的安全性再通過mongoclient對象實現(xiàn)錄入，詳細過程如下：1）客戶端瀏覽器創(chuàng)建http請求并傳輸加密數(shù)據(jù)。2）服務端接收鏈接數(shù)據(jù)并判斷用戶公開數(shù)據(jù)是否合法，再對加密數(shù)據(jù)進行驗證。3）將請求過程中生成的mongoclient對象進行對應的錄入操作。4）關閉數(shù)據(jù)庫。5）關閉請求，并傳回錄入結果。

3.3 數(shù)據(jù)查詢模塊設計

本模塊作為整個系統(tǒng)的功能實現(xiàn)工具，應用于各個請求處理的編寫中。主要的實現(xiàn)方式依然還是通過對獲得的JavaS-cript數(shù)組或者對象進行檢索和匹配操作。以下是整體系統(tǒng)中模塊的對應運用：1）按照對應頁面id檢索并返回其的表單內(nèi)容Json對象。2）按用戶查詢文字對表單數(shù)據(jù)進行模糊查找，并展現(xiàn)在列表之中。3）按照對應可見列id檢索并展示用戶所選定或更改后的已選列和候選列。4）按照對應頁面id獲取對應的已選列的順序數(shù)組，并展示在界面中。5）按照對應頁面id獲取對應的定義的動態(tài)字段信息，并展示在頁面之中

3.4 數(shù)據(jù)操作模塊設計

為了進行整體的內(nèi)容展示，本系統(tǒng)的數(shù)據(jù)獲取將會對查詢獲取的數(shù)據(jù)進行整合操作后再傳到客戶端，并且在用戶進行數(shù)據(jù)更改保存時，也需要將傳人的數(shù)據(jù)進行操作后再傳人數(shù)據(jù)庫中，因此此模塊為本系統(tǒng)功能的核心實現(xiàn)模塊

1）對獲取json數(shù)據(jù)進行處理

①用戶登錄信息處理：

在瀏覽器傳輸給系統(tǒng)的數(shù)據(jù)中，系統(tǒng)將代表用戶登錄信息的信息進行提取，并且通過獲取數(shù)據(jù)庫數(shù)據(jù)確認用戶是否存在。再將數(shù)據(jù)庫獲取的用戶密碼進行token加密，同傳人用戶密碼（已經(jīng)加密）進行比較，從而進行登錄認證。

②表單內(nèi)容獲取處理：

在通過認證之后，客戶端將獲取數(shù)據(jù)庫中表單的對應內(nèi)容。再按照用戶類型對獲取內(nèi)容進行過濾和分割，產(chǎn)生對應用戶類型所需的數(shù)據(jù)

③表單列屬性信息獲取處理：

除了單純獲取數(shù)據(jù)庫中所存的表單列屬性，本系統(tǒng)還提供默認列屬性（如：填寫時間，審核狀態(tài)等）的自動加入

④動態(tài)字段信息獲取處理：

在管理員對其創(chuàng)建的表單動態(tài)字段進行管理時，系統(tǒng)會自動獲取其設定動態(tài)字段填寫信息詳細，但同時會提供默認信息（如：表單標題，表單創(chuàng)建時間）的自動加入，從而在客戶端展現(xiàn)完整的動態(tài)表單字段的編輯界面

2）對傳人Json數(shù)據(jù)進行分割比較處理

①用戶注冊信息處理：

系統(tǒng)將對用戶提交的注冊信息進行分割處理，提取其中的注冊用戶名和密碼，在同庫中數(shù)據(jù)進行比較并且確認數(shù)據(jù)合法后再插入數(shù)據(jù)庫。

②表單內(nèi)容更改處理：

在通過請求認證之后，系統(tǒng)將會把用戶填寫的表單內(nèi)容從提交數(shù)據(jù)中進行提取，并按照管理員設置的規(guī)則進行更改并保存于數(shù)據(jù)庫。

3）對文件數(shù)據(jù)進行處理

除了對表單動態(tài)內(nèi)容進行管理和填寫，本模塊同時也提供了文件的傳人提取，列表文件（Excel）生成下載功能，從而需要對接收的文件數(shù)據(jù)進行格式規(guī)范化，同時也要阻攔不合法文件的上傳等。

3.5 請求認證模塊設計

為了保證用戶請求的安全和唯一性，系統(tǒng)將整個請求系統(tǒng)分為兩個步驟：

1）登錄獲取用戶加密cookie：

在用戶成功進行登錄后，后臺會將對應此用戶的加密cookie傳回客戶端瀏覽器，并在用戶進入主頁進行操作請求時，將其傳回服務端

2）對請求進行服務端認證：

依照請求中傳回的用戶信息和加密cookie和數(shù)據(jù)庫進行對比。如合法，則傳回對應請求所需數(shù)據(jù)，否則，提示錯誤，并轉回登錄頁。

3.6 文件上傳模塊設計

在對動態(tài)字段進行添加時，本系統(tǒng)將支持文件的上傳，其將包括以下功能：1）多文件上傳功能。2）文件中途取消上傳功能。3）文件接收后，可進行文件的查看和下載。4）對不合法的文件進行濾除并提示用戶。

3.7 文件生成模塊設計

管理員除了對系統(tǒng)中的表單內(nèi)容進行操作外，本系統(tǒng)還提供相關文件的生成，以輔助管理員對整體數(shù)據(jù)的管理，其將包括以下功能：1）生成對應動態(tài)表單內(nèi)容的excel文件。2）生成管理員對應管理用戶的信息文件。3）生成管理員對應管理用戶的信息文件。4）生成整體管理員的信息文件。

3.8 用戶信息管理模塊

本系統(tǒng)將用戶分為普通用戶和管理員兩種，而只有管理員對本模塊有訪問權限，并且有著基礎的操作權限，其將包括以下功能：1）普通用戶的賬號信息的查看和編輯。2）管理員的賬號信息的查看和編輯。3）對管理員的權限查看和更改。

4 界面設計

作為組件化的B/C系統(tǒng)頁面，本系統(tǒng)的界面為單頁面應用（SPA），將組件化的頁面進行整合，實現(xiàn)頁面上的簡潔明了，這里我們將以管理員表單頁面作為例子進行簡要介紹。管理員表單頁面分為三個子頁面，分別是內(nèi)容列表頁面，可見列編輯頁面和動態(tài)字段編輯頁面。

分別對應著表單內(nèi)容編輯，表單列屬性編輯，和表單字段編輯的功能。管理員將能進行表單內(nèi)容的查看、審核和編輯，表單列的編輯，表單字段的添加、刪除和更改。內(nèi)容列表頁面包含著表單欄和操作欄，操作欄有著以下功能：表單添加、編輯、審核、移除、表單內(nèi)容文件生成和下載。可見列編輯頁面包含著表單可見列選擇欄和已選列的排序欄。動態(tài)字段編輯頁面既包含著表單字段的添加欄和已添加字段的詳細編輯欄，用于對動態(tài)表單進行詳細的編輯

在進行數(shù)據(jù)庫操作時，界面應依照系統(tǒng)返回的提交情況進行對應的提示，對錯誤或未成功的提交進行警告，確保數(shù)據(jù)的正確性和完整性。

5 結束語

通過對組件化與服務端渲染和處理的研究，詳細介紹了整個系統(tǒng)的研究對象、開發(fā)方式以及系統(tǒng)的整體設計，并通過組件及相關技術實現(xiàn)各模塊的功能。同時，在我校創(chuàng)新創(chuàng)業(yè)中心進行了系統(tǒng)主界面測試，表單修改填寫測試等功能性測試，并且投入正常使用，預計在后期進行高并發(fā)等問題研究。

參考文獻：

[1] YouYuXi.Vue.js Server-Side Rendering Guide[EB/OL]. （2018-05- 15）.https：//s sr.vuej s.org/en/.

[2] Wi：kipedia.Node.js[EB/OLl. （2018-05-19）.https：//zh.wikipedia.org/wiki/Node.js.

【通聯(lián)編輯：朱寶貴】

基金項目：國家級大學生研究性學習和創(chuàng)新性項目“基于組件化與服務端渲染的動態(tài)內(nèi)容管理系統(tǒng)”（ 201811535010）

作者簡介：侯俐（1982-），女，湖南株洲人，講師，碩士，主要研究方向為軟件體系結構、智能化軟件新技術;通訊作者：姚李岳（1998一），男，湖南岳陽人，本科在讀，主要研究方向為軟件工程，算法設計等。