本文章按照仿牛客网里实现评论回复功能的改进。
公众号：恩故事还在继续
1️⃣ 效果展示
✏️ 补充说明
上面的主要改变是将原来的评论框添加了表情回复功能，原来的项目是没有这项功能的,这个是我自己添加的。
2️⃣ 技术使用说明
这里基本逻辑框架还是使用的是 SpringBoot + Thymeleaf 其次就是使用了 emoji 来支持表情回复，我使用的插件是: emojioneArea
3️⃣ 功能实现说明
实现评论的主要逻辑其实并不复杂,主要操作的就是两张数据表: comment(评论) 和 discuss-post(帖子) 我们添加一条评论主要针对的是:comment 我们添加评论之后需要修改帖子表里的字段: comment_count 然后后端逻辑写完之后就是如何一一对应前端显示了，最后单独说一下如何使用插件 emojioneArea
4️⃣ 代码实现
为了方便大家看主要逻辑,这里我把代码就放到GitHub 上去，我在这里主要说下我们需要用哪些代码： 后端模块主要包含的代码: CommentMapper、 CommentService、 CommentController: 主要是添加评论 DiscussPostMapper、DiscussPostService：主要是实现更新评论数量 comment-mapper.xml、discusspost-mapper.xml: 实现相关的数据库操作 前端主要是使用到的是: discuss-detail.html
SpringBoot + Thymeleaf + emojioneArea 实现评论
5️⃣ emojioneArea 插件的使用
这篇文章主要还是说下怎么使用 emojioneArea 插件， 写这个功能的时候也看了网上很多文章，但是感觉大家写的残次不齐 并不是我想要的，不过我可以将一些我看到的文章推荐给大家使用。
emojionearea 官网
你可以选择去github下载源码,也可以直接点击下载 zip 文件，这里跳转到 github 里面有一些语法的解释，可以参考参考。
我这里也准备了一个小 demo 就是把作者之前写的那一堆提取出来了，只需要按照 拿我的那个用就可以， 给大家看一看，如下图所示:
顺便补充一款样式:
✏️ 使用说明
我把文件放到了一起，这里提供上面的两款样式给大家打包在一起了，第一款样式直接解压之后，选择：demo-mine 就行 第二款名称叫做: HTML实现@功能与emoji表情功能的输入框
6️⃣ emojionearea 使用
- 导入相关的资源
- 指定函数
或者
其中 example 指的是标签的 id
如果需要将图标隐藏起来可以添加这条属性:
$("#example").emojioneArea({
autoHideFilters: true,
});
- 调用
上面就是一个简单的使用，但是要应用到我们项目中需要注意的事项，如果我们输入到评论框里的是图片，我们没有对我们的数据库字段进行编码指定的话会出现下面这个错误:
Incorrect string value: 'xF0x9Fx91x93xF0x9F...' for column 'xxx' at row 1
这是因为我设置该字段默认编码是utf-8， 但是有特殊字符的话, 某些Unicode字符转成utf8可能4字节，而在MySQl5.5.3之前，utf8最长只有3字节。所以解决方法是, 修改字段的编码，比如我的字段是 content, 然后我点击数据表，找到该字段将编码设置为: utf8mb4
7️⃣ 代码展示
30条回帖
![用户头像]()
❎ 这里需要解释一下
emojionearea 这个插件 你传入的 id 如果一直是 一个 那么你第二个框点击的时候是没有效果的,这个估计是没完善好或者有些地方我也不清楚。 所以我将他们的id 设置为随机数,这样多级评论就不会出现这个bug 。
资源获取
获取方式: 在文章末尾扫描我的公众号二维码, 然后后台回复： UI
8️⃣ 联系
