趙文科+種蘭祥+楊建鋒

摘 要：當(dāng)前大部分高校使用的內(nèi)容管理系統(tǒng)無法很好地同時支持PC版、WAP版和手機APP版，通常這三個版本采用三套獨立的管理系統(tǒng)，內(nèi)容建設(shè)維護成本高，內(nèi)容信息在各版本之間共享困難且較難與微信公眾號和微博對接。本文提出一種基于HTML5頁面自適應(yīng)和APP打包等技術(shù)的多終端一體化內(nèi)容管理系統(tǒng)架構(gòu)，基于該架構(gòu)實現(xiàn)的內(nèi)容管理系統(tǒng)在西北大學(xué)中投入使用并實現(xiàn)對50個院系網(wǎng)站的管理，大大降低了內(nèi)容管理系統(tǒng)建設(shè)及維護成本，較好地實現(xiàn)對各類終端的支持，對其他高校具有實際參考價值。

關(guān)鍵詞：多終端；多站點；內(nèi)容管理系統(tǒng)；Ionic

中圖分類號：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號：1673-8454（2017）15-0059-04

一、引言

據(jù)中國互聯(lián)網(wǎng)信息中心《第37次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》顯示：截至2015年12月，中國網(wǎng)民規(guī)模達(dá)6.88億，其中手機網(wǎng)民規(guī)模達(dá)6.20 億，占總量的90.1%。[1]而截至2016 年 6 月（第38次），中國網(wǎng)民規(guī)模達(dá)7.10億，其中手機網(wǎng)民規(guī)模達(dá)6.56億，占總量的 92.5%。移動網(wǎng)民數(shù)量巨大，所占比例也在增長。而高校的信息發(fā)布系統(tǒng)大多仍停留在PC端，為了實現(xiàn)基于移動端的訪問，往往會另行購買移動版系統(tǒng)，網(wǎng)站建設(shè)成本增大。同時，隨著移動終端和網(wǎng)絡(luò)的發(fā)展，出現(xiàn)了各種移動端技術(shù)，比如專注于PC和移動自適應(yīng)的框架Bootstrap、打包HTML5應(yīng)用的Cordova等。本文利用上述技術(shù)，設(shè)計了一套內(nèi)容管理系統(tǒng)，實現(xiàn)了多站點信息統(tǒng)一發(fā)布，并且信息一次發(fā)布即可同時在PC、WAP、客戶端瀏覽。

當(dāng)今高校的內(nèi)容管理系統(tǒng)具有同一性，即每個內(nèi)容管理系統(tǒng)的功能相近，結(jié)構(gòu)一致。并且往往一所高校不止使用一個內(nèi)容管理系統(tǒng)，包括高校主站和其各下級單位，經(jīng)常使用不同的系統(tǒng)。使用傳統(tǒng)的內(nèi)容管理系統(tǒng)不僅管理不便，而且大多在移動端都沒有良好的效果。

現(xiàn)階段，國內(nèi)外已經(jīng)有很多成熟的內(nèi)容管理系統(tǒng)，而且有很多開源版的系統(tǒng)免費使用，如國外的Wordpress、 Drupal，國內(nèi)的OneThink等。但開源版為兼容性考慮，大多功能有限，需要二次定制開發(fā)。而單獨開發(fā)系統(tǒng)成本會比較大。

二、多終端內(nèi)容管理系統(tǒng)設(shè)計

1.目標(biāo)

通過對高?，F(xiàn)有的內(nèi)容管理系統(tǒng)和預(yù)期的結(jié)果分析，系統(tǒng)需要實現(xiàn)的主要功能有：一是多終端的內(nèi)容瀏覽，包括PC端、WAP端和APP端；二是多站點的內(nèi)容發(fā)布，站點之間的內(nèi)容應(yīng)該獨立存在；三是多站點的管理。

2.功能設(shè)計

PC/WAP/APP多終端內(nèi)容瀏覽：對于PC和WAP站點而言，需要保證網(wǎng)頁在PC端大屏幕的效果，同時需要兼容手機端瀏覽器的小屏幕瀏覽。而對于APP的內(nèi)容瀏覽，則可以重新設(shè)置效果和布局，使其更接近于手機應(yīng)用。

多站點內(nèi)容發(fā)布：將用戶與站點關(guān)聯(lián)起來，用戶（角色設(shè)置為內(nèi)容發(fā)布者）登錄后可以直接在該用戶所管理的站點發(fā)布文章。

站點管理：網(wǎng)站管理員可以對站點和用戶進行操作，為角色設(shè)置權(quán)限，指定用戶的站點和角色。

3.數(shù)據(jù)庫設(shè)計

由于多站點的支持，系統(tǒng)需要使用多個庫，站點的基礎(chǔ)數(shù)據(jù)庫見圖1（只列出了基本的數(shù)據(jù)表）。每創(chuàng)建一個站點，根據(jù)規(guī)則新建一個庫，保存站點的文章信息和配置信息等，站點數(shù)據(jù)庫見圖2。

4.開發(fā)語言與運行環(huán)境

本系統(tǒng)采用LNMP架構(gòu)，即Linux操作系統(tǒng)，Nginx作為Web服務(wù)器，MariaDB 10.0.26作為數(shù)據(jù)庫，PHP作為開發(fā)語言。PC站的開發(fā)使用傳統(tǒng)的HTML語言，WAP站開發(fā)使用自適應(yīng)的HTML5框架Bootstrap，APP開發(fā)使用Ionic框架，其包含了Cordova打包工具和AngularJS邏輯以及基本的界面。全部使用開源技術(shù)降低了系統(tǒng)開發(fā)的成本，同時提升了系統(tǒng)的擴展性。

5.基本流程說明

PC/WAP網(wǎng)站訪問流程：在PC端或手機端輸入網(wǎng)址后，瀏覽器發(fā)送HTTP請求到服務(wù)器，系統(tǒng)根據(jù)域名獲取站點的ID，創(chuàng)建該站點對應(yīng)的數(shù)據(jù)庫實例，同時系統(tǒng)根據(jù)客戶端的類型判斷PC和WAP站點，分配不同的模板路徑。后臺查詢數(shù)據(jù)之后根據(jù)不同的模板路徑生成HTML文件，返回到客戶端，由客戶端渲染頁面。

APP訪問流程：打開手機應(yīng)用之后，應(yīng)用會檢查網(wǎng)絡(luò)情況，網(wǎng)絡(luò)良好則更新菜單，否則顯示默認(rèn)或緩存的菜單，之后根據(jù)用戶操作向服務(wù)器請求文章列表，系統(tǒng)接受到請求，處理后返回數(shù)據(jù)，手機應(yīng)用解析數(shù)據(jù)渲染頁面。

文章發(fā)布流程：文章編輯者登錄網(wǎng)站后臺，系統(tǒng)根據(jù)用戶ID獲取站點的ID，用戶即可在該站點下操作，系統(tǒng)根據(jù)操作類型更新數(shù)據(jù)庫和數(shù)據(jù)緩存等。

具體流程見圖3。

三、基于Ionic的App打包技術(shù)研究

PC端和WAP端的開發(fā)比較簡便，也已經(jīng)有成熟的開發(fā)思路。將網(wǎng)站的內(nèi)容顯示在手機應(yīng)用中，是系統(tǒng)的關(guān)鍵技術(shù)。Ionic框架提供了將HTML5打包成手機應(yīng)用的功能，使該系統(tǒng)的手機APP部分更加簡化、高效。

1.Ionic簡介

Ionic使用HTML5和JavaScript（簡稱JS）開發(fā)網(wǎng)頁，使用Cordova對Web應(yīng)用進行打包。Ionic（具體為其中的Cordova插件）提供了一系列的原生應(yīng)用的接口，這些接口兼容大部分移動平臺（主要是Android與iOS，但一些插件支持的平臺多達(dá)十幾個，如Ubuntu、BlackBerry、Windows Phone 等均支持）。使用Ionic開發(fā)的應(yīng)用可以兼容多平臺，在不使用Cordova的應(yīng)用接口的情況下（或單獨開發(fā)PC網(wǎng)頁端的某些功能）還可以直接用來做PC端的網(wǎng)站，做到了一次開發(fā)多個平臺通用。

PC端和WAP端的開發(fā)比較簡便，也已經(jīng)有成熟的開發(fā)思路。將網(wǎng)站的內(nèi)容顯示在手機應(yīng)用中，是系統(tǒng)的關(guān)鍵技術(shù)。Ionic框架提供了將HTML5打包成手機應(yīng)用的功能，使該系統(tǒng)的手機APP部分更加簡化、高效。

Ionic Framework（簡稱Ionic）包含了Ionic界面庫（Ionic UI）、AngularJS（以下簡稱Angular）和Cordova。其中Ionic界面庫主要包括各種元素的適配移動端的樣式表（CSS）、各種字體和小圖標(biāo)、圖片等。Ionic使用AngularJS的單頁面網(wǎng)頁技術(shù)，使用HTML5的history管理頁面的前進與后退，并在Angular的基礎(chǔ)上擴展了移動端的指令，如觸摸、觸摸開始、觸摸彈起、長時間觸摸、縮放等移動端特有的指令，使應(yīng)用更加靈活。最后，Ionic整合了Cordova的命令，在開發(fā)階段可以直接使用Ionic命令調(diào)用Cordova安裝插件和打包應(yīng)用等。

2.Ionic原理介紹

Ionic應(yīng)用的處理流程如下：

（1）Device。Device即移動終端，其中的操作系統(tǒng)（如Android 或iOS）負(fù)責(zé)安裝構(gòu)建好的應(yīng)用。操作系統(tǒng)提供了一系列API的功能，比如短信發(fā)送、本地相冊和照相機、撥打電話、GPS定位、藍(lán)牙等等。在圖4中，用戶打開應(yīng)用后，Device負(fù)責(zé)加載Cordova。

（2）Cordova。Cordova是能夠加載Web 應(yīng)用代碼的原生應(yīng)用。Cordova 是一個平臺，用于構(gòu)建能夠執(zhí)行HTML、CSS 和JavaScript 的原生應(yīng)用。它是平臺和應(yīng)用之間的橋梁，可以創(chuàng)建一個能夠安裝的原生應(yīng)用。這個原生應(yīng)用中包含WebView（實際上是一個獨立的瀏覽器窗口），可以通過JavaScript API 來運行Web 應(yīng)用。JS API是溝通應(yīng)用和設(shè)備的橋梁，Cordova通過JS API 來聯(lián)通Web 應(yīng)用和原生平臺。本質(zhì)上，Cordova是使用了各平臺的語言和原生API開發(fā)了一個能夠運行網(wǎng)頁的、提供通用JS API的各平臺的原生應(yīng)用。Cordova已經(jīng)提供了很多調(diào)用原生應(yīng)用的JS API， Cordova為開發(fā)基于各種網(wǎng)頁技術(shù)的Hybrid應(yīng)用提供了基礎(chǔ)。圖4中，Cordova加載了WebView并提供了一系列的JSAPI 以供下層的調(diào)用。

（3）WebView與JS API。WebView（網(wǎng)絡(luò)視圖）能加載顯示網(wǎng)頁，可以將其視為一個瀏覽器。WebView可以利用HTML進行界面布局，可以直接顯示網(wǎng)頁，可以運行Javascript。WebView的渲染引擎為界面提供了基礎(chǔ)，JS解析引擎不僅可以運行常規(guī)的Javascript代碼，還可以結(jié)合原生代碼構(gòu)建JS API 調(diào)用操作系統(tǒng)的功能。以Android為例，使用Java構(gòu)建Cordova時預(yù)留了許多接口，插件可以圍繞這些接口構(gòu)建，可以攔截指定的JS函數(shù)，調(diào)用Java編寫的原生功能。帶有JS API的WebView使Hybrid更接近于原生應(yīng)用的體驗。

（4）AngularJS是控制應(yīng)用路由和功能的Web 應(yīng)用。Angular 是一個流行的Web 應(yīng)用構(gòu)建框架，主要管理Web 應(yīng)用的邏輯、數(shù)據(jù)、路由等。AngularJS有著諸多特性，最為核心的是MVVM、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。AngularJS通過為開發(fā)者呈現(xiàn)一個更高層次的抽象來簡化應(yīng)用的開發(fā)。如同其他的抽象技術(shù)一樣，這也會損失一部分靈活性。換句話說，并不是所有的應(yīng)用都適合用AngularJS來做。AngularJS主要考慮的是構(gòu)建CRUD應(yīng)用。幸運的是，至少90%的WEB應(yīng)用都是CRUD應(yīng)用。Angular Web應(yīng)用運行在WebView 中，一般情況下，構(gòu)建Hybrid應(yīng)用可以使用angular-ui-router來控制應(yīng)用的路由，使用http服務(wù)獲取后臺數(shù)據(jù)，通過controller實現(xiàn)頁面的數(shù)據(jù)綁定與交互。

（5）Ionic UI用來控制應(yīng)用中用戶界面組件的渲染。Ionic UI，主要用來設(shè)計用戶界面和用戶體驗。Ionic UI包含一些視覺元素，比如選項卡、按鈕、導(dǎo)航頭部。這些界面控件是Ionic 的核心，可以在Hybrid 應(yīng)用中提供接近原生界面的體驗。Ionic UI的主體部分是一系列的樣式表和基于Angular的指令集合，通過Ionic UI，用戶可以獲得和原生應(yīng)用一樣的體驗，同時也方便了開發(fā)人員對界面元素的自定義修改。由于Ionic基于HTML+CSS渲染界面，開發(fā)難度和成本降低。

四、多終端內(nèi)容管理系統(tǒng)的實現(xiàn)

1.信息瀏覽模塊

信息瀏覽分為兩部分，其一為PC/WAP頁面自適應(yīng)瀏覽，其二為使用APP獲取后臺數(shù)據(jù)并展示。

（1）PC/WAP頁面自適應(yīng)瀏覽。瀏覽器在請求服務(wù)器時，會將終端信息和瀏覽器信息添加到HTTP請求信息的User-Agent（UA）字段，通過對該字段的解析，可以判斷請求來自PC端還是手機端。系統(tǒng)通過獲取設(shè)定好的PC端或手機端的模板路徑，生成PC端或手機端適應(yīng)的HTML頁面并返回，實現(xiàn)了PC與移動端網(wǎng)頁內(nèi)容相同但頁面不同的效果。

（2）APP內(nèi)容瀏覽。在系統(tǒng)的后臺預(yù)留相應(yīng)的接口，通過跨域請求的方式，將客戶端的請求做處理并獲取相應(yīng)JSON數(shù)據(jù)，客戶端通過解析JSON數(shù)據(jù)，結(jié)合已有的界面層渲染頁面。

2.文章管理模塊

文章管理模塊的流程如下：用戶登錄后，系統(tǒng)通過讀取用戶與站點的關(guān)聯(lián)表來獲取用戶所管理站點的列表，用戶可以切換到具體的站點來管理該站點的信息。切換后，系統(tǒng)判斷用戶在該站點的權(quán)限列出菜單供用戶操作。

3.系統(tǒng)管理

系統(tǒng)管理包括多站點管理、用戶權(quán)限管理等。

（1）多站點管理，包括站點的新建、更新域名、禁用與恢復(fù)、徹底刪除等功能。其中新建站點的流程為：系統(tǒng)首先生成站點ID，根據(jù)站點ID創(chuàng)建站點庫，創(chuàng)建站點的數(shù)據(jù)表，插入初始化數(shù)據(jù)（如站點域名等信息）。初始化完成后，全局管理員即可為該站點分配站點管理員。

（2）用戶權(quán)限管理。全局管理員可以分配用戶站點管理的權(quán)限，權(quán)限信息存儲在系統(tǒng)數(shù)據(jù)庫。站點管理員通過添加站點用戶，將用戶添加到該站點，然后通過授權(quán)將角色分配給該用戶，權(quán)限信息存儲在站點數(shù)據(jù)庫。

五、結(jié)束語

本文研究的多終端信息發(fā)布系統(tǒng)主要針對高校及高校下屬單位的門戶網(wǎng)站和APP的使用。在移動互聯(lián)網(wǎng)時代，既要方便移動端用戶對信息獲取的需求，也要注重PC端網(wǎng)頁內(nèi)容。通過多終端信息發(fā)布系統(tǒng)，既方便了管理者信息的發(fā)布，也方便了瀏覽者多終端的瀏覽。同時，由于系統(tǒng)對多站點的支持，也間接節(jié)省了網(wǎng)站建設(shè)的成本。

參考文獻(xiàn)：

[1]楊毅.移動APP開發(fā)模式探討[J].福建電腦，2014（6）：86-87.

[2]Paul Krill.IDC：React Native changes the game for hybrid mobile app dev[DB/OL]. http：//www.infoworld.com/article/3019350/application-development/idc-react-native-changes-the-game-for-hybrid-mobile-app-dev.html.

[3]XiaoMin Zhu，Donghua Chen，Ying Chen，Huisheng Chen. A resource integration approach for HTML5 mobile applications[J].Information Technology and Management，2013，14（3）：169-181.

[4]顧學(xué)海，胡牧，蔣厚明，王俊.基于HTML5的混合移動應(yīng)用開發(fā)[J].計算機系統(tǒng)應(yīng)用，2016（5）：236-239.

[5]馬友忠，孟小峰，姜大昕.移動應(yīng)用集成：框架、技術(shù)與挑戰(zhàn)[J].計算機學(xué)報，2013（7）：1375-1387.

[6]王閱蓁.移動應(yīng)用的web與native混合編程模式研究與實現(xiàn)[D].電子科技大學(xué)，2015.

[7]朱凱南，李艷平，申閆春，魏鄧航，余越.基于Ionic和Cordova的跨平臺移動APP的研究與應(yīng)用[J].電腦知識與技術(shù)，2016（1）：119-121.

[8]夏東翔.基于優(yōu)化的Cordova的混合型應(yīng)用平臺開發(fā)[D].大連理工大學(xué)，2015.

（編輯：王天鵬）