VMware Workstation Pro v16.2.4 激活

下载方式：VMware官网
激活方式：输入密钥 ZF3R0-FHED2-M80TY-8QYGC-NPKYF

阅读全文

mermaid 流程图

graph测试

垂直流程图 graph TD：

graph TD;
    好好摸鱼-->辞职;
    好好摸鱼-->跑路;
    跑路-->赚钱;
    辞职-->赚钱;
    跑路-->高薪;
    辞职-->高薪;
    赚钱-->人生巅峰;
    高薪-->人生巅峰;        
    人生巅峰-->好好摸鱼;

水平流程图

graph LR;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

flowchart 测试

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
    style id1 fill:#f9f,stroke:#333,stroke-width:4px

sequenceDiagram
    participant z as 张
    participant l as 刘
    loop 中秋三天假
        z->>l: 吃了吗您呐？
        l-->>z: 没吃，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了，哈哈
        end
        opt 大过节的
            l-->z: 祝您中秋快乐啊
        end
    end

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

sequenceDiagram测试

sequenceDiagram;
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

Hexo 使用教程

1.新建页面

命令：hexo new post 2022测试

添加 Tags：修改 tags 内容为tags: [Github,hexo]

2.添加图片

阅读全文

nvm

windows环境安装nvm

安装 nvm-setup.exe

安装路径不能包含空格。

1. NVM安装路径设置为 D:\nvm
2. Node.js Symlink路径设置为 D:\nvm\node.js

安装nvm前不必卸载之前已安装的node.js环境，安装nvm时会提示“是否允许nvm控制已安装的node.js版本？”，点同意即可。nvm会自动把已安装的Node.js文件夹移动到设置好的Node.js Symlink路径，即 **D:\nvm\node.js**。

使用nvm解决nodejs版本不兼容造成的hexo警告信息

根据Hexo官网介绍，不同版本的Hexo依赖不同版本的Node.js

If you are stuck with older Node.js, you can consider installing a past version of Hexo.

Please note we do not provide bugfixes to past versions of Hexo.

We highly recommend to always install the latest version of Hexo and the recommended version of Node.js, whenever possible.

hexo在较高版本的node.js环境下运行时的警告：

使用nvm命令安装（nvm install v12）并使用nvm use命令切换node.js版本为v12，警告消失：

阅读全文

Promise

1 Promise 的定义和使用

Promise 是 ES6 引入的异步编程的新解决方案，语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

一个 Promise 必然处于以下几种状态之一

• 待定 pending：初始状态，既没有被兑现，也没有被拒绝
• 已兑现 fulfilled：意味着操作成功完成
• 已拒绝 rejected：意味着操作失败

Promise 的使用

• Promise 构造函数new Promise((resolve, reject) => {})
• Promise.prototype.then()方法
• Promise.prototype.catch()方法

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

let p = new Promise(function (resolve, reject) {
    // 使用 setTimeout 模拟请求数据库数据操作
    setTimeout(function () {
        let isRight = true; // 这个异步请求数据库数据操作是否正确返回数据
        if (isRight) {
            let data = '数据库中的数据';
            resolve(data); // 设置 Promise 对象的状态为操作成功
        } else {
            let err = '数据读取失败！'
            reject(err); // 设置 Promise 对象的状态为操作失败
        }
    }, 1000);
});
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
})

2 Promise 封装读取文件

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

// 使用 nodejs 的 fs 读取文件模块
const fs = require('fs');

const p = new Promise(function (resolve, reject) {
    fs.readFile('./resources/为学.txt', (err, data) => {
        if (err) reject(err); // err 是一个异常对象
        resolve(data);
    })
})

p.then(function (value) {
    console.log(value.toString()); // 转为字符串输出
}, function (reason) {
    console.log('读取失败!!');
})

3 Promise 封装 Ajax 请求

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

const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('get', 'https://api.apiopen.top/getJoke');
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response); // 成功
            } else {
                reject(xhr.status); // 失败
            }
        }
    }
});

// 指定回调
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
})

4 Promise.prototype.then 方法

Promise.prototype.then 方法返回的结果依然是 Promise 对象，对象状态由回调函数的执行结果决定

具体情况如下

• 若 then 方法写返回值，则 then 方法返回的对象的状态值为成功 fulfilled，返回结果值为 undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('用户数据')
        reject('出错了');
    }, 1000);
})
// 未设定返回值
const res = p.then((value) => {
    console.log(value);
}, (reason) => {
    console.warn(reason);
})
// 打印 then 方法的返回值
console.log(res);

• 如果回调函数中返回的结果是非 Promise 类型的属性，则 then 方法返回的对象，其状态为成功 fulfilled，返回结果值取决于 then 方法所执行的是哪个函数（resolve 或 reject）

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

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('用户数据')
        reject('出错了');
    }, 1000);
})
 // 返回的非 Promise 对象
const res = p.then((value) => {
    console.log(value);
    return '成功了！！';
}, (reason) => {
    console.warn(reason);
    return '出错啦！！'
})
// 打印 then 方法的返回值
console.log(res);

• 如果回调函数中返回的结果是 Promise 类型 return new Promise()，则 then 方法返回的 Promise 对象状态与该返回结果的状态相同，返回值也相同

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

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('用户数据')
        // reject('出错了');
    }, 1000);
})
const res = p.then((value) => {
    console.log(value);
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        resolve('（1）成功了！！！');
        // reject('（1）出错了！！！')
    })
}, (reason) => {
    console.warn(reason);
    return new Promise((resolve, reject) => {
        // resolve('（2）成功了！！！');
        reject('（2）出错了！！！')
    })
})
// 打印 then 方法的返回值
console.log(res);

• 如果回调函数中返回的结果是 throw 语句抛出异常，则 then 方法的对象的状态值为 rejected，返回结果值为 throw 抛出的字面量或者 Error 对象

1
2
3
4
5
6
7
8
9
10
11
12
13

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('用户数据');
    }, 1000);
});
const res = p.then((value) => {
    console.log(value);
    return new Promise((resolve, reject) => {
        throw new Error('错误了！！');
    })
});
// 打印结果
console.log(res);

4 链式调用

Promise.prototype.then 方法返回的结果还是 Promise 对象，这意味着我们可以继续在该结果上使用 then 方法，也就是链式调用，杜绝回调地狱

1
2
3
4
5

const p = new Promise(resolve=>{}, reject=>{});
p.then(value=>{}, reason=>{})
.then(value=>{}, reason=>{})
.then(value=>{}, reason=>{})
...

5 Promise.prototype.catch

catch() 方法返回一个 Promise，并且处理拒绝的情况
它的行为与调用 Promise.prototype.then(undefined, onRejected) 相同

1
2
3

obj.catch(onRejected);
等同于
obj.then(undefined, onRejected);

语法

1
2
3
4
5

p.catch(onRejected);

p.catch(function(reason) {
   // 拒绝
});

举例

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

var p1 = new Promise(function (resolve, reject) {
    resolve('Success');
});

p1.then(function (value) {
    console.log(value); // "Success!"
    throw 'oh, no!';
}).catch(function (e) {
    console.log(e); // "oh, no!"
}).then(function () {
    console.log('有 catch 捕获异常，所以这句输出');
}, function () {
    console.log('没有 catch 捕获异常，这句将不会输出');
});

// 结果
Success
oh, no!
有 catch 捕获异常，所以这句输出

6 链式调用练习-多个文件读取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

const fs = require('fs');

// 回调方式
fs.readFile('./resources/为学.md', (err, data1)=>{
    fs.readFile('./resources/插秧诗.md', (err, data2)=>{
        fs.readFile('./resources/观书有感.md', (err, data3)=>{
            let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
            console.log(result);
        });
    });
});

// promise 方式
new Promise((resolve, reject) => {
    fs.readFile('./resources/users.md', (err, data) => {
        resolve(data); // 设置状态
    })
}).then(value => {
    return new Promise((resolve, reject) => {
        // value 为第一次读取的文件数据，data 为第二次（当前）读取的数据
        fs.readFile('./resources/orders.md', (err, data) => {
            resolve([value, data]); // 将上轮读取结果和本轮合并传到下一轮轮读取操作
        });
    });
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/goods.md', (err, data) => {
            // value 为上一轮传递过来的文件数据数组
            value.push(data);
            // 传给下一轮操作
            resolve(value);
        });
    });
}).then(value => {
    // 合并数组元素，输出
    console.log(value.join('\r\n'));
});

以上只是 Promise 的入门，更多还要进一步深入学习

HTTP协议本身不是为了长连接而开发的。所谓长连接，指的是TCP连接建立之后，长时间持续保持连接状态并进行通讯。

虽然HTTP协议后来引入的Connection: keep-alive机制有保持连接的效果，但设计初衷却是为了在几个连续的HTTP请求之间共享TCP连接以加快页面加载速度。

而在浏览器中实现类似于TCP长连接的需求，进行实时双向通讯，是有着诸多实际需要的。这催生了WebSocket的产生。

WebSocket连接的建立

客户端向Web服务器发起HTTP请求，寻求Upgrade为WebSocket。

1
2
3
4
5
6

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

如果服务器支持并允许这个WebSocket请求的话，返回一个类似于下面这样的HTTP相应：

1
2
3
4

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

(以上示例来源于 Writing WebSocket Servers)

接下来，客户端和服务器端开始根据WebSocket协议进行数据传送和接收。

握手过程中的“口令”

上面的握手过程中，客户端通过”Sec-WebSocket-Key”发送了一个随机字符串。

服务器端返回的验证字段”Sec-WebSocket-Accept”的计算过程如下：

1
2
3
4

set key    [web::request "Sec-WebSocket-Key"]
set magic  "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
set secret [::base64::encode [sha1::sha1 -bin "$key$magic"]]
web::response -set "Sec-WebSocket-Accept" $secret

浏览器里的WebSocket

浏览器里的WebSocket主要作为客户端。其接口本身倒并不复杂，主要是建立连接，监听处理4个事件，发送消息，和关闭连接这几个操作。

• new WebSocket(url) # 建立连接
• onopen # 连接建立时的回调函数
• onmessage # 收到消息时的回调函数
• onclose # 连接关闭时的回调函数
• onerror # 发生错误时的回调函数
• send(message) # 发送消息
• close(code?, reason?) # 关闭连接

相关文档可以参考 WebSocket @ Mozilla Web Docs

代码轮廓如下：

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

var socket = new WebSocket('ws://some.host.com:8080/');

socket.onopen = function (event) {
    socket.send('Hello Server!');
};

socket.onmessage = function (event) {
    console.log('Message from server', event.data);
};

socket.onclose = function (event) {
    console.log('Good Bye Server!', event.data);
};

socket.onerror = function (event) {
    console.log('Oh! Some Error!', event.data);
};

socket.send("Message to server");

socket.close();

为什么不用HTTP的keep-alive机制

• Web服务器对于keep-alive很多时候有timeout限制。
• 每次HTTP请求“冗余”的头部信息也是一种传输负担。
• HTTP请求依赖于客户端的”Pull”。
• 服务器端的主动”Push”无法实现。需要客户端通过轮询（polling）来变通。

相关资源

• rfc6455: The WebSocket Protocol
• rfc2616: Hypertext Transfer Protocol – HTTP/1.1

TCP和HTTP握手

TCP三次握手建立连接

TCP 是传输控制协议（Transmission Control Protocol）的缩写，用于在计算机之间可靠地传输数据。在建立 TCP 连接时，需要进行三次握手，即客户端发送 SYN 报文，服务器返回 SYN-ACK 报文，客户端再发送 ACK 报文，从而建立连接。这个过程的目的是确保双方都能够接收和发送数据，以保证数据传输的可靠性和完整性。

具体来说，TCP 连接的三次握手过程如下：

1. 客户端发送 SYN 报文：客户端向服务器发送 SYN（同步）报文，请求建立连接，并选择一个随机的初始序列号（sequence number）。
2. 服务器返回 SYN-ACK 报文：服务器收到客户端的 SYN 报文后，向客户端发送 SYN-ACK（同步-确认）报文，表示已收到客户端的请求，并确认客户端的初始序列号。服务器同时也选择一个随机的初始序列号。
3. 客户端发送 ACK 报文：客户端收到服务器的 SYN-ACK 报文后，向服务器发送 ACK（确认）报文，确认收到了服务器的确认，并发送自己的初始序列号。此时，TCP 连接已建立。

以下是 TCP 连接三次握手的 Mermaid 代码和图示：

sequenceDiagram
    participant Client
    participant Server
    Client->>Server: SYN(同步报文)
    Server->>Client: SYN-ACK(同步-确认报文)
    Client->>Server: ACK(确认报文)

基于TCP的HTTP

阅读全文

Spring与SpringBoot

Spring框架，它的主要功能包括IoC容器、AOP支持、事务支持、MVC开发以及强大的第三方集成功能等。

那么，Spring Boot又是什么？它和Spring是什么关系？

Spring Boot是一个基于Spring的套件，它帮我们预组装了Spring的一系列组件，以便以尽可能少的代码和配置来开发基于Spring的Java应用程序。

阅读全文

为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案
本地存储特性。

• 1 数据存储在用户浏览器中
• 2 设置、读取方便、甚至页面刷新不丢失数据
• 3 容量较大，sessionStorage约5M、localStorage约20M
• 4 只能存储字符串，可以将对象JSON.stringify() 编码后存储

1 window.sessionStorage

方法：

• 存储数据 ： sessionStorage.setItem(key, value)
• 获取数据 ： sessionStorage.getItem(key)
• 删除数据 ： sessionStorage.removeItem(key)
• 删除所有数据 ： sessionStorage.clear()

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口（页面）下数据可以共享
3. 以键值对的形式存储使用

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
  console.log(localStorage.getItem('username'));

  var ipt = document.querySelector('input');
  var set = document.querySelector('.set');
  var get = document.querySelector('.get');
  var remove = document.querySelector('.remove');
  var del = document.querySelector('.del');
  set.addEventListener('click', function() {
    // 点击之后，可以把表单里面的值存储起来
    var val = ipt.value;
    sessionStorage.setItem('uname', val);
    // sessionStorage.setItem('pwd', val);
  });
  get.addEventListener('click', function() {
    // 当我们点击了之后，就可以把表单里面的值获取过来
    console.log(sessionStorage.getItem('uname'));
  });
  remove.addEventListener('click', function() {
    sessionStorage.removeItem('uname');
  });
  del.addEventListener('click', function() {
    sessionStorage.clear(); // 清除所有的
  });
</script>

2 window.localStorage

• 存储数据 ： localStorage.setItem(key, value)
• 获取数据 ： localStorage.getItem(key)
• 删除数据 ： localStorage.removeItem(key)
• 删除所有数据 ： localStorage.clear()

1. 声明周期永久生效，除非手动删除 否则关闭页面也会存在
2. 可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>

<script>
  var ipt = document.querySelector('input');
  var set = document.querySelector('.set');
  var get = document.querySelector('.get');
  var remove = document.querySelector('.remove');
  var del = document.querySelector('.del');
  set.addEventListener('click', function() {
    var val = ipt.value;
    localStorage.setItem('username', val);
  })
  get.addEventListener('click', function() {
    console.log(localStorage.getItem('username'));
  })
  remove.addEventListener('click', function() {
    localStorage.removeItem('username');
  })
  del.addEventListener('click', function() {
    localStorage.clear();
  })
</script>

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

<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名

<script>
  var username = document.querySelector('#username');
  var remember = document.querySelector('#remember');
  if (localStorage.getItem('username')) {
    username.value = localStorage.getItem('username');
    remember.checked = true;
  }
  remember.addEventListener('change', function() {
    if (this.checked) {
      localStorage.setItem('username', username.value)
    } else {
      localStorage.removeItem('username');
    }
  })
</script>

阅读全文