LeanCloud在圖片管理系統(tǒng)中的應(yīng)用研究

周曉梅，朱金付，段洪秀

(1.中國(guó)傳媒大學(xué)南廣學(xué)院 傳媒技術(shù)學(xué)院，江蘇 南京 210000；2.東南大學(xué) 交通學(xué)院，江蘇 南京 210000)

LeanCloud在圖片管理系統(tǒng)中的應(yīng)用研究

周曉梅1，朱金付2，段洪秀1

(1.中國(guó)傳媒大學(xué)南廣學(xué)院 傳媒技術(shù)學(xué)院，江蘇 南京 210000；2.東南大學(xué) 交通學(xué)院，江蘇 南京 210000)

隨著電子商務(wù)的不斷發(fā)展，網(wǎng)站中的圖片數(shù)據(jù)量逐漸增大，針對(duì)如何有效管理海量圖片資源的問(wèn)題，文中提出將云存儲(chǔ)技術(shù)應(yīng)用于圖片管理系統(tǒng)中。在分析了云存儲(chǔ)特點(diǎn)的基礎(chǔ)上，利用LeanCloud云存儲(chǔ)提供的SDK(Software Development Kit)及API(Application Programming Interface)設(shè)計(jì)各個(gè)功能模塊，并以用戶(hù)登錄模塊、上傳圖片模塊、圖片展示模塊為例詳細(xì)介紹了具體的實(shí)現(xiàn)過(guò)程，給出了應(yīng)用實(shí)例。實(shí)驗(yàn)結(jié)果表明，基于LeanCloud云存儲(chǔ)服務(wù)的圖片管理系統(tǒng)，不僅能有效地管理海量的圖片數(shù)據(jù)，還可以自動(dòng)調(diào)整屏幕尺寸來(lái)適應(yīng)不同大小的屏幕，為用戶(hù)提供更舒適的界面和更好的用戶(hù)體驗(yàn)。

云存儲(chǔ);圖片管理系統(tǒng);HTML5;LeanCloud

0 引 言

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展、電子商務(wù)行業(yè)的興起，人們的消費(fèi)方式逐漸轉(zhuǎn)變?yōu)榫W(wǎng)上消費(fèi)，電子商務(wù)網(wǎng)站的在線交易量不斷創(chuàng)歷史新高。根據(jù)對(duì)某電子商務(wù)網(wǎng)站的流量分析，圖片的訪問(wèn)流量會(huì)占到90%以上，平均圖片大小是18.45 kB，圖片存儲(chǔ)空間已達(dá)到990 TB(約IPB)，這就對(duì)電子商務(wù)企業(yè)存儲(chǔ)、管理數(shù)據(jù)的能力提出更高的要求。對(duì)于小規(guī)模的電子商務(wù)企業(yè)來(lái)說(shuō)，如何管理龐大的圖片數(shù)據(jù)就成了亟需解決的問(wèn)題。傳統(tǒng)的存儲(chǔ)方式由于擴(kuò)展性較差，當(dāng)存儲(chǔ)容量不夠時(shí)，只能添置高端的存儲(chǔ)設(shè)備，增加了企業(yè)的投資成本，使管理和運(yùn)營(yíng)成本提高，造成了資源浪費(fèi)。同時(shí)，過(guò)于復(fù)雜的存儲(chǔ)和數(shù)據(jù)備份方式也很難滿(mǎn)足用戶(hù)日漸增長(zhǎng)的數(shù)據(jù)管理需求。

云存儲(chǔ)是一種新興的技術(shù)，是在云計(jì)算的基礎(chǔ)上發(fā)展起來(lái)的[1-4]。云存儲(chǔ)正在改變著傳統(tǒng)存儲(chǔ)的提供與使用方式，也對(duì)存儲(chǔ)行業(yè)帶來(lái)了深遠(yuǎn)影響。存儲(chǔ)在云端的數(shù)據(jù)可以在任何時(shí)間任何地點(diǎn)訪問(wèn)讀取，節(jié)省本地存儲(chǔ)因數(shù)據(jù)增長(zhǎng)帶來(lái)的額外硬件添置成本，并且基本不用考慮數(shù)據(jù)備份等維護(hù)問(wèn)題，只要選擇適合的云服務(wù)提供商以及按需支付相關(guān)費(fèi)用即可[5-7]。

文中提出將云存儲(chǔ)技術(shù)應(yīng)用于圖片管理系統(tǒng)中，設(shè)計(jì)并實(shí)現(xiàn)一個(gè)高可靠的、高擴(kuò)展性的圖片存儲(chǔ)管理系統(tǒng)，有效地降低企業(yè)運(yùn)營(yíng)成本，解決海量圖片的高效管理和存儲(chǔ)問(wèn)題。

1 LeanCloud

LeanCloud是在第一代公有云的基礎(chǔ)上發(fā)展的第二代云服務(wù)，對(duì)云計(jì)算資源進(jìn)一步封裝與優(yōu)化，提供數(shù)據(jù)存儲(chǔ)、消息推送以及統(tǒng)計(jì)分析等服務(wù)。支持Java、.net、Android、IOS等多個(gè)平臺(tái)，使開(kāi)發(fā)者擺脫繁重的后端開(kāi)發(fā)負(fù)擔(dān)，縮短了開(kāi)發(fā)周期，精簡(jiǎn)了開(kāi)發(fā)程序[8]。

LeanCloud為不同平臺(tái)的用戶(hù)提供了不同的SDK，不同的SDK中提供了文件上傳、下載、查詢(xún)、刪除等API。程序開(kāi)發(fā)者可直接調(diào)用所需要的API，在封裝好的接口上開(kāi)發(fā)面向消費(fèi)者的APP應(yīng)用。開(kāi)發(fā)者只需關(guān)心具體實(shí)現(xiàn)哪些功能，而不用關(guān)心具體怎么實(shí)現(xiàn)，大大提高了開(kāi)發(fā)效率。

文中系統(tǒng)將應(yīng)用中涉及到的數(shù)據(jù)，包括用戶(hù)信息、圖片信息、相冊(cè)信息[9]等，利用LeanCloud提供的文件存儲(chǔ)API上傳到云端，由LeanCloud負(fù)責(zé)對(duì)云端的數(shù)據(jù)進(jìn)行調(diào)度與管理。在實(shí)際應(yīng)用中，無(wú)需關(guān)注有多少用戶(hù)在使用圖片管理系統(tǒng)，后端的云數(shù)據(jù)中心的所有數(shù)據(jù)調(diào)用全部由LeanCloud完成。

同時(shí)，LeanCloud的文件存儲(chǔ)采用國(guó)內(nèi)全網(wǎng)加速CDN技術(shù)[10-12]，使終端用戶(hù)自動(dòng)選擇最近的節(jié)點(diǎn)實(shí)現(xiàn)上傳和下載，支持不同區(qū)域的終端使用不同區(qū)域的存儲(chǔ)機(jī)房，通常只在同一個(gè)城市，因此可以獲得最好的上傳、下載速度，如圖1所示。

圖1 LeanCloud架構(gòu)圖

2 系統(tǒng)總體結(jié)構(gòu)分析

系統(tǒng)是基于LeanCloud云服務(wù)的圖片管理系統(tǒng)，數(shù)據(jù)庫(kù)和服務(wù)器采用的是最新的第二代云服務(wù)LeanCloud，系統(tǒng)前臺(tái)界面運(yùn)用HTML5、Ajax和jQuery技術(shù)來(lái)提供更好的用戶(hù)體驗(yàn)。

2.1 系統(tǒng)功能模塊

系統(tǒng)共分為用戶(hù)管理、相冊(cè)管理、圖片管理三個(gè)模塊，實(shí)現(xiàn)圖片的批量上傳、在線檢索、在線編輯、在線瀏覽、批量下載等功能。系統(tǒng)功能模塊如圖2所示。

圖2 系統(tǒng)功能模塊圖

2.2 數(shù)據(jù)的存儲(chǔ)與讀取

(1)存儲(chǔ)數(shù)據(jù)。

系統(tǒng)中的數(shù)據(jù)庫(kù)部署在LeanCloud上，每個(gè)LeanCloud賬戶(hù)可以容納多個(gè)應(yīng)用，對(duì)每一個(gè)應(yīng)用都可以部署不同的版本，并且有專(zhuān)屬的App id和App key。

在LeanCloud上保存數(shù)據(jù)是建立在對(duì)象AV.Object基礎(chǔ)上的，每個(gè)AV.Object包含若干個(gè)屬性，屬性的值是與JSON(JavaScript Object Notation)格式兼容的數(shù)據(jù)。這些數(shù)據(jù)是無(wú)模式的，不需要提前指定AV.Object中應(yīng)該包含哪些屬性，可以隨時(shí)增加新的屬性。

系統(tǒng)主要包含三類(lèi)數(shù)據(jù)：用戶(hù)、圖片和相冊(cè)。表1中列出了三種實(shí)體及相應(yīng)的屬性名。

表1 數(shù)據(jù)表及屬性

每個(gè)AV.Object對(duì)象的objectId、createdAt和updatedAt三個(gè)屬性是不需要開(kāi)發(fā)者指定的。其中，objectId屬性是每個(gè)AV.Object對(duì)象的唯一標(biāo)識(shí)符，是LeanCloud服務(wù)器端自動(dòng)生成的唯一id，所以objectId是不可修改的。createdAt和updatedAt是每個(gè)對(duì)象在服務(wù)器上創(chuàng)建和最后修改的時(shí)間，這些屬性的創(chuàng)建和更新是由系統(tǒng)自動(dòng)完成的，不需要開(kāi)發(fā)者提供這些數(shù)據(jù)，并且在保存之前AV.Object中都不會(huì)有這些字段的值。

為了保證數(shù)據(jù)的安全性，存儲(chǔ)在LeanCloud中的每一張表都設(shè)置一個(gè)ACL(Access Control List)列。ACL為每一個(gè)數(shù)據(jù)創(chuàng)建一個(gè)訪問(wèn)列表，只有列表的用戶(hù)或者具有某種角色的用戶(hù)才能被允許訪問(wèn)。

默認(rèn)情況下，ACL值代表所有的用戶(hù)對(duì)這個(gè)對(duì)象都是可讀可寫(xiě)的，在數(shù)據(jù)管理表中ACL屬性的值為：

{"*":{"read":true,"write":true}}

(2)讀取數(shù)據(jù)。

如果需要獲取LeanCloud中的數(shù)據(jù)，首先需要知道objectId的值，然后通過(guò)AV.Query提取出整個(gè)AV.Object。如果獲得AV.Object的屬性值,則使用get方法，例如：

var username=AV.Object.get("username");

3 系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

文中系統(tǒng)的頁(yè)面采用的是響應(yīng)式設(shè)計(jì)，無(wú)論用戶(hù)使用的是筆記本還是手機(jī)，系統(tǒng)的頁(yè)面都可以自動(dòng)切換分辨率及相關(guān)腳本功能，自動(dòng)調(diào)整屏幕尺寸及定向來(lái)適應(yīng)不同的設(shè)備環(huán)境。

對(duì)于近幾年才流行起來(lái)的響應(yīng)式網(wǎng)站來(lái)說(shuō)，HTML5推出了與之相對(duì)應(yīng)的新的屬性onresize，來(lái)更好地適應(yīng)新的網(wǎng)站前端開(kāi)發(fā)趨勢(shì)。onresize屬性設(shè)置了對(duì)象被調(diào)整大小時(shí)將會(huì)發(fā)生的事件。在文中系統(tǒng)設(shè)計(jì)中，使用Media Query與onresize屬性相結(jié)合來(lái)實(shí)現(xiàn)響應(yīng)式布局。Media Query可以根據(jù)不同瀏覽器的高度及像素等因素來(lái)使用不同的CSS樣式，從而達(dá)到不同的顯示風(fēng)格。

3.1 用戶(hù)登錄模塊

用戶(hù)登錄模塊實(shí)現(xiàn)的功能是用戶(hù)信息的注冊(cè)與登錄，并可在后臺(tái)云端的數(shù)據(jù)庫(kù)中進(jìn)行數(shù)據(jù)的更新操作。當(dāng)用戶(hù)需要管理和存儲(chǔ)圖片時(shí)，需要進(jìn)行注冊(cè)成為正式用戶(hù)才可以登錄系統(tǒng)。

用戶(hù)登錄模塊主要用到的是AV.User類(lèi)。AV.User是AV.Object的一個(gè)子類(lèi)，而且有AV.Object一樣的功能，比如可變的模式、自動(dòng)的持久化，還有鍵值對(duì)接口。所有對(duì)AV.Object有用的方法同樣可以作用于AV.User。AV.User的不同之處在于它對(duì)于用戶(hù)的賬戶(hù)有一些特定的功能。

AV.User默認(rèn)有一些與AV.Object不一樣的字段，如表2所示。

表2 AV.User的默認(rèn)字段

注冊(cè)功能的核心代碼如下所示：

signUp: function()

{

var user, x$, this$=this;

user=new AV.User();

x$=user;

//添加用戶(hù)名

x$.set('username', this.username);

//添加密碼

x$.set('password', this.password);

}

注冊(cè)完成后，在用戶(hù)登錄模塊使用logIn()方法進(jìn)行登錄，代碼如下所示：

AV.User.logIn("username", "password");

用戶(hù)登錄后，系統(tǒng)會(huì)將用戶(hù)的登錄信息存儲(chǔ)在localStorage中，相當(dāng)于一個(gè)session，并且自動(dòng)假設(shè)用戶(hù)已經(jīng)登錄了，如下所示：

//得到當(dāng)前用戶(hù)，并判斷用戶(hù)是否登錄

if(AV.User.current()){…}

//否則返回登錄界面

else{…}

當(dāng)用戶(hù)點(diǎn)擊“退出”按鈕以后，系統(tǒng)會(huì)通過(guò)logout來(lái)清除掉當(dāng)前的用戶(hù)：

AV.User.logOut();

var currentUser=AV.User.current(); //清空當(dāng)前用戶(hù)

3.2 上傳圖片模塊

上傳圖片模塊采用的是LeanCloud提供的AV.File類(lèi)，通過(guò)AV.File可以在LeanCloud中保存文件。在LeanCloud中不僅可以保存圖片，還可以存儲(chǔ)文本、音頻、視頻或者任何二進(jìn)制數(shù)據(jù)，只是文中系統(tǒng)是一個(gè)圖片存儲(chǔ)管理系統(tǒng)，以存儲(chǔ)圖片為主。

如果在瀏覽器中上傳文件，則文件大小要小于10 M，但是在node.js環(huán)境里則沒(méi)有限制。首先用一個(gè)byte數(shù)組來(lái)新建一個(gè)file：

var bytes=[0xBE, 0xEF, 0xCA, 0xFE];

var file=new AV.File("myfile.txt", bytes);

接著在網(wǎng)頁(yè)中添加上傳文件的tag來(lái)上傳文件：

然后，在一個(gè)處理click里調(diào)用AV.File上傳文件：

upload:function()

{

var file, name, avFile, this$=this;

file=this.$.fileUpload.files[0];

console.info('click', file);

name=file.name;

avFile=new AV.File(name, file);

}

上傳文件時(shí)無(wú)需擔(dān)心文件名重復(fù)問(wèn)題，因?yàn)槊看紊蟼鞫紩?huì)有一個(gè)唯一標(biāo)識(shí)。同時(shí)，上傳時(shí)需要有擴(kuò)展名，這樣LeanCloud就會(huì)按文件類(lèi)型來(lái)進(jìn)行處理。

3.3 圖片展示模塊

圖片展示模塊的主要功能是將用戶(hù)上傳至云端的圖片展現(xiàn)在屏幕上，用戶(hù)可以分別點(diǎn)擊不同的相冊(cè)查看圖片，并且圖片是以縮略圖的形式展示出來(lái)，如圖3所示。

圖3 圖片的縮略圖

LeanCloud提供了縮略圖的服務(wù)。當(dāng)用戶(hù)上傳一張圖片到云服務(wù)器，通過(guò)thumbnailURL方法可以獲得縮略圖的URL，如下所示：

thumbnailURL(width,heigth,quality,scaleToFit,fmt)

其中：width參數(shù)表示圖片的寬度(單位：像素)；heigth參數(shù)表示圖片的高度(單位：像素)；quality參數(shù)表示圖片的質(zhì)量(1～100的數(shù)字)，默認(rèn)情況下是100；scaleToFit參數(shù)表示圖片是否自適應(yīng)大小，默認(rèn)為true；fmt參數(shù)表示圖片的格式，默認(rèn)為png格式。

如果想獲得100*200像素的縮略圖，并返回該圖的URL，則表示為：

var url=file.thumbnailURL(100, 200);

在圖3中，當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)會(huì)出現(xiàn)放大鏡圖標(biāo)，單擊鼠標(biāo)則可以查看圖片原圖。以上效果應(yīng)用的是jQuery的圖片畫(huà)廊插件lighterbox。Lighterbox相冊(cè)圖片瀏覽插件可以兼容主流的瀏覽器，并且支持移動(dòng)端瀏覽器，單擊圖片實(shí)現(xiàn)放大瀏覽。

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

云計(jì)算技術(shù)的逐漸興起，讓所有資源得到充分利用，避免了過(guò)度購(gòu)買(mǎi)服務(wù)器設(shè)備，大大降低了中小企業(yè)的運(yùn)營(yíng)成本，使企業(yè)能夠?qū)Ｗ⒂谠黾釉谄渎殭?quán)范圍內(nèi)的核心價(jià)值，而不是建立和維護(hù)IT基礎(chǔ)設(shè)施。

文中將云存儲(chǔ)技術(shù)應(yīng)用于海量圖片管理系統(tǒng)，滿(mǎn)足應(yīng)用和用戶(hù)規(guī)模增長(zhǎng)的需要，使數(shù)據(jù)中心管理成本大幅降低，使資源的利用率大幅提升，并且可以輕松實(shí)現(xiàn)不同設(shè)備間的數(shù)據(jù)與應(yīng)用共享[13-14]。

總而言之，云存儲(chǔ)將對(duì)數(shù)據(jù)存儲(chǔ)行業(yè)產(chǎn)生巨大的影響，將是業(yè)界發(fā)展的大趨勢(shì)。

[1] Wikipedia.Cloud storage[EB/OL].[s.l.]:Wikipedia.2015.https://it.wikipedia.org/wiki/Cloud_storage.

[2] 陳德軍,高曉軍,王義飛.基于AHP的云存儲(chǔ)負(fù)載均衡研究[J].計(jì)算機(jī)工程與應(yīng)用,2015,51(7):56-60.

[3] Yu Peng,Yu Zhang,Xiong Lv,et al.Cloud storage service in digital campus[C]//Proceedings of 2013 IEEE 4th international conference on software engineering and service science.[s.l.]:IEEE,2013:368-371.

[4] 李 磊,周璟璐,陳 靜,等.移動(dòng)云計(jì)算中的上下文相關(guān)身份認(rèn)證[J].計(jì)算機(jī)應(yīng)用與軟件,2013,30(9):96-99．

[5] Drago I,Mellia M,Munafo M,et al.Inside dropbox:understanding personal cloud storage services[C]//Proceedings of the 2012 ACM conference on Internet measurement conference.[s.l.]:ACM,2012:481-494.

[6] Liu Ying,Vlassov V,Navarro L.Towards a community cloud storage[C]//Proc of IEEE 28th international conference on advanced information networking and applications.[s.l.]:IEEE,2014:837-844.

[7] Yang Wei,Zhao Jianpeng,Zhu Junmao,et al.Design and implementation of security cloud storage framework[C]//Proceedings of 2012 second international conference on instrumentation,measurement,computer,communication and control.New York:IEEE,2012:323-326.

[8] Leancloud.Leancloud function[EB/OL].2015.https://leancloud.cn/features/storage.html.

[9] 馬 靜.基于Web的高校圖片管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].西安:西安工業(yè)大學(xué),2014.

[10] 林克振.對(duì)云計(jì)算與云存儲(chǔ)技術(shù)研究的探討[J].計(jì)算機(jī)光盤(pán)軟件與應(yīng)用,2014,17(20):39-40.

[11] 趙 屹.機(jī)遇與風(fēng)險(xiǎn):云計(jì)算環(huán)境下的電子文件管理[J].檔案與建設(shè),2013(10):4-6.

[12] 楊炳保.基于Android的移動(dòng)云計(jì)算技術(shù)的研究[J].計(jì)算機(jī)技術(shù)與發(fā)展,2013,23(8):52-54.

[13] 蘇 靜.基于android技術(shù)的開(kāi)放式教學(xué)研究[J].計(jì)算機(jī)與網(wǎng)絡(luò),2015,41(7):26-27.

[14] 洪文圳.基于Android的實(shí)驗(yàn)室管理系統(tǒng)[J].計(jì)算機(jī)與現(xiàn)代化,2014(3):186-190.

Application Study of LeanClound in Picture Management System

ZHOU Xiao-mei1,ZHU Jin-fu2,DUAN Hong-xiu1

(1.College of Media Technology,Nanguang College of Communication University of China,Nanjing 210000,China;2.School of Transportation,Southeast University,Nanjing 210000,China)

With the constant development of e-commerce,there are a growing number of pictures on websites.Aiming at the problem about how to manage countless picture resources effectively,the cloud storage technology is applied into picture management system.Based on the analysis of features of cloud storage,it uses the SDK (Software Development Kit) and API (Application Programming Interface) provided by LeanCloud to design different functional modules,taking the user login module,upload pictures module,image display module as application cases to describe the realization process.The experiment shows that the picture management system based on LeanCloud service can not only manage countless picture data effectively,but also adapt to the screens in different sizes,which provide more comfortable interface and better user experience for users.

cloud storage;picture management system;HTML5;LeanCloud

2015-08-15

2015-11-19

時(shí)間：2016-05-05

江蘇省高校自然科學(xué)研究項(xiàng)目(14KJD520011,15KJD5200007);江蘇省高校哲學(xué)社會(huì)科學(xué)研究基金指導(dǎo)項(xiàng)目(2014SJD324)

周曉梅(1980-),女,碩士,講師,研究方向?yàn)樵拼鎯?chǔ)、信息管理；朱金付,副教授,研究方向?yàn)樵朴?jì)算、信息系統(tǒng)。

http://www.cnki.net/kcms/detail/61.1450.TP.20160505.0829.084.html

TP39

A

1673-629X(2016)07-0138-04

10.3969/j.issn.1673-629X.2016.07.029