springboot+vue 问题记录

springboot+vue 问题记录

    • mysql8安装
    • redis连接
    • 邮件服务
    • mybatisplus
    • element-ui的样式问题
    • element-ui组件
    • vue
      • 样式
      • props
      • 数据响应式变化

记录近期使用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 下拉框位置错乱

<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等待一段时候再获取数据

你可能感兴趣的:(Spring+spring,boot,vue)