springboot+vue 问题记录

缺乏、安全感 2023-01-13 14:56 194阅读 0赞

### 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安装][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/` 样式深度影响

## 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 组件命名那些事][Vue]
 *  在为自己定义的组件绑定事件的时候，使用 `@click.native` , native 用来监听根元素的原生事件

### 样式 ###

*  [vue中修改第三方组件的样式不生效][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`等待一段时候再获取数据

[windows]: https://github.com/tporadowski/redis/releases
[Vue]: https://cnodejs.org/topic/5816aabdcf18d0333412d323
[vue]: https://www.cnblogs.com/youhong/p/11637695.html