在自己做一个项目玩时，在做评论的时候。
选中了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/
- 表情存储异常--mybatis抛出异常（java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\x94' for column 'name' at row 1）
文章参考 https://blog.csdn.net/junsure2012/article/details/42171035 https://www.cnblogs.com/WangYunShuai ...
- mysql 保存emoji时报，数据库报错：Caused by: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x82\xF0\x9F...' for column 'review' at row 1
错误原因:我们可以看到错误提示中的字符0xF0 0x9F 0x98 0x84 ,这对应UTF-8编码格式中的4字节编码(UTF-8编码规范).正常的汉字一般不会超过3个字节,为什么为出现4个字节呢?实 ...
- mysql 无法存储表情字符 java.sql.SQLException: Incorrect string value: '\xF0\x9F\x90\xBE",...' for column 'XXXX' at row 1
1.变更字段类型 ALTER TABLE api_log MODIFY COLUMN remark longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_uni ...
- 【MySQL】存储emoji表情报错（Incorrect string value: '\xF0\x9F\x98\x82\xF0\x9F...'）的解决方案
Emoji表情字符现在在APP已经广泛支持了.但是MySQL的UTF8编码对Emoji字符的支持却不是那么好.所以我们经常会遇到这样的异常: Java.sql.SQLException: Inco ...
- Django1.10+Mysql 5.7存储emoji表情，报Incorrect string value: '\\xF0\\x9F\\x90\\xA8' for column 'signature' at row 1的解决方法
问题: 在做webapp项目的时候,用户提交emoji数据,控制台报错:Incorrect string value: '\\xF0\\x9F\\x90\\xA8' for column 'signa ...
- Mysql之Incorrect string value: '\xF0\x9F\x98\x89 \xE6... 保存emoji表情
错误信息如下: Incorrect string value: '\xF0\x9F\x98\x89 \xE6...' 问题产生的原因是字符串不兼容4字节的unicode导致的,一般我们常见的表情编码等 ...
- bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入
如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层 打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...
- Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F 表情插入mysql 报错
导致报错的问题是 emoji表情是4位 mysql 5.5.3版本以下数据库(utf8格式为3位),不支持.需要更新mysql5.5.3及以上的版本数据库并设置默认或者表或者字段的格式为 utf8mb ...
- element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面
造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...
随机推荐
- ssh 保持连接
ssh 保持连接 使用 ssh 登陆到云主机上,一段时间没有操作终端,会发现 ssh 连接断了,终端无响应. 配置 ssh 客户端,使其以一定间隔时间向 sshd 服务端发送心跳包,可解决此问题. / ...
- 28个jQuery性能优化的建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- 在苹果iOS平台中获取当前程序进程的进程名等信息
本文由EasyDarwin开源团队成员Penggy供稿: Objective-C 提供 NSProcessInfo 这个类来获取当前 APP 进程信息, 然而我们的静态库是 pure C++ 工程. ...
- 九度OJ 1143：Primary Arithmetic（初等数学） （进位）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:616 解决:254 题目描述: Children are taught to add multi-digit numbers from ri ...
- gitlab 外网 无法访问 查端口 看文档
云服务器安装成功后 curl 页面可以正常跳转 重置密码的token 页面可以生成 但是 外网无法 访问 [root@test ~]# curl 127.0.0.1:18021 <htm ...
- STM32 ~ STM32 TIM重映射
复用功能 没有重映射 部分重映射 完全重映射 TIM3_CH1 PA6 PB4 PC6 CH2 PA7 PB5 PC7 CH3 PB0 PB0 PC8 CH4 PB1 PB1 PC9 /**重映射 t ...
- ORACLE 表空间扩展
最近公司在对即将上线的系统做数据迁移和压力测试,于是乎需要和 Oracle 经常的打交道.今天正好碰到了表空间的问题,记录下来以后备用.也是最近才学习到的,原来 Oracle 表空间也是有大小限制的, ...
- CodeForces - 385E Bear in the Field —— 矩阵快速幂
题目链接:https://vjudge.net/problem/CodeForces-385E E. Bear in the Field time limit per test 1 second me ...
- 人生苦短之Python列表拷贝
列表拷贝的几种方法: 1.工厂函数 b=list(a) >>> a=[1,2,3,4] >>> b=list(a) >>> b [1, 2, ...
- tomcat启动项目被重新加载，导致资源初始化两遍
之前没有遇到过这个问题,配了三天的项目了,惊人啊!!!各种怪问题全被我赶上了.真有种骂人的冲动. tomcat启动项目时,项目资源被加载两遍. 原因:配置虚拟目录导致,项目被重新加载. <Hos ...
