带emoji表情弹出层的评论框，semantic+emoji picker，java.sql.SQLException: Incorrect string va

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

选中了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/