朱軒　崔曉慧

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

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

中圖分類號：TP311.52 文獻(xiàn)標(biāo)志碼：A 文章編號：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ā)展的必然趨勢，而企業(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)站開發(fā)建設(shè)常見的技術(shù)手段之一，深受企業(yè)信息化建設(shè)管理人員的喜愛。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⑴ 媒體查詢技術(shù)

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

⑵ 彈性布局技術(shù)

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

⑶ 頁面生成技術(shù)

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

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

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

5 結(jié)束語

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

參考文獻(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)頁生成系統(tǒng)研究與實(shí)現(xiàn)[J].軟件，2015.36（6）：37-41

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

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

[5] 尹航，詹舒波.基于配置文件的Web頁面自動生成系統(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