基于WEB的表情圖片模塊的動態管理與實現

屈 佳，胡志勇

（1.武漢郵電科學研究院 湖北 武漢 430000；2.武漢虹信技術服務有限責任公司 湖北 武漢　430074）

基于WEB的表情圖片模塊的動態管理與實現

屈 佳1，胡志勇2

（1.武漢郵電科學研究院 湖北 武漢 430000；2.武漢虹信技術服務有限責任公司 湖北 武漢430074）

針對以往web技術中圖片處理存在的效率問題，文中通過實現一個基于web應用的表情圖片動態管理模塊，結合運維平臺統一管理，最后得到更加高效和靈活的管理方案。模塊共分為3個部分，其中運維平臺負責對分類的表情圖片進行統一管理。前端公共頁面使用Javascript編寫方法，負責處理前臺寫入數據和發送請求動態從數據庫中取最新的表情圖片。后臺語言Java，用于拼接從數據庫取出的包含表情圖片的數據，由此形成一套高效規范的表情管理模塊。

表情圖片；動態生成；javascript；Java

1982年9月19日，美國卡耐基-梅隆大學的斯科特·法爾曼（匹茲堡計算機科學教授）教授在電子公告板，第一次輸入了這樣一串ASCII字符：“：-）”（微笑，順時針旋轉90度可得）。人類歷史上第一張電腦笑臉就此誕生。從此，網絡表情符號在互聯網世界風行，為社會廣泛接受［1］。

目前隨著社交媒體高速發展和字符數量縮減，表情符號已經成為互聯網應用中必不可少的一部分，研究表明使用表情圖片能讓用戶在社交媒體上更受歡迎，更能促進用戶之間的交流，如今表情圖片在比較嚴肅的商業氛圍中也得到了廣泛的應用。根據這些現狀本文介紹了在web項目中實現表情模塊的動態管理以及具體的前后臺轉換處理方案，下面是方案實施過程中遇到一些問題：

1）如何滿足表情圖片的多樣性使表情管理更加靈活；

2）如何在寫入數據時直觀的顯示圖片而不是圖片編碼；

3）表情圖片與文字信息一起寫入、取出時如何存儲處理；

針對以上幾個方面，系統制定了幾個解決方案，包括前端表情圖片的動態生成管理，與文字信息一起寫入時直觀顯示表情圖片，寫入和取出數據時的處理等。

1　解決方案

1.1動態表情圖片管理

考慮到傳統的web技術中網頁圖片在頁面“寫死“的不靈活性所帶來的管理不便，比如頁面改動較大，改動地方較多，工作量大而且造成網頁代碼冗余，影響網頁的下載速度和請求速度。針對這些問題，系統提出動態管理表情圖片。后臺語言是Java，取出數據時采用的是集合類中的ArrayList類。Java的類集框架可以使程序處理對象的方法標準化，類集接口是構造類集框架的基礎，使用迭代方法可以使類集的操作更高效［2-3］。通過在ArrayList中嵌套ArrayList類型的數據來存儲表情圖片，再在前臺動態讀取來實現表情圖片的動態生成，這樣對表情圖片的管理只需要在運維系統中統一操作，就可以多處調用，既減少了工作量，又提高了代碼的復用性和可維護性。數據庫的設計針對表情圖片和表情種類各自建立相應的數據存儲表，便于數據庫存儲。數據持久層的設計目標是為整個項目提供一個高層、統一、安全和并發的數據持久機制，完成對各種數據進行持久化的編程工作，并為系統業務邏輯層提供服務［4-5］。

1）規范表情圖片類型管理：對應建立表情圖片類型表，字段包括id、表情圖片類型名稱、是否默認顯示（每次只有一個類型的圖片默認顯示）創建時間、是否刪除（通過刪除這一圖片類型管理這個類型的所有的表情圖片的刪除）、是否顯示等；

2）規范表情圖片管理：對應建立表情圖片管理表，包括id、類型id（對應表情類型id）、表情編碼、圖片名稱和url字段（用于拼接完整的表情圖片標簽）、是否刪除、排序、創建時間等；

3）前臺請求可用表情圖片數據：將動態生成表情圖片的js代碼寫在一個公共的JSP頁面中，在需要使用表情模塊的頁面中引入該頁面即可。其主要功能是在瀏覽器完成頁面加載時發送Ajax請求到后臺，獲得所有可用的表情圖片數據，再根據后臺返回的結果遍歷取出的數據，在前臺拼接動態生成img標簽；

4）后臺獲取可用表情圖片數據：后臺接收到前端發送的請求，創建一個 ArrayList對象，其中存放的元素也為ArrayList。底層實現是數組，提供了根據數組下標快速隨機訪問的能力，但是增加和刪除元素時因為需要引動數組的元素，因此比較慢［6］。首先獲取表情圖片的可用類型，存放到一個ArrayList對象中，根據圖片類型逐個獲取該類型的表情圖片，然后把相同類型的表情圖片存放到一個ArrayList對象中，再把每個類型的表情圖片作為一個ArrayList的對象添加到外層的ArrayList對象中；

5）寫入數據中包含表情圖片的管理：在簡單的外表之下，javascript卻是一種具有豐富功能的程序設計語言［7］。寫入數據中包含表情圖片時存儲要做處理，因為在取出數據存放的位置未知的時候，這樣的做法很容易出錯，把公共處理的js方法寫在一個JSP頁面中，可以直接引用。系統中采用的是div標簽用來獲取寫入的數據，獲取數據需要轉換后同步到文本域中，主要是去掉其中一些HTML標簽，用相應的字符代替，取出時根據應用場景進行拼接。

1.2模塊組成

模塊組成包括運維系統表情圖片管理、web表情圖片應用公共模塊以及寫入、取出包含表情圖片的數據時處理模塊等3個部分。

1）運維管理系統表情圖片管理模塊，按照數據存儲要求和前端顯示，主要有以下幾個方面的功能：

①表情圖片類別查詢管理；

②表情圖片類別錄入管理；

③表情圖片類別的編輯和刪除管理；

④某種類別可用的表情圖片查詢管理；

⑤按照類別添加表情圖片管理；

⑥某種類別的表情圖片的編輯和刪除管理；

2）web應用公共模塊，javascript已經成為一門功能全面的編程語言，能夠處理復雜的計算和交互，擁有了閉包、匿名函數，甚至元編程等特性［7-8］。系統中主要用于頁面動態生成表情圖片模塊，頁面中需要寫入表情的地方引入，復用性和可維護性高：

①瀏覽器完成頁面加載后發送請求到后臺；

②接受后臺返回的可用的表情圖片數據；

③寫入表情時顯示表情圖片用div標簽實現；

④寫入的數據處理后同步到文本輸入框中；

⑤限制寫入字符個數截取時保證表情圖片的完整；

3）從數據庫中取出包含表情圖片的數據時相應的函數處理模塊：

①根據應用場景在數據庫中編寫函數處理包含表情圖片的數據；

②通過表情圖片的code字段去緩存中取表情圖片；

③根據應用處理數據內容中的特殊字符；

④將包含表情圖片的數據拼接成相應的img標簽；

1.3應用和價值

表情圖片模塊的動態管理在web系統中的應用：

1）表情圖片錄入及管理

通過在運維平臺對表情圖片進行統一的錄入和管理，實現了一處改動，多處調用。同時減少了前端代碼的冗余，提高了代碼的復用性，以及表情圖片管理的靈活性和多樣性，便于管理，降低管理成本。

2）公共模塊復用

利用對前端公共模塊的總結，編寫一個在頁面加載完成后請求表情圖片數據的公共的JSP頁面，在需要的地方直接引入，十分方便，包括對寫入數據的處理和轉換。在后臺取出包含表情圖片的數據時有兩種處理方法，一種是在數據庫中編寫函數，對取出的數據進行拼接處理；另外一種是在后臺程序中對數據進行拼接處理。兩種方法都要結合數據取出后的應用的環境來進行。

3）應用價值

表情符號現如今已經成為了一種世界語言，可以讓接收它的人迅速接收到它所包含的語言信息，無論是在web系統的交流版塊、信息發布版塊等文字信息模塊中都可以使用它，使用表情圖片可以讓信息交流更加的帶有生動的氣息，使人感到親近和有人情味。

2　系統工作原理

在Web系統中，應用文字的模塊多不勝數，如用于和運維人員進行交流的意見和建議模塊、用于發布個人信息的模塊、用戶回復的模塊等等，這些應用到文字信息的模塊都需要使用公共的表情圖片模塊。

文中介紹的表情動態管理模塊在系統中工作原理如下：在運維平臺中首先有一個相應的表情圖片管理模塊，用于進行表情圖片的統一管理，主要實現不同表情類別和表情圖片的管理，一處管理、多處調用。其次在web系統中建立一個公共的用于動態生成和寫入表情圖片的JSP頁面，其中包括一些公共的js處理函數，在需要使用的地方直接調用，用于在前臺動態生成表情圖片和處理需要寫入的數據。最后是包含表情圖片的數據取出時的處理，這里也是通過調用公共的轉換函數將數據拼接成正確的數據格式。

3　應用實現

具體功能實現后，動態生成的表情模塊如圖1。

圖1　電腦端動態生成表情模塊界面

主要功能有：動態生成表情圖片以及數據的的寫入管理運維終端登陸后，表情圖片管理界面如圖2。

圖2　運維端管理表情圖片界面

主要功能有：表情圖片類別管理功能、對應表情類別的表情圖片管理功能

4　結束語

隨著互聯網的普及化和手機短信的普遍流行，用表情圖片來表達心情這種網絡次文化已經為社會所廣泛接受，表情圖片在社交媒體中的應用將越來越多。文中介紹了在web應用系統中實現表情圖片動態管理模塊，通過集成表情圖片動態管理功能、明確劃分模塊職能，在系統中集成公共的動態表情圖片管理模塊和公共的方法，直接在需要的地方調用，提高了代碼的復用性，便于運維人員管理，靈活性高。

［1］表情符號世界通行［N］.蘋果日報，2007-07-30（A26）.

［2］Joshua Bloch.Effective Java［M］.楊春花，俞黎敏，譯.北京：機械工業出版社，2009.

［3］程杰.大話設計模式［M］.北京：清華大學出版社，2007.

［4］劉艷霞.J2EE項目中的數據持久層設計［J］.工程地質計算機應用，2005：20-27.

［5］高博.基于J2ME的移動通信技術的研究與應用 ［D］.遼寧：沈陽工業大學，2006.

［6］Bruce Eckel.Thinking in Java［M］.4th Revised edition Prentice Hall，2006.

［7］David Flanagan.JavaScript權威指南［M］.李強，譯.北京：機器工業出版社，2007.

［8］Nicholas C.Zakas.JavaScript高級程序設計［M］.曹力，譯.北京：人民郵電出版社，2010.

Dynamicmanagement and realization of emotion module based on WEB system

QU Jia1，HU Zhi-yong2
（1.Wuhan Research Institute of Posts and Telecommunications，Wuhan 430000，China；2.Wuhan Hongxin Technology Services，LLC，Wuhan 430074，China）

For the efficiency of the conventional image processing web technology exists to implement a paper-based expression of dynamic web applications，image management module，combined with a unified management platform for operation and maintenance，and finally get more efficient and flexible management solution.Module is divided into three parts，which is responsible for the operation and maintenance platform classification emoticons for unified management.The front page uses Javascript public write method，handles the front desk to write data and sends a request to take the latest dynamic emoticons from the database.Background language Java，for data contained emoticons stitching removed from the database，thereby forming an efficient standardized expression management module.

emoticons；dynamically generated；javascript；Java

TN919.82

A

1674－6236（2016）09-0185-03

2015-06-03稿件編號：201506043

屈 佳（1990—），女，湖北天門人，碩士。研究方向：通信與信息系統。