Spring Boot+Vue+ElementUI实现Emoji表情的发送与转换存储

最新推荐文章于 2024-07-31 18:13:15 发布

Code0cean

最新推荐文章于 2024-07-31 18:13:15 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/huangjhai/article/details/107703235

版权

Spring Boot 同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

Vue

6 篇文章 0 订阅

订阅专栏

文章目录

JSON文件引入

JSON文件中部分Emoji表情示例：

[
    {
        "codes": "1F600",
        "char": "😀",
        "name": "grinning face",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F603",
        "char": "😃",
        "name": "grinning face with big eyes",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F604",
        "char": "😄",
        "name": "grinning face with smiling eyes",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F601",
        "char": "😁",
        "name": "beaming face with smiling eyes",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F606",
        "char": "😆",
        "name": "grinning squinting face",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F605",
        "char": "😅",
        "name": "grinning face with sweat",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F923",
        "char": "🤣",
        "name": "rolling on the floor laughing",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F602",
        "char": "😂",
        "name": "face with tears of joy",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F642",
        "char": "🙂",
        "name": "slightly smiling face",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F643",
        "char": "🙃",
        "name": "upside-down face",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F609",
        "char": "😉",
        "name": "winking face",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    },
    {
        "codes": "1F60A",
        "char": "😊",
        "name": "smiling face with smiling eyes",
        "category": "Smileys & Emotion (face-smiling)",
        "group": "Smileys & Emotion",
        "subgroup": "face-smiling"
    }
]

在需要用到该文件的vue页面中通过以下语句引入该JSON文件。

const appData=require("../../utils/emoji.json")//引入存放emoji表情的json文件

这是该Json文件的来源：https://github.com/amio/emoji.json
完整的JSON文件下载（删除了一些显示不好的字符）：

链接：https://pan.baidu.com/s/1RVctbaxe6st8Qa0Q1Trvqw 提取码：kjb0

代码实现

使用Element UI的Popover弹出框用于显示Emoji表情，

      <el-popover placement="top-start" width="400" trigger="click" class="emoBox">
        <div class="emotionList">
          <a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in faceList" :key="index" class="emotionItem">{{item}}</a>
        </div>
        <el-button id="emojiBtn" class="emotionSelect" slot="reference">
          <i class="fa fa-smile-o" aria-hidden="true"></i>
        </el-button>
      </el-popover>
     <!--输入框-->
          <textarea id="textarea" placeholder="按 Ctrl + Enter 发送" v-model="content" v-on:keyup="addMessage">
    </textarea>

CSS样式如下：

<style lang="scss">
  /* el-popover是和app同级的，所以scoped的局部属性设置无效 */
  /* 需要设置全局style */
  .el-popover{
    height:200px;
    width:450px;
    overflow: scroll;
    overflow-x:auto;
  }
</style>
<style lang="scss" scoped>
  #emojiBtn{
    border: none;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  #emojiBtn:hover{
    background-color: white;
  }
  .emotionList{
  display: flex;
  flex-wrap: wrap;
  padding:5px;
}
.emotionItem{
  width:10%;
  font-size:20px;
  text-align:center;
}
/*包含以下四种的链接*/
.emotionItem {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emotionItem:active {
  text-decoration: none;
}  
</style>

JavaScript中的方法：

  data () {
    return {
      faceList:[],//表情包数据
      content:''
    }
  },
  mounted(){
    for (let i in appData){//读取json文件保存数据给数组
      this.faceList.push(appData[i].char);
    }
  },
 methods: {
 getEmo(index){
      var textArea=document.getElementById('textarea');
      //将选中的表情插入到输入文本的光标之后
      function changeSelectedText(obj, str) {
        if (window.getSelection) {
          // 非IE浏览器
          textArea.setRangeText(str);
          // 在未选中文本的情况下，重新设置光标位置
          textArea.selectionStart += str.length;
          textArea.focus()
        } else if (document.selection) {
          // IE浏览器
          obj.focus();
          var sel = document.selection.createRange();
          sel.text = str;
        }
      }
      changeSelectedText(textArea,this.faceList[index]);
      this.content=textArea.value;// 要同步data中的数据
      return;
    }
  }

效果展示

在这里插入图片描述

Emoji表情格式转换存储与显示

如果使用MySQL进行存储Emoji表情会报错，原因是因为MySQL默认使用的UTF-8编码，规定了一个字符只占3个字节，而一个Emoji表情字符就占4个字节。
要解决这个问题可以将MySQL的编码更改为utf8mb4编码。SpringBoot 使用 MySQL保存emoji 表情

从 MySQL 5.5.3 开始，MySQL 支持一种 utf8mb4 的字符集，这个字符集能够支持 4 字节的 UTF8 编码的字符。 utf8mb4 字符集能够完美地向下兼容 utf8 字符串。在数据存储方面，当一个普通中文字符存入数据库时仍然占用 3 个字节，在存入一个 Unified Emoji 表情的时候，它会自动占用 4 个字节。所以在输入输出时都不会存在乱码的问题了。

其次，需要修改数据库中的字符集为 utf8mb4 ，如 utf8mb4_general_ci 。由于 utf8mb4 是 utf8 的超集，从 utf8 升级到 utf8mb4 不会有任何问题，直接升级即可；如果从别的字符集如 gb2312 或者 gbk 转化而来，一定要先备份数据库。

另一种方法就是将Emoji表情字符进行转码，转化为HTML字符实体（以&#开头的字符串）。什么是HTML实体
首先在pom.xml中添加依赖（该项目源代码地址：https://github.com/binarywang/java-emoji-converter）：

<dependency>
  <groupId>com.github.binarywang</groupId>
  <artifactId>java-emoji-converter</artifactId>
  <version>1.0.1</version>
</dependency>

用法示例：

private EmojiConverter emojiConverter = EmojiConverter.getInstance();

@Test
public void testToHtml() {
    String str = "  An 😀😃awesome 😃😃string with a few 😉😃emojis!";
    String result = this.emojiConverter.toHtml(str);
    System.out.println(str);
    System.out.println("EmojiConverterTest.testToHtml()=====>");
    System.out.println(result);
    Assert.assertEquals(
        "&#128581; &#128582; &#128145;An &#128512;&#128515;awesome &#128515;&#128515;string with a few &#128521;&#128515;emojis!",
        result);
}

其他用法：

@Test
public void testToAlias() {
    String str = "  An 😃😀awesome 😃😃string with a few 😃😉emojis!";
    String alias = this.emojiConverter.toAlias(str);
    System.out.println(str);
    System.out.println("EmojiConverterTest.testToAlias()=====>");
    System.out.println(alias);
    Assert.assertEquals(
        ":no_good: :ok_woman: :couple_with_heart:An :smiley::grinning:awesome :smiley::smiley:string with a few :smiley::wink:emojis!",
        alias);
}


@Test
public void testToUnicode() {
    String str = "   :smiley: :grinning: :wink:";
    String result = this.emojiConverter.toUnicode(str);
    System.err.println(str);
    System.err.println("EmojiConverterTest.testToUnicode()=====>");
    System.err.println(result);
    Assert.assertEquals("🙅 🙆 💑 😃 😀 😉", result);
}

使用toHtml方法转换得到的字符串可以直接放入到MySQL数据库中保存，需要拿出来显示的话。可以直接使用HTML标签显示。但如果使用的是vue，就需要在Vue页面中使用标签v-html绑定数据，这样内容按普通 HTML 插入，不会作为 Vue 模板进行编译。这样就可以再次显示这个Emoji表情了。