基于組件化與服務端渲染的動態內容管理系統

侯俐　姚李岳　鄒家肴

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

關鍵詞：內容管理系統;動態;組件化;服務端渲染

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

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

1 引言

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

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

2 系統開發模式的選擇

2.1 系統開發模式的確定

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

2.2 系統架構和開發環境

本系統選用基礎的B/C開發模式，提高系統的靈活性和便利性，并且通過web端的UI提高用戶體驗以及通過HTTPS進行數據內容的高效傳輸。

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

3 系統功能設計

3.1 系統模塊劃分

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

3.2 數據錄入模塊設計

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

3.3 數據查詢模塊設計

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

3.4 數據操作模塊設計

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

1）對獲取json數據進行處理

①用戶登錄信息處理：

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

②表單內容獲取處理：

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

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

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

④動態字段信息獲取處理：

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

2）對傳人Json數據進行分割比較處理

①用戶注冊信息處理：

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

②表單內容更改處理：

在通過請求認證之后，系統將會把用戶填寫的表單內容從提交數據中進行提取，并按照管理員設置的規則進行更改并保存于數據庫。

3）對文件數據進行處理

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

3.5 請求認證模塊設計

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

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

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

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

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

3.6 文件上傳模塊設計

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

3.7 文件生成模塊設計

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

3.8 用戶信息管理模塊

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

4 界面設計

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

分別對應著表單內容編輯，表單列屬性編輯，和表單字段編輯的功能。管理員將能進行表單內容的查看、審核和編輯，表單列的編輯，表單字段的添加、刪除和更改。內容列表頁面包含著表單欄和操作欄，操作欄有著以下功能：表單添加、編輯、審核、移除、表單內容文件生成和下載?？梢娏芯庉嬳撁姘韱慰梢娏羞x擇欄和已選列的排序欄。動態字段編輯頁面既包含著表單字段的添加欄和已添加字段的詳細編輯欄，用于對動態表單進行詳細的編輯

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

5 結束語

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

參考文獻：

[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.

【通聯編輯：朱寶貴】

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

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