侯俐　姚李岳　鄒家肴

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

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

中圖分類(lèi)號(hào)：TP319 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）09-0068-03

1 引言

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

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

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

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

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

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

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

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

3 系統(tǒng)功能設(shè)計(jì)

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

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

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

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

3.3 數(shù)據(jù)查詢(xún)模塊設(shè)計(jì)

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

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

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

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

①用戶(hù)登錄信息處理：

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

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

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

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

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

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

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

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

①用戶(hù)注冊(cè)信息處理：

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

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

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

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

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

3.5 請(qǐng)求認(rèn)證模塊設(shè)計(jì)

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

1）登錄獲取用戶(hù)加密cookie：

在用戶(hù)成功進(jìn)行登錄后，后臺(tái)會(huì)將對(duì)應(yīng)此用戶(hù)的加密cookie傳回客戶(hù)端瀏覽器，并在用戶(hù)進(jìn)入主頁(yè)進(jìn)行操作請(qǐng)求時(shí)，將其傳回服務(wù)端

2）對(duì)請(qǐng)求進(jìn)行服務(wù)端認(rèn)證：

依照請(qǐng)求中傳回的用戶(hù)信息和加密cookie和數(shù)據(jù)庫(kù)進(jìn)行對(duì)比。如合法，則傳回對(duì)應(yīng)請(qǐng)求所需數(shù)據(jù)，否則，提示錯(cuò)誤，并轉(zhuǎn)回登錄頁(yè)。

3.6 文件上傳模塊設(shè)計(jì)

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

3.7 文件生成模塊設(shè)計(jì)

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

3.8 用戶(hù)信息管理模塊

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

4 界面設(shè)計(jì)

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

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

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

5 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

[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)編輯：朱寶貴】

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

作者簡(jiǎn)介：侯俐（1982-），女，湖南株洲人，講師，碩士，主要研究方向?yàn)檐浖w系結(jié)構(gòu)、智能化軟件新技術(shù);通訊作者：姚李岳（1998一），男，湖南岳陽(yáng)人，本科在讀，主要研究方向?yàn)檐浖こ?，算法設(shè)計(jì)等。