在自己做一个项目玩时，在做评论的时候。
选中了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 ...
随机推荐
- UVA11770 - Lighting Away
题目链接 题意:一个有向图,每对一个结点操作.就能够触发连锁反应,使得该结点及它直接或间接指向的点均获得标记,问至少须要操作多少个结点使得全部结点获得标记 思路:有向图的强连通分量.用Tarjan缩点 ...
- 富文本编辑器 - RichEditor
基本功能 RichEditor 是一个继承自 WebView 的自己定义 view,枚举类型 Type 定了它所支持的排版格式: public enum Type { BOLD, ITALIC, SU ...
- 51NOD 1810 连续区间 分治 区间计数
1810 连续区间 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 80 区间内所有元素排序后,任意相邻两个元素值差为1的区间称为“连续区间” 如:3,1,2是连续区间,但3, ...
- SQuirreL – Phoenix的GUI
本文主要介绍如何通过SQuirreL访问Phoenix,以及如何在SQuirreL中配置Phoenix参数. 什么是SQuirrel? SQuirreL SQL Client是一个开源免费软件, 可以 ...
- 清理yum 缓存
两条命令 yum clean all 以及 rm -rf /var/cache/yum/* 如何有效的清理yum缓存 - CSDN博客 https://blog.csdn.net/nsrainbow/ ...
- Gradle sync failed: Connection timed out: connect
打开AS的project试图,找到gradle目录下的wrapper下面的gradle wrapper.properities找到: distributionUrl=https\://services ...
- Java JSON数据创建和读取
Java json数据创建 package com.JavaTest; import com.google.gson.JsonArray; import com.google.gson.JsonOb ...
- 从数据的角度带你深入了解IPFS
IPFS 和区块链有着非常紧密的联系, 随着区块链的不断发展,对数据的存储需求也越来越高.本文从IPFS 的底层设计出发, 结合源代码, 分析了IPFS 的一些技术细节. 一.概述 IPFS 和区块链 ...
- RAC环境下oracle实例启动问题：ora-01565，ora-17503
今天有现场因为突然听电,数据库服务器停了,需要我远程重启一下. 现场是RAC环境,oracle10.2.0.4. 登录后,startup,报错如下 根据报错,初步判断是共享数据文 ...
- 如何创建WindowsService
创建Windows Service可分为以下几步: 1. 创建一个“Windows Service”项目 2. 设置服务的相关属性,以确定服务的名称及工作机制 属性 设置 ServiceName 服务 ...
