《VUE前端查询数据页面乱码》问题解决及思考总结

话不多说，先上BUG图：

ps:因为我是做项目时遇到的问题，在这里分享总结一下经验，敏感信息打码的请大拿们多多包涵

首先我们要定位一下是哪里的编码错误导致的：

1.确保数据库里的数据是正常显示的（我的问题出在这里，定位了一圈到头来是虚拟机中mysql库中数据出现的问题）：

首先来到虚拟机，登录到命令行看一下数据库字符编码，是正常的

 找个带中文的数据表，select * from table limit 10;

 可以看到数据是有乱码的，说明问题出在了数据层面。

我的处理方式是重新建了一个数据库，重新导了一下数据。

首先登录mysql，进入mysql>

create database 数据库名;

show create database 数据库名;

核对编码为utf8

 接着source上传好的sql文件

source /路径/数据库.sql

等待执行完，200M大概3~4分钟就导入完毕。show 表名，看看导入成功没。

show tables;

 再次执行查询，核对数据是否正常。

sleect * from 表名；

接着idea更换一下新建的库名字，重新部署一下代码，看效果

 前端已经显示正常：

 

如果数据库显示正常，判断是前端还是后端出了问题“

2.前端是否设置了编码规范：

headers: {
   'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
 } })

 

3.后端连接数据库的时候是否设置连接编码规范：

idea和数据库交互的properties配置文件设置连接方式为:

localhost::3306/数据库名?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNullq

其实如果数据库配置好了这个my.cnf文件(附配置好的数据库编码图)，连接的时候就不用配参数什么的了。