基于.NET技術(shù)的CMS響應(yīng)式頁(yè)面生成系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

朱軒　崔曉慧

摘 要： 為了適應(yīng)當(dāng)前移動(dòng)互聯(lián)網(wǎng)絡(luò)對(duì)“Web響應(yīng)式網(wǎng)頁(yè)”功能的需求，提出開(kāi)發(fā)基于.NET技術(shù)平臺(tái)的CMS響應(yīng)式頁(yè)面生成系統(tǒng)。采用響應(yīng)式模板布局技術(shù)，結(jié)合C#程序開(kāi)發(fā)語(yǔ)言，實(shí)現(xiàn)響應(yīng)式頁(yè)面生成功能，使生成的頁(yè)面能自動(dòng)適應(yīng)不同終端設(shè)備的尺寸，提高企業(yè)Web管理平臺(tái)的適應(yīng)性和擴(kuò)展性。

關(guān)鍵詞： 響應(yīng)式設(shè)計(jì)； ASP.NET； CMS內(nèi)容管理系統(tǒng)； 靜態(tài)網(wǎng)頁(yè)

中圖分類號(hào)：TP311.52 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2016）08-62-03

Abstract： In order to meet the needs of the current mobile Internet for the "Web responsive page"， a CMS （Content Management System） response page generation system on .NET platform is proposed. Using response template layout technology， combining with C# programming language， the response page generation function is realized， which makes the generated pages to automatically adapt to the size of the different terminal devices， and improves the adaptability and scalability of the enterprise Web management platform.

Key words： responsive design； ASP.NET； content management system； static pages

0 引言

隨著網(wǎng)絡(luò)技術(shù)和通信技術(shù)的不斷發(fā)展，信息化建設(shè)成為現(xiàn)代企業(yè)發(fā)展的必然趨勢(shì)，而企業(yè)網(wǎng)站作為宣傳企業(yè)產(chǎn)品，提升企業(yè)形象的重要載體，成為企業(yè)信息化建設(shè)的重點(diǎn)。CMS內(nèi)容管理系統(tǒng)以其使用方便、建設(shè)速度快、管理方便等優(yōu)點(diǎn)[1]，成為企業(yè)網(wǎng)站開(kāi)發(fā)建設(shè)常見(jiàn)的技術(shù)手段之一，深受企業(yè)信息化建設(shè)管理人員的喜愛(ài)。

然而，當(dāng)前大多數(shù)CMS系統(tǒng)還是采用傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，生成的頁(yè)面只適用于電腦端[2]。而隨著互聯(lián)移動(dòng)技術(shù)的飛速發(fā)展，越來(lái)越多的企業(yè)將信息化建設(shè)的重點(diǎn)轉(zhuǎn)向了移動(dòng)Web應(yīng)用[3]，由于傳統(tǒng)網(wǎng)頁(yè)技術(shù)不能很好的適應(yīng)移動(dòng)設(shè)備，導(dǎo)致用戶在用PC和移動(dòng)設(shè)備訪問(wèn)網(wǎng)站時(shí)，感覺(jué)有很大的差異和不一致性[4]，因此設(shè)計(jì)具有“響應(yīng)式Web設(shè)計(jì)”[5]功能的CMS系統(tǒng)是解決網(wǎng)頁(yè)適應(yīng)性問(wèn)題的一個(gè)有效方法。

1 系統(tǒng)總體設(shè)計(jì)

CMS響應(yīng)式頁(yè)面生成系統(tǒng)是根據(jù)“響應(yīng)式Web設(shè)計(jì)”理念開(kāi)發(fā)的內(nèi)容生成系統(tǒng)，采用MVC設(shè)計(jì)思想，利用ASP.NET自定義三層技術(shù)框架，實(shí)現(xiàn)系統(tǒng)數(shù)據(jù)訪問(wèn)功能，在視圖部分采用HTML5+CSS3、Ajax+Jquery等技術(shù)為用戶提供良好的響應(yīng)式交互。系統(tǒng)主要分為模型層、數(shù)據(jù)訪問(wèn)層、業(yè)務(wù)邏輯層、控制層和視圖層，利用c#進(jìn)行框架設(shè)計(jì)，系統(tǒng)架構(gòu)設(shè)計(jì)圖如圖1所示。

⑴ 模型層：用于處理應(yīng)用程序的數(shù)據(jù)邏輯，將數(shù)據(jù)庫(kù)中表的字段通過(guò)對(duì)象關(guān)系映射到應(yīng)用程序的數(shù)據(jù)邏輯中，定義為實(shí)體類對(duì)象，實(shí)現(xiàn)數(shù)據(jù)庫(kù)與應(yīng)用程序之間的分離，便于開(kāi)發(fā)者完成對(duì)數(shù)據(jù)庫(kù)的操作。

⑵ 數(shù)據(jù)訪問(wèn)層：主要面向原始數(shù)據(jù)的操作，是業(yè)務(wù)邏輯層數(shù)據(jù)的具體實(shí)現(xiàn)。該層將數(shù)據(jù)操作的方法進(jìn)行封裝，并以接口的形式提供給業(yè)務(wù)邏輯層進(jìn)行服務(wù)，保證數(shù)據(jù)庫(kù)操作的安全性，數(shù)據(jù)訪問(wèn)層主要通過(guò)ADO.NET技術(shù)實(shí)現(xiàn)。

⑶ 業(yè)務(wù)邏輯層：用于對(duì)業(yè)務(wù)邏輯的應(yīng)用進(jìn)行處理，它是系統(tǒng)的核心部分。其中純業(yè)務(wù)邏輯負(fù)責(zé)對(duì)業(yè)務(wù)緊密相關(guān)的邏輯進(jìn)行處理，包括業(yè)務(wù)的調(diào)度模塊和邏輯接口；非純業(yè)務(wù)邏輯用于處理系統(tǒng)用戶權(quán)限、訪問(wèn)日志、事務(wù)管理等非業(yè)務(wù)方面的邏輯處理。

⑷ 控制層：是連接模型和視圖之間的橋梁，其中控制器用于接收用戶請(qǐng)求數(shù)據(jù)并調(diào)用模型和視圖滿足用戶的請(qǐng)求；過(guò)濾器是在控制器接收數(shù)據(jù)后，完成數(shù)據(jù)編碼轉(zhuǎn)化、數(shù)據(jù)加密、身份驗(yàn)證、日志記錄等工作；輔助訪問(wèn)類用于對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行解析，協(xié)助獲取業(yè)務(wù)邏輯對(duì)象的方法，完善整個(gè)控制層功能。

⑸ 視圖層：是用戶訪問(wèn)系統(tǒng)的前端接口，主要由Web頁(yè)面組成。在系統(tǒng)中，視圖層主要通過(guò)HTML5+CSS3、Ajax+ Jquery等技術(shù)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)功能，完成系統(tǒng)的頁(yè)面顯示操作。

2 系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

根據(jù)企業(yè)對(duì)CMS響應(yīng)式頁(yè)面生成系統(tǒng)的應(yīng)用需求，系統(tǒng)功能結(jié)構(gòu)主要分為系統(tǒng)管理模塊、模板編輯模塊和頁(yè)面生成模塊三個(gè)部分，如圖2所示。

⑴ 系統(tǒng)管理模塊：用于實(shí)現(xiàn)對(duì)系統(tǒng)運(yùn)行維護(hù)的基本管理操作，保障系統(tǒng)的正常運(yùn)行。通過(guò)設(shè)置用戶和管理員賬號(hào)，分配用戶權(quán)限，屏蔽非法用戶和非權(quán)限用戶對(duì)系統(tǒng)的惡意訪問(wèn)和更改，保證系統(tǒng)運(yùn)行的安全性和數(shù)據(jù)庫(kù)數(shù)據(jù)的完整性。

⑵ 模板編輯模塊：用于設(shè)置系統(tǒng)生成的欄目信息和模板文件。在欄目管理中，通過(guò)設(shè)置欄目信息和欄目導(dǎo)航信息，確定生成頁(yè)面的欄目?jī)?nèi)容和跳轉(zhuǎn)頁(yè)面；在模板管理中，使用模板標(biāo)簽對(duì)模板進(jìn)行編輯和修改來(lái)改變頁(yè)面顯示的樣式和內(nèi)容，并與欄目進(jìn)行綁定，用以生成網(wǎng)站運(yùn)行所需列表頁(yè)、內(nèi)容頁(yè)和動(dòng)態(tài)頁(yè)等多種類型網(wǎng)頁(yè)。

⑶ 頁(yè)面生成模塊：用于錄入頁(yè)面的內(nèi)容信息，并實(shí)現(xiàn)靜態(tài)化頁(yè)面的生成。管理人員在內(nèi)容管理中實(shí)現(xiàn)對(duì)生成網(wǎng)頁(yè)文字、圖像、動(dòng)畫(huà)、音頻和視頻等元素的編輯，并設(shè)置頁(yè)面的生成路徑；在生成頁(yè)面中可以對(duì)系統(tǒng)中設(shè)置所需生成的靜態(tài)化頁(yè)面進(jìn)行生成，生成時(shí)可以按照網(wǎng)頁(yè)類型，選擇分類批量生成列表頁(yè)、內(nèi)容頁(yè)、動(dòng)態(tài)頁(yè)和聚合頁(yè)等靜態(tài)化頁(yè)面。

3 系統(tǒng)構(gòu)建

CMS響應(yīng)式頁(yè)面生成系統(tǒng)采用Visual Studio 2010開(kāi)發(fā)環(huán)境，使用SQL Server2008數(shù)據(jù)庫(kù)，利用IIS作為系統(tǒng)的Web服務(wù)器，后臺(tái)開(kāi)發(fā)語(yǔ)言主要為C#，前端主要是Ajax+Jquery腳本語(yǔ)言。其中后臺(tái)主要包括模板編輯和綁定，靜態(tài)頁(yè)編輯和生成等功能，如圖3所示，前臺(tái)主要用于進(jìn)行響應(yīng)式的顯示，如圖4所示。

4 關(guān)鍵技術(shù)

⑴ 媒體查詢技術(shù)

為了使頁(yè)面能夠響應(yīng)不同設(shè)備的尺寸，在模板網(wǎng)頁(yè)的元信息meta標(biāo)簽中添加media query語(yǔ)句項(xiàng)，設(shè)置網(wǎng)頁(yè)寬度為“device-width”（屏幕寬度），原始縮放比例為“1.0”，使瀏覽器根據(jù)媒體設(shè)備類型渲染頁(yè)面[6]。

⑵ 彈性布局技術(shù)

在CSS3文件中，通過(guò)@media規(guī)則設(shè)置不同寬度屏幕下使用的CSS樣式，使網(wǎng)頁(yè)能夠根據(jù)不同設(shè)備尺寸使用不同的CSS樣式，同時(shí)利用在max-height、max-width等CSS屬性中設(shè)置百分比的值，使得網(wǎng)頁(yè)元素能夠根據(jù)設(shè)備尺寸進(jìn)行彈性調(diào)整。

⑶ 頁(yè)面生成技術(shù)

頁(yè)面生成技術(shù)是系統(tǒng)的核心功能，其中靜態(tài)文件生成是通過(guò)調(diào)用Directory對(duì)象和File對(duì)象實(shí)現(xiàn)，靜態(tài)文件內(nèi)容的添加通過(guò)調(diào)用StreamWriter對(duì)象的Write方法實(shí)現(xiàn)。

⑷ ADO.NET訪問(wèn)技術(shù)

ADO.NET用于實(shí)現(xiàn)對(duì)SQL數(shù)據(jù)庫(kù)中數(shù)據(jù)的訪問(wèn)，其中SqlConnection對(duì)象用于實(shí)現(xiàn)與SQL數(shù)據(jù)庫(kù)的連接，SqlCommand對(duì)象用于實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)中數(shù)據(jù)的具體操作，所有對(duì)象的方法都封裝在DBHelper類中，便于業(yè)務(wù)邏輯層函數(shù)的訪問(wèn)和調(diào)用。

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

基于.NET的CMS響應(yīng)式頁(yè)面生成系統(tǒng)中的媒體查詢技術(shù)和彈性布局技術(shù)，有效地解決了傳統(tǒng)網(wǎng)頁(yè)技術(shù)不能適應(yīng)移動(dòng)端設(shè)備的問(wèn)題，保障了用戶利用不同設(shè)備訪問(wèn)網(wǎng)站的良好體驗(yàn)；同時(shí)頁(yè)面生成技術(shù)使得管理人員無(wú)需進(jìn)行網(wǎng)頁(yè)編碼，簡(jiǎn)化了維護(hù)工作，節(jié)省了開(kāi)發(fā)成本。該系統(tǒng)已經(jīng)在常州科威天使有限公司、常州五洋紡織有限公司等企業(yè)中進(jìn)行使用，得到了較好的評(píng)價(jià)。因此，CMS響應(yīng)式頁(yè)面生成系統(tǒng)的開(kāi)發(fā)符合移動(dòng)網(wǎng)絡(luò)技術(shù)發(fā)展的新需求，為企業(yè)信息化建設(shè)提供了新的技術(shù)支撐平臺(tái)。

參考文獻(xiàn)（References）：

[1] 林曉峰.CMS系統(tǒng)模型的建立與應(yīng)用[J].軟件工程師，2015.18（8）：51-52

[2] 臧進(jìn)進(jìn)，鄂海紅.基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)生成系統(tǒng)研究與實(shí)現(xiàn)[J].軟件，2015.36（6）：37-41

[3] 廖黎莉，邵亦秋，郭翠珍.基于響應(yīng)式Web設(shè)計(jì)的CMS頁(yè)面生成機(jī)制的實(shí)現(xiàn)研究[J].電腦編程與技巧維護(hù)，2015.22：5-11

[4] 張樹(shù)明.基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化，2013.6：125-127

[5] 尹航，詹舒波.基于配置文件的Web頁(yè)面自動(dòng)生成系統(tǒng)[J].軟件，2014.35（10）：117-121

[6] FRAIN B.響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)[M].人民郵電出版社，2013：156-157