基于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—），女，湖北天门人，硕士。研究方向：通信与信息系统。