springboot+vue 问题记录

记录近期使用springboot+vue开发项目的遇到问题，及其解决方案

mysql8安装

• mysql8 的 my.ini 配置信息

[client]
# 设置mysql客户端默认字符集
default-character-set=utf8
 
[mysqld]
# 设置3306端口
port = 3306
# 设置mysql的安装目录
basedir=
# 设置 mysql数据库的数据的存放目录，MySQL 8+ 不需要以下配置，系统自己生成即可，否则有可能报错
# datadir=
# 允许最大连接数
max_connections=1000
# 服务端使用的字符集默认为8比特编码的latin1字符集
character-set-server=utf8
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB

• 注意执行mysql命令，包含的文件路径的参数中最好不要带中文，可能会出错的
• mysql8 一些语法在mysql5上不兼容，重新安装mysql8, 使用zip安装mysql8 步骤

# 已管理员的身份运行cmd, 切换目录mysql的bin目录下
# 初始化数据库, 需要删除mysql的data目录， 记录下输出的临时密码
mysqld --initialize --console
# 如果遇到问题可以移除之前mysqld， 并且在任务管理器结束旧版本的 mysqld 运行任务
mysqld remove
# 安装命令
mysqld install
# 启动mysql服务
net start mysql

• 登录并修改密码

-- 格式 mysql -h 主机名 -u 用户名 -p 回车后输入密码
mysql -u root -p 
-- 为了后面方便的连接，使用原生的加密方式
alter user 'root'@'localhost' identified with mysql_native_password by '654321';
-- 刷新
flush privileges;
-- 数据导出
mysqldump -u root -p 数据库名 > 输出文件路径及文件名

• java 连接 jdbc:mysql://127.0.0.1:3306/databaseName?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=GMT%2B8&autoReconnect=true&&useAffectedRows=true
  • 需要设置时区，不然会报错 serverTimezone=GMT%2B8
  • 默认情况下，mybatis 的 update 操作的返回值是 matched 的记录数，并不是受影响的记录数。useAffectedRows=true 表示使用受影响的行的数量进行返回
  • mysql8 推荐连接驱动 com.mysql.cj.jdbc.Driver
• 在为表格，字段起名的时候注意不要和mysql的关键字和保留字冲突，可以在sql语句中使用反引号

redis连接

• windows安装
• 启动命令：redis-server.exe redis.windows.conf
• 使用java连接，注意存放redis文件路径中不要包含中文名，可能会出错的
• 连接超时：io.lettuce.core.RedisCommandTimeoutException: Command timed out 尝试重启一下redis服务
• 配置信息

spring:
  redis:
    # Redis数据库索引（默认为0）
    database: 0
    # Redis服务器地址，单机
    host: 127.0.0.1
    # Redis服务器连接端口，单机
    port: 6379
    # Redis服务器连接密码（默认为空）
    password:
    # 连接超时时间（毫秒）
    timeout: 5000

邮件服务

• 如果在使用 qq邮箱中的POP3/SMTP，发完短信后，点击我已发送， 弹框页面一直空白，尝试使用 win+r 运行 regsvr32 jscript.dll 即可
• axios 默认不发送cookie，所以在使用session 存储验证码信息的信息，需要设置 axios.defaults.withCredentials = true

mybatisplus

• queryWrapper.select(),只有一次有效，eq() 可以多次调用，链式调用

element-ui的样式问题

• element-ui select 下拉框位置错乱

<!-- 默认是插入到body -->
<el-select v-model="form.deptId" placeholder="请选择" :popper-append-to-body="false">
<!-- 添加自己样式 -->
<style scoped>
.el-select-dropdown {
  top: 38px !important;
  left: 0 !important;
}
</style>

• element-ui 的 table 组件时 表格线条不对齐

body .el-table th.gutter {
    display: table-cell !important
}

• 在vue中添加了样式，但在页面时无效果, 使用css预处理器的时候，使用/deep/ 样式深度影响

<style scoped>
  .avatar-uploader /deep/ .el-upload:hover {
    border-color: #409EFF;
  }
</style>

element-ui组件

• 使用Steps步骤条和Tabs 选项卡组件的 使用 :active="parseInt(activeIndex)"两者使用不同的类型
  • Steps active 是需要数值
  • Tab name 需要字符串
• el-menu-item 组件 有route 属性，可以传路由对象，单独传string, 会在当前路径上拼接上，建议使用route对象
• el-image 图片初始化加载失败问题： 原因可能是src路径一旦初始化加载失败的话就没有异步刷新，可以使用v-if进行判断
• el-table: 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。

vue

• 组件起名的时候不要使用vue内置的名称，可能会报 Do not use built-in or reserved HTML elements as component id
  • 参考：聊聊 Vue 组件命名那些事
• 在为自己定义的组件绑定事件的时候，使用 @click.native , native 用来监听根元素的原生事件

样式

• vue中修改第三方组件的样式不生效
• 解决方案一: vue可以混用本地和全局样式，因此对子组件的非根元素样式修改，可以单独放在一个非 scoped 样式中
• 解决方案二：加上/deep/，组件的样式可以渗透到子组件相应的元素上

props

• vue是单向数据流, 当直接在子组件修改基本数据的值，会报错，而对象保存的是地址，修改对象的内的值不会报错
  • 通过$emit派发一个自定义事件，父组件收到后，由父组件进行修改
  • 如果考虑只在当前子组件进行修改，应该在子组件里深复制一个副本
  • 通过计算属性修改
  • 父组件 传进去的时候加上 .sync, 子组件 通过this.$emit(‘update:xxx’, params)
• vue 子组件使用props接收来自父组件的传的值，在子组件的created,mounted生命周期读取不到props的值
  • 原因：父组件传值使用异步传输，在vue初始化这些声明周期方法的时候，值未传过来
  • 解决方法：使用vue的watch去监听，完成需要初始化的方法
• Vue子组件调用父组件的方法
  • 直接在子组件中通过this.$parent.event来调用父组件的方法 （少用）
  • 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件 （常用）
  • 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件 （不用）

数据响应式变化

• 数组中添加了数据, 但是打印的时候为[], 点击空数组时里面却有数据，原因在异步之前打印，控制台点击展开会获取最后的结果
  • 可以使用setTimeout等待一段时候再获取数据