带emoji表情弹出层的评论框，semantic+emoji picker，java.sql.SQLException: Incorrect string value: '\xF0\x9F..'...

最新推荐文章于 2024-03-26 09:41:39 发布
最新推荐文章于 2024-03-26 09:41:39 发布
阅读量160 收藏
点赞数
文章标签： java 数据库 ui
原文链接：http://www.cnblogs.com/sufferingStriver/p/8467020.html
版权

在自己做一个项目玩时，在做评论的时候。

选中了semantic.js原型，这个在国内用的不是很多，但是在github上star数量很高，想当初我想找一个js框架是就在上面找的。

semantic中文网：http://www.semantic-ui.cn/

用了他的评论UI组件：http://www.semantic-ui.cn/views/comment.html

如下图所示

但是它的评论框不能用表情，于是在网上找了一个emoji 选择器

github地址:https://github.com/OneSignal/emoji-picker

它的效果如下

然后和semantic集成效果如下：

接下来，如果你的数据库编码不对，会报错

java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x9C\xF0\x9F...' for column 'content' at row 1
at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:964) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3973) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3909) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.MysqlIO.sendCommand(MysqlIO.java:2527) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.MysqlIO.sqlQueryDirect(MysqlIO.java:2680) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.ConnectionImpl.execSQL(ConnectionImpl.java:2487) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.PreparedStatement.executeInternal(PreparedStatement.java:1858) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.PreparedStatement.executeUpdateInternal(PreparedStatement.java:2079) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.PreparedStatement.executeUpdateInternal(PreparedStatement.java:2013) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.PreparedStatement.executeLargeUpdate(PreparedStatement.java:5104) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at com.mysql.jdbc.PreparedStatement.executeUpdate(PreparedStatement.java:1998) ~[mysql-connector-java-5.1.44.jar:5.1.44]
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_151]
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_151]
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_151]
at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_151]
at org.apache.tomcat.jdbc.pool.StatementFacade$StatementProxy.invoke(StatementFacade.java:114) ~[tomcat-jdbc-8.5.23.jar:na]
at com.sun.proxy.$Proxy143.executeUpdate(Unknown Source) ~[na:na]
at org.hibernate.engine.jdbc.internal.ResultSetReturnImpl.executeUpdate(ResultSetReturnImpl.java:205) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.dialect.identity.GetGeneratedKeysDelegate.executeAndExtract(GetGeneratedKeysDelegate.java:57) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.id.insert.AbstractReturningDelegate.performInsert(AbstractReturningDelegate.java:42) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.persister.entity.AbstractEntityPersister.insert(AbstractEntityPersister.java:2909) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.persister.entity.AbstractEntityPersister.insert(AbstractEntityPersister.java:3480) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.action.internal.EntityIdentityInsertAction.execute(EntityIdentityInsertAction.java:81) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.engine.spi.ActionQueue.execute(ActionQueue.java:623) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.engine.spi.ActionQueue.addResolvedEntityInsertAction(ActionQueue.java:277) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.engine.spi.ActionQueue.addInsertAction(ActionQueue.java:258) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.engine.spi.ActionQueue.addAction(ActionQueue.java:303) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.event.internal.AbstractSaveEventListener.addInsertAction(AbstractSaveEventListener.java:318) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.event.internal.AbstractSaveEventListener.performSaveOrReplicate(AbstractSaveEventListener.java:275) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.event.internal.AbstractSaveEventListener.performSave(AbstractSaveEventListener.java:182) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.event.internal.AbstractSaveEventListener.saveWithGeneratedId(AbstractSaveEventListener.java:113) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.jpa.event.internal.core.JpaPersistEventListener.saveWithGeneratedId(JpaPersistEventListener.java:67) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.event.internal.DefaultPersistEventListener.entityIsTransient(DefaultPersistEventListener.java:189) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.event.internal.DefaultPersistEventListener.onPersist(DefaultPersistEventListener.java:132) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.event.internal.DefaultPersistEventListener.onPersist(DefaultPersistEventListener.java:58) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.internal.SessionImpl.firePersist(SessionImpl.java:773) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at org.hibernate.internal.SessionImpl.persist(SessionImpl.java:758) ~[hibernate-core-5.2.8.Final.jar:5.2.8.Final]
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_151]
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_151]
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_151]
at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_151]
at org.springframework.orm.jpa.ExtendedEntityManagerCreator$ExtendedEntityManagerInvocationHandler.invoke(ExtendedEntityManagerCreator.java:347) ~[spring-orm-4.3.13.RELEASE.jar:4.3.13.RELEASE]
at com.sun.proxy.$Proxy114.persist(Unknown Source) ~[na:na]
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_151]
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_151]
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_151]
at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_151]
要将你的数据库编码方式从utf-8变成utf8mb4
mysql版本要5.5+

1. 修改表字段字符集为utf8mb4

alter table 表名 modify column 字段名 varchar(500) character set utf8mb4;

2.修改表字符集utf8mb4

alter table 表名 charset=utf8mb4;

3.修改数据库的字符集utf8mb4

alter database 数据库名 character set utf8mb4;

修改完后记得重启一下mysql服务

windows下重启mysql服务的办法：

1.我的电脑——（右键）管理==>服务与应用程序==>服务==>MYSQL==>停止==>开启

2.Win+R==>net stop mysql==> net start mysql

如果上面不行的话，那就祭出大招：改mysql配置my.ini

[client]
default-character-set=utf8mb4
[mysqld]
character_set_server=utf8mb4

然后重启

查看mysql编码方式如下

然后就可以放心的存储表情

ok.

题外话：

可以用其他公司提供的评论框组件，功能会更加完善。

http://changyan.kuaizhan.com/static/help/

友言：

http://www.uyan.cc/

转载于:https://www.cnblogs.com/sufferingStriver/p/8467020.html

baidui8595
关注
【MySQL】Java.sql.SQLException Incorrect string value: \xF0\x9F\x98\x8D\xE8\xBE...
九师兄
06-21 1995
1.背景 因为用markdown写入的文件，现在要导入到mysql数据库，但是导入的时候报错如下。 原因是该种字符串为Emoj表情内容，每个字符占用4个字节，在Mysql中默认最大支持3个字节，超长了，所以报错了。 2.解决方法1 要用这种策略，如果MySql版本低于5.5.3，首先要进行版本升级，然后将对应的数据类型改为utf8mb4类型。如果使用的是Connector/J 连接数据库，需要在配置中把编码格式改为utf8mb4（set character_set_server=utf8mb4 in th.
存储emoji表情时，数据库存储失败 ，控制台 Caused by: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x97\
weixin_38289196的博客
11-20 961
这里介绍两种解决方式， 1.修改数据库字段 2.对字符转译 第一种方式 1、先去改动表字段字符集为utf8mb4：  ALTER TABLE user MODIFY `username` TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ; 运行完后，再在手机端的app測试，依旧报相同的错误。2、再去改动表字符集utf8mb4： A...
利用HTML、CSS 实现带表情的评论框的制作教程
01-19
HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。 图1 图2 　　实现的代码： 　　html代码： XML/HTML Code复制内容到剪贴板                                 <textarea class=Input_text></textarea>     
HTML带表情的评论框
pengyaou的博客
09-30 1435
带表情的评论框实现，插入表情到当前光标位置。 原文出处/在线演示
js 带表情的评论输入框问题
weixin_30794851的博客
08-02 327
<div class="comment_con clearfix"> <div class="comment_input_box"> <!-- div 模拟input输入框　 --> <div type="text" class="comment_input" contenteditable="true"...
非常漂亮的带多种表情评论留言框.zip
07-11
非常漂亮的带多种表情评论留言框，非常适用于企业网站或者商城网站，做留言这块是很适合的，丰富的表情，很不错的效果，php中文网推荐下载！
Vue + semanticUI + Java 实现多级评论
王星星
08-25 4165
交友 背景： 最近在弄一个博客网站，前端是vue + segmentUI ，后台用的springboot。在弄到评论这一块的时候，不知道级联嵌套评论怎么搞，从上午想到现在想出来了，特来记录一下 后台 后台是通过树来实现的。 数据库的表结构如下所示： 需要做的就是通过这个表，构建一个树，java代码如下： package cn.zi10ng.blog.util; import cn.zi10...
MySQL存储表情时报错：java.sql.SQLException: Incorrect string value:‘\xF0\x9F\x92\xA9\x0D\x0A...’的解决方法
08-27
主要给大家介绍了关于MySQL存储表情时报错：java.sql.SQLException: Incorrect string value: 'xF0x9Fx92xA9x0Dx0A...'的解决方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
MySQL存储表情时报错：java.sql.SQLException: Incorrect string value:‘\xF0\x9F\x92\xA9\x0D\x0A…’的解决方法
12-16
本文主要介绍了关于MySQL存储表情报错：java.sql.SQLException: Incorrect string value: ‘\xF0\x9F\x92\xA9\x0D\x0A…’的相关解决方法，分享出供大家参考学习，下面话不多说了，来一起看看详细的介绍： ...
java.sql.sqlexception: incorrect string value: '\xf0\x9f\x91\x8d\xf0\x9f...
06-06
"\xf0\x9f\x91\x8d\xf0\x9f" 是一个Unicode字符序列，它通常表示一个emoji表情。 由于MySQL在处理字符串时默认使用的是Latin1字符集，而这个字符集无法识别这种字符，因此就会出现 "incorrect string value" 异常。...
仿陌陌微信的表情弹出界面及表情发送和显示
12-20
这个是在别人的基础上做了一些修改的，修改的地方主要为发送小心的时候可以选择多个表情发送，同时在接受消息的时候也能自动替换为表情。同时将原来的popwindow弹出表情框，修改为了现在常用的类似微信和陌陌的那种表情弹出框，同时增加了几个较为清晰的自己做的表情作为对比！实现了表情和文字的混编等！
以对话框形式弹出表情层，插入到EditText中
05-10
以对话框形式弹出表情层，插入到EditText中。其中有的样式和注释掉的代码更具自己的应用调整，自己设置自己的表情图标，方法一样一样滴。
推荐开源项目：OneSignal Emoji Picker - 简化你的文本输入体验
最新发布
gitblog_00031的博客
03-26 434
推荐开源项目：OneSignal Emoji Picker - 简化你的文本输入体验 去发现同类优质开源项目:https://gitcode.com/ 在我们的日常交流中，表情符号已经成为了一种强大的沟通工具，它们能让信息更加生动有趣。而今天，我要向大家推荐一个开源项目——OneSignal Emoji Picker，这是一个轻量级且易于集成的JavaScript库，能够让你的网站或应用轻松拥有自...
前端html教程—如何让你的页面评论框拥有表情功能
yunduanaoligei的博客
01-19 2665
今天分享下”前端html教程—如何让你的页面评论框拥有表情功能“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。 实现的代码： html代码： XML/HTML Code复制内容到剪贴板
使用v-emoji-picker插件表情不显示报错解决
EStringDoggi的博客
10-27 2892
使用v-emoji-picker插件，报错如下： TypeError: dataEmojis.forEach is not a function 解决： 找到插件的dist目录，进入v-emoji-picker.umd.js，ctrl+f查找‘dataEmojis.forEach’（第2156行左右）修改为dataEmojis.data.forEach（也就是遍历层级错了，加上data） v-...
html中的评论框怎么写,利用HTML、CSS 实现带表情的评论框的制作教程
weixin_42136826的博客
05-31 2880
HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。图1图2实现的代码：html代码：XML/HTML Code复制内容到剪贴板 确定 css3代码：CSS Code复制内容到剪贴板.Input_Box {width: 4...
评论框 添加表情 功能制作
dkvirus
05-23 5569
在评论功能里，经常为了使评论的内容更生动，会引用一些动态的表情来表示心情等。 一、表情效果图 二、准备工作 引入外部js和css文件 1.引入js文件，由于功能的原生js代码依赖jquery，所以还得提前导入jquery.js文件 2.引入css文件  ** js和css文件下载地址：我是下载地址 3.文件目录 找到master文件夹，打开可见以下目录。打开对应
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值