我的学习笔记

前言

最近再学习前端的课程，学到了flex布局，尤为重要，所以下面记录一下，没事的时候多看看

概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

前言

在表单中使用了fixed后后面的操作栏第一次刷新正常，后面再刷新会发生错位

解决

表格里使用了 show-overflow-tooltip 属性，导致未浮动的表格正常显示，浮动的表格变宽错位

前端代码如下

1
2
3
4
5
6
7
8

<el-table-column prop="name" label="姓名" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="sex" label="性别" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="age" label="年龄" min-width="100" show-overflow-tooltip></el-table-column>
 <el-table-column label="操作"  width="151"  fixed="right">
      <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleClick(scope.row)">操作按钮</el-button>
     </template>
</el-table-column>

解决办法就是把所有el-table-column标签都加上show-overflow-tooltip属性即可解决错位问题，可能是一个bug，fixed表格并未完全继承原表格的show-overflow-tooltip属性所导致的。

前言

最近刚入门vue，在开发时遇到个问题，就是在调用resetFields方法后部分字段没有重置为默认值，默认值声明都是一样的，prop属性也都有，但是就是不生效，下面记录一下

解决

一般这种的可能有几个原因

• el-form-item的prop属性缺失或属性值 不等于 字段名称
• 表单项本身就有默认值
• 表单数据绑定时未使用$nextTick函数（resetFields 重置到挂载前的数据）
• 未显示的表单项无法重置
• 已禁用的表单项无法重置

所以问题很明显了，我的有的是禁用了，有的是用了v-if判断是否显示了，所以导致无法重置，所以在调用resetFields方法时可以手动把不能重置的字段手动重置一下

前言

近来项目中使用mp时用到了个问题，因为大部分表都有createTime字段和updateTime字段，所以这些字段肯定需要自动填充，当我按照要求配置了注解和相关的配置后，发现不能生效

解决

经过仔细查看代码后发现，自动填充时会判断字段类型是否一致，只有一致才会填充，我实体类中使用的时Date类型的日期，但是填充时用的确实LocalDateTime类型的，所以导致类型不一致，无法填充，所以一定要注意此类问题

前言

最近学习前端的过程中遇到过一些类型的问题，就是比如你默认声明的字符串类型，但是后面赋值的时候却给他赋值了各数字类型亦或者别的类型，就会出现不可预知的错误，而且能让你找半天找不出来问题，因为js不像java这种强类型语言，类型不对，编译都编译不过去，所以js中类型声明时一定要特别注意，不要随意赋值

问题

很多时候后端的主键或者ID用的是长整型的数字，位数在18位左右，例如1600783232689016833这样的数字，如果直接返回给前端Long型，前端是无法保证精度的，可能最终会变为这样1600783232689016800,这是因为它已经超出了js中数字所能表示的最大值，因此后端返回这样的数字时最好直接转换为string类型

解决

如果后端项目用的jackson，则需要添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@Configuration(proxyBeanMethods = false)
@ConditionalOnClass(ObjectMapper.class)
@AutoConfigureBefore(JacksonAutoConfiguration.class)
public class JacksonConfiguration {

   @Bean
   @ConditionalOnMissingBean
   public Jackson2ObjectMapperBuilderCustomizer customizer() {
      return builder -> {
         builder.locale(Locale.CHINA);
         builder.timeZone(TimeZone.getTimeZone(ZoneId.systemDefault()));
         builder.simpleDateFormat(DatePattern.NORM_DATETIME_PATTERN);
         builder.serializerByType(Long.class, ToStringSerializer.instance);
         builder.modules(new SirengineJavaTimeModule());
      };
   }

}

这是我项目中实际用过的，重点是builder.serializerByType(Long.class, ToStringSerializer.instance); 其他的是时间格式化的无需关注，这样做是全局的转换，所以配置后，实体类中正常使用Long型即可，无需改为string类型

如果后端项目中用的是fastjson，则需要以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@Configuration
public class SessionConfig implements WebMvcConfigurer{
    
    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        FastJsonHttpMessageConverter fastJsonConverter = new FastJsonHttpMessageConverter();
        FastJsonConfig fjc = new FastJsonConfig();
        /**
         * 序列换成json时,将所有的long变成string
         * 因为js中得数字类型不能包含所有的java long值
         */
        SerializeConfig serializeConfig = SerializeConfig.globalInstance;
        serializeConfig.put(Long.class , ToStringSerializer.instance);
        serializeConfig.put(Long.TYPE , ToStringSerializer.instance);
        fjc.setSerializeConfig(serializeConfig);
        fastJsonConverter.setFastJsonConfig(fjc);
        converters.add(fastJsonConverter);
    }
}

如果只需要个别的Long型转为string类型，则可以使用注解@JSONField(serializeUsing = ToStringSerializer.class)在实体类Long型的字段上，一般最好使用全局的，尽量别用这个

前言

最近用docker装了一个mysql，有个区分大小写的配置需要改动，改完我直接重启这个容器了，发现直接启动不起来了，查看日志是那个配置写错了，但是没法用 docker exec这样的去该了，下面说下其他方式

docker cp命令

如果容器运行正常，可以直接用exec命令去修改容器里配置文件，命令如下

1

docker exec -it 容器id bash

但是现在无法启动，所以需要使用其他方式，cp命令，把需要改的配置文件从容器中拷贝到主机中进行修改，命令如下

1
2
3

docker cp 容器id:容器中路径 主机路径
#示例：将容器[223ccw23]中[/etc/mysql/my.conf]文件拷贝到当前目录
docker cp 223ccw23:/etc/mysql/my.conf ./

然后用各种方式修改完成后，再用相反的命令复制回去，命令如下

1
2
3

docker cp 主机路径 容器id:容器中路径
#示例：将主机中当前目录下my.cnf文件 拷贝到 容器[223ccw23]中[/etc/mysql/my.conf]
docker cp ./my.cnf 223ccw23:/etc/mysql/my.conf

前言

最接一台服务器到期，上面的mysql数据库需要整体备份下，之前备份都是一个个数据库备份，用的navicat直接导出结构和数据的，但是这个里面有几十个数据库呢，一个个导出，太费时间了，所以想要批量备份导出，看了下，mysqldump命令可以做到，下面具体说下

使用mysqldump

1
2
3
4

mysqldump -u用户名 -p密码 --all-databases > /保存路径/文件名.sql

#例如下面导出所有数据库到当前目录，文件名为all.sql
mysqldump -uroot -p123456 --all-databases > ./all.sql

如果不想全部导出，只需要导出指定的几个数据库也可以，命令如下

1
2
3
4

mysqldump -u用户名 -p密码 --databases 数据库1 数据库2... > 保存路径/文件名.sql

#例如我要导出test1 和test2数据库
mysqldump -uroot -p123456 --databases test1 test2 > ./all.sql

恢复备份

两种方式可以恢复，一种是用navicat直接运行sql，第二种是命令登录mysql，使用source命令恢复，命令如下

1

source ./all.sql

前言

最近用room数据库的时候遇到了一个问题，如果直接按指定条件查询肯定没问题，在dao文件里直接编写sql，但是很多时候，比如各种记录查询，查询条件肯定不止一个，而且各种条件只是and的关系，不是每次查询都需要填写所有搜索条件，这就遇到了一个问题，怎么像mybatis的xml文件那样可以增加if判断，不为空再拼接这个条件呢？

解决

前言

最近启动tomcat时遇到一个报错，Unsupported major.minor version 52.0,意思就是jdk的版本问题，tomcat是8，cmd里java -version输出也是1.8版本，按理说是没有问题的

问题

既然是版本问题，那说明系统里装了可能不止一个版本的jdk，既然tomcat能应用到这个版本，那说明环境变量里可能配置了，查看环境遍历里，虽然系统变量里的确配置的1.8，但是用户变量里用配置的是1.6的jdk

解决

删除这个用户变量里的jdk配置后，启动正常

JDK版本与major.minor version的对照关系

序号 jdk版本 major.minor version
1 1.1 45
2 1.2 46
3 1.3 47
4 1.4 48
5 5 49
6 6 50
7 7 51
8 8 52

前言

最近在改一个前端的项目，里面vue写的页面，嵌入在android客户端里，需要和android客户端有些交互，以前的h5写法很简单，在<script>标签里</script>里写Android要调用的方法即可，但是vue不能这么写，下面说一下方法

方法

首先是定义个方法，在methods里，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

mounted() {
    //将要给原生调用的方法挂载到 window 上面
    window.callJs = this.callJs
},
data() {
    return {
    	code: "123"
	}
},
methods: {
    callJs(code) {
        this.code = code
	}
}
watch: {
    code(val) {
      // 这里处理code变更后的事件
    }
 }

mounted里面是重点，需要将方法挂载到window上，否则调用不到

watch里监听code变化，如果code变化，则处理一些事件，这个可有可无，没有的话就是在callJs里处理