2021-03-24

Spring 与多线程

直接创建线程

public void thread1() {
    new Thread(() -> {
        try {
            for (int i = 0; i < 10; i++) {
                System.out.println("thread-1: " + i);
                TimeUnit.SECONDS.sleep(1);
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }).start();
}

阅读全文

2021-03-15

Go 使用 Yaml

使用 kubernetes-sigs/yaml 来把对象序列化为 yaml 字符串，把 yaml 字符串反序列化为 go 对象。

简单对象

package main
import (
    "fmt"
    "sigs.k8s.io/yaml"
)

type Student struct {
    Id   int    `json:"id"` // 可以是 `yaml:"id"`，但大多数第三方 struct 使用 json，所以这里就不使用 yaml 了
    Name string `json:"name`
}

func main() {
    // [1] 对象序列化为 yaml 字符串
    student1 := Student{1, "Alice"}
    yamlBytes, _ := yaml.Marshal(student1)
    yamlString := string(yamlBytes)
    fmt.Println(yamlString)

    // [2] yaml 字符串反序列化为对象
    student2 := Student{}
    err := yaml.Unmarshal([]byte(yamlString), &student2)

    // yaml 有错误时报错
    if (err != nil) {
        fmt.Println(err)
    }
    
    fmt.Println(student2)
}

下载 yaml:

1 2	go mod init go mod download

编译执行:

1	go run test.go

运行输出:

id: 1
name: Alice

{1 Alice}

阅读全文

2021-01-26

VirtualBox 中安装 Centos

在虚拟机中安装 CentOS，主要有以下步骤:

安装 VirtualBox (简称 VB)
安装 CentOS
配置 CentOS
固定 IP

安装 VirtualBox

访问 https://www.virtualbox.org/ 下载安装即可。

阅读全文

2021-01-06

Axure 创建弹窗

Axure 创建弹窗，主要涉及以下几个方面:

弹窗内容的元素放到动态面板里，这样所有元素都是动态面板的子元素，通过隐藏和显示动态面板来控制弹窗及其内容的可见性
弹窗在页面中是可见的，页面加载的时候隐藏弹窗，需要的时候才显示弹窗。这样编辑的时候可以看到弹窗的内容，否则就是一个黄色块，不方便编辑与查看
弹窗在所属页面的放置位置，不要挡住其他内容，放到页面的旁边即可
弹窗的动态面板居中显示 (Pin to Browser)
如果是需要重复使用的弹窗，可以创建为模板 (Master)，或者根据分模块的思想，也可以把弹窗直接作为 Master，然后在页面中引用

下面我们实现一个如图的弹窗功能:

阅读全文

2021-01-03

5 只猴子，4 只香蕉，怎么分

当你是动物饲养员，有 5 只猴子，只有 4 根香蕉时，应该怎么分？

这个问题看上去简单，其实可以反应到一个社会问题。

不信？往下看。

阅读全文

2021-01-01

Java 操作 Yaml

Java 里可以使用类 Yaml 序列化和反序列化 Bean，有 2 个反序列化 Yaml 文件为 Java Bean 的方式:

在 Yaml 的构造函数中指定 Bean 的类型，然后调用方法 load() 生成 Bean:

1 2	Yaml yaml = new Yaml(new Constructor(User.class)); User user = yaml.load(inputStream);

使用 Yaml 的默认构造函数，然后调用方法 loadAs() 生成 Bean:

1 2	Yaml yaml = new Yaml(); User user = yaml.loadAs(inputStream, User.class);

需要注意的是，下面的代码报错:

1 2	Yaml yaml = new Yaml(); User user = yaml.load(inputStream); // Error: java.util.LinkedHashMap cannot be cast to yaml.User

下面就以类 User 以及类把 User 作为属性时的多种情况为例进行演示，其中:

Yaml 反序列化为 User 的代码是一样的
Yaml 文件的写法需要注意

阅读全文

2020-12-16

快捷键复制粘贴组件

访问剪贴板

使用 navigator.clipboard 对象访问系统的剪贴板:

readText: 读取剪贴板的内容
writeText: 设置剪贴板的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Clipboard</title>
</head>

<body>
    <button id="button-copy">Copy</button>
    <button id="button-paste">Paste</button>

    <script>
        // 设置系统剪贴板的内容
        document.querySelector('#button-copy').addEventListener('click', () => {
            navigator.clipboard.writeText('Hello');
        });

        // 读取系统剪贴板的内容
        document.querySelector('#button-paste').addEventListener('click', () => {
            navigator.clipboard.readText().then(text => {
                console.log(text);
            });
        });
    </script>
</body>
</html>

提示: IE 不支持 Navigator.clipboard，但 Edge 支持。

阅读全文

2020-09-13

Vue :key

我们都知道使用 v-for 渲染数组时都要给每个元素绑定一个 key，官方文档也说的很清 (挠) 楚 (头):

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误。

需要记住一点: 当用来创建 DOM 元素的数据变化后，就会更新 DOM (更新了才能在界面上看到)，为了提高效率，vue 使用了 key 来判断是复用已有的 DOM 还是创建新的 DOM (在同一个 parent DOM element 下进行比较):

如果能找到相同 key 的 DOM 元素，则更新它的内容
如果找不到相同 key 的 DOM 元素，则删除旧的 DOM 元素，新创建一个

上面的内容，懂的人一看就懂，不懂的人仍然是一头雾水。下面我们以一个很简单的修改用户名的例子演示一下应该就能明白什么时候复用，什么时候创建了。

阅读全文

2020-09-05

JS 的正则表达式

JS 中可以用下面 3 种方式使用正则表达式获取数据:

RegExp.exec()
String.match()
String.replace(): 这个用法比较奇葩，但是我喜欢

下面就简单介绍下每一个的用法。

阅读全文

2020-08-30

常用 SQL

创建数据库

1	CREATE DATABASE ebag DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci

增加新列

1	ALTER TABLE table_name ADD COLUMN column_name varchar(64)

分页查询

MySQL 中使用 LIMIT 进行分页，第一个参数是起始位置 offset，从 0 开始，第二个参数是要取多少条记录

1	SELECT * FROM question WHERE subject_code='XXX' LIMIT 0, 30

阅读全文