¶开始前的一些准备

首先我们需要在脑海中记熟一些二进制的转换关系，以便直观地理解 Unicode。

其次，我们需要了解字节序。字节序分为大端序（Big-Endian, BE）与小端序（Little-Endian, LE）。只需要记住，大端序的最高位字节存储在最低的内存地址处，而小端序的最高字节存储在最高的内存地址处。

以下是存储 32 位整数 0x12345678 的例子：

¶什么是 Unicode

Unicode（中文：万国码、国际码、统一码、单一码）是电脑科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码，使得电脑可以用更为简单的方式来呈现和处理文字。^[1]

需要注意的是，Unicode 准确来说是一种字符集，而与我们日常中使用的各种编码有所区别。Unicode 给每一个它所管辖的字符分配了一个唯一而确定的 ID（二进制整数），但并没有规定这些字符应该如何储存、传输。规定这些字符如何的则是 UTF（Unicode Transformation Format）标准，即 UTF 是对 Unicode 的编码。

¶Unicode 的组成

¶代码点（Code Point / Code Position）

代码点用来称呼分配给字符的整数。例如，在 Unicode 中字符“爱”的代码点为 U+7231^[2]。在表示代码点时，习惯用 U+ 作为前缀，然后紧接该代码点的十六进制数字。

¶代码空间（Code Space)

所有代码点组成集合称为代码空间。Unicode 的代码空间范围为 U+0000 到 U+10FFFF，一共 1,114,112 个代码点。截至本文写作时间，Unicode 最新标准 12.1.0^[3] 已经给 137,929 个字符分配了代码点。

P.S. Unicode 12.0.0 至 12.1.0 只新增了一个字符，即日本新年号令和的合字（U+32FF）^[3]。

¶平面（Plane）

Unicode 将 U+0000 到 U+10FFFF 分割为 17 个平面，每个平面拥有 65,536 个码点（即 2 字节）。其中，0 号平面称为基本多文种平面（Basic Multilingual Plane, BMP），其他平面则成为补充平面 / 辅助平面（Supplementary Plane）。不同平面的具体划分和作用如下^[4]：

BMP 是 Unicode 中最重要的平面，常用的字符都定义在这个平面中。

在BMP中定义的代码点包括^[5]：

• ASCII 共 128 个字符，占据了 BMP 的前 128 个代码点
• ISO-8859-1 共 256 个字符，占据了 BMP 的前 256 个代码点
• CJK Unified Ideographs 占据 BMP 大约 1/3，定义了两万多个汉字，其中前 20,902 个汉字是按照《康熙字典》里笔画顺序排列的
• Surrogate Code Points 从 U+D800 到 U+DBFF 的 1024 个代码点是 High-surrogate 代码点，从 U+DC00 到 U+DFFF 的 1024 个代码点是 Low-surrogate 代码点。这 2048 个代码点并不是有效的字符代码点，它们是为 UTF 编码保留的。一个 High-surrogate 代码点和一个 Low-surrogate 代码点组成一个代理对（Surrogate Pair），可以在 UTF-16 里编码 BMP 之外的某个代码点。

以上便是 Unicode 的一些介绍。

详细的标准定义请参考 https://unicode.org。

以及推荐一个用来查询 Unicode 字符的网站 https://unicode-table.com/cn/，无聊的时候翻翻还是特别好玩der。

¶UTF 编码

以下将介绍三种 UTF 格式，即 UTF-8、UTF-16 和 UTF-32。

¶UTF-32

最直观的一个实现方法就是将 Unicode 代码点直接存储。UTF-32 就是这样的一种实现，它将每个字符都存储为 4 字节的代码点，这样的好处是不需要进行解析就可以直接将 UTF-32 存储的字符进行翻译，然而因为常用的字符几乎都存在于 BMP 中，所以这样的实现方案是对空间的极大浪费。目前，UTF-32 几乎没有任何实际用途，甚至于 HTML5 标准明文规定网页不得使用 UTF-32 存储^[6]。

¶UTF-8

UTF-8 是一种可变长的字符编码，其设计兼顾了存储效率和兼容性，是目前使用最为广泛的一种 UTF 编码。UTF-8 使用 1 到 4 字节来编码 Unicode（UTF-8 编码的最高上限是 6 字节，而事实上 4 字节就已经足够完成 Unicode 代码空间的编码）。其中，1 字节的 UTF-8 编码完全与 ASCII 编码兼容。

UTF-8 的编码规则很简单：

• 对于单字节符号，该字节的第一位设为 0，后面 7 位为该符号的 Unicode 代码点。
• 对于 n（n > 1） 字节的符号，第一个字节的前 n 位设为 1， 第 n + 1 位设为 0，之后的字节前两位一律设为 10，其余没有提及的二进制位为该符号的 Unicode 代码点。

还是以字符“爱”作为例子，U+7231 在 U+0800 - U+FFFF 范围内，所以采用 3 个字节进行编码。U+7231 转换成二进制为 01110010 00110001‬，填入 1110xxxx 10xxxxxx 10xxxxxx 可以得到 11100111 10001000 10110001，转换成十六进制为 E7 88 B1‬，即“爱"的 UTF-8 编码为 E7 88 B1。

有一个问题是，之前提到过字节序，那么 UTF-8 的存储是否受到字节序影响呢？答案是否定的。UTF-8 的存储其实是以单字节为单元的，应用程序在解析和存储 UTF-8 编码时，应该一个字节一个字节地进行处理，所以 UTF-8 的存储与字节序无关。然而，上面的 UTF-32 和接下来讲到的 UTF-16，其存储单元分别为四个字节和两个字节，因此和字节序有关。

¶UTF-16

UTF-16 同样是一种可变长的字符编码，其使用 2 到 4 字节来编码 Unicode。

还记得上文中提到的范围为 U+D800 至 U+DFFF 的代理代码点吗？这些代码点便是用来实现 UTF-16 编码的。

UTF-16 的编码规则如下：

• 对于在 U+0000 至 U+D7FF 和 U+E000 至 U+FFFF 范围内的代码点（即 BMP 内所有除了代理代码点之外的代码点），UTF-16 将其代码点直接存储为 2 字节的内容。

• 对于在 U+10000 至 U+10FFFF 范围内的代码点（即所有辅助平面的代码点），UTF-16 将其编码为一对 2 字节共 4 字节的内容，其内容的生成方法如下：

  • 代码点减去 0x10000，得到的值范围处于 0x00000 至 0xFFFFF内，共 20 比特。

  • 该值的前 10 比特被加上 0xD800，得到第一个 2 字节的内容，称之为前导代理（Lead Surrogates）。

  • 该值的后 10 比特被加上 0xDC00，得到第二个 2 字节的内容，称之为后尾代理（Trail Surrogates）。

以上的叙述过于繁杂，我们还是以字符“爱”为例，对其进行 UTF-16 编码。

代码点 U+7321 处于 BMP 中，且不是代理代码点，所以其 UTF-16 的编码直接为 73 21。

我们再以代码点 U+1F600（字符为 emoji 笑脸 “😀”）为例。先将其减去 0x10000，得到 0xF600，二进制为 0000111101 1000000000，前 10 比特转换成十六进制为 0x003D，加上 0xD800 等于 0xD83D，后 10 比特转换成十六进制为 0x0200，加上 0xDC00 等于 0xDE00，所以其 UTF-16 的编码为 D8 3D DE 00。作为比较，其 UTF-8 的编码为 F0 9F 98 80（编码过程请读者自行推导）。

需要注意的是，以上两个 UTF-16 编码都是小端序编码，即 UTF-16LE。作为比较，其大端序编码（UTF-16BE）分别为 21 73 和 3D D8 00 DE。请读者特别注意 UTF-16 的编码单元为 2 字节，所以其 4 字节编码在大端序和小端序的区别只是编码单元内颠倒，前导代理和后尾代理的顺序并没有改变。

思考题：UTF-16 的设计如何识别一个字符编码到底是 2 字节还是 4 字节？

值得一提的是，将 UTF-8 与 UTF-16 进行对比可以发现，对于常用的汉字（CJK 字符集），UTF-16 将其编码为 2 个字节，而 UTF-8 则大多将其编码为 3 个字节。因此，对于汉字（CJK 字符集）集中的文本，UTF-16 编码后的大小要显著小于 UTF-8。

¶Byte Order Mark (BOM)

UTF-16 和 UTF-32 有字节序的问题，那么如何分辨一段 UTF-16 或 UTF-32 编码的文本究竟是大端序还是小端序呢？这就需要在文本之前附加一段 BOM。为了能够兼容不支持解析 BOM 的编辑器，Unicode 标准采用了零宽度无端空白字符（U+FEFF，目前已弃用）作为 BOM^[7]（然而事实上 BOM 还是造成了很大的兼容性问题）。因为 UTF-8 并没有字节序的问题，其也不需要 BOM，然而 Unicode 也还是为其设计了一个 BOM，用来作为可选的 UTF-8 编码标识。

以上便是对 Unicode 和 UTF 的简单介绍。更多细节性的东西请参考其标准定义（其实读读这些定义文档还是十分有趣的）。

¶Unicode 与 JacaScript

Unicode 在 JavaScript 存储时的字节序问题略过不表，将在以后有关 Buffer 的文章中说明。

由于历史原因，在 ES6 之前 JavaScript 只支持 UCS-2 编码（即 UTF-16 的 BMP 部分），因此对于 4 字节的 UTF-16 字符，JavaScript 会将其识别为两个字符。所幸，ES6 针对这个问题进行了优化，目前 ES6 已经较为完善地支持 UTF-16 了（然而由于兼容性问题，4 字节的 UTF-16 字符在 JavaScript 中作为字符串的长度仍然为 2）^[8]。

有关 ES6 针对 Unicode 的支持网上各方面的资料已经叙述的十分详细了，而且这方面的内容在日常码代码时很少用到，这里也就略过，有兴趣的读者可以自行搜索。这里只说一点，ES6 在字符串中提供了 \u{} 转义，例子如下：

1

'😀' === '\u{1F600}'

¶写在最后

这篇文章写得比较仓促，所以相关的知识也比较简略，大概算是一个用于科普的随手记，主要是写给自己看的，以防自己忘记这些基础的东西。

同时这篇文章与 JavaScript 和 Node.js 的关系不大。其实本来计划的第二篇是直接写有关 Buffer 等 JavaScript 和 Node.js 中的二进制数据处理知识，然而在学习相关知识的过程中发现自己对 Unicode 毫无了解，就打算临时改变主题，了解了一下 Unicode。其实 Unicode 涉及到的知识和历史十分庞杂，这篇文章所写的也只是基础中的基础，毕竟字符集和字符编码是从计算机出现伊始至今都是一个十分重要的问题，如果要详细叙述，写成几本专著都不为过。不过本文的知识用于应付日常码代码也应该还是足够，对于编程和运维中的编码问题也能够提供一些解决思路。

以及，之后的基石系列考虑到时间和精力问题，可能在叙述方面会变得越来越精简，毕竟这个系列的初衷还是为了写给自己看，督促自己夯实基础、努力学习的。当然如果有什么问题和建议，欢迎与我联系（评论万年不看，建议邮箱 / QQ）。

下一篇的预计完成时间应该在国庆期间，当然能提早会尽量提早。

有关其他的项目和坑，仍然在整理当中，欢迎继续关注.jpg 我们下一篇见！

唉不知道从啥说起。本来还说基石系列两周一更，不存在的（笑）。从五月开始一路忙一路咕咕。之前也说暑学期更两篇就奖励自己一个手办（啊啊啊啊啊我的珞珈），结果 dt 课忙到疯只得又咕咕，到现在才逐渐空下来。

讲讲消失的时间里做的一些事情吧。四月底去了 Bitrun 2019 比赛，做了个车辆网+区块链的项目，拿了创新大奖，不慎掉入币圈（（。然后也是因为做的比较好，受到赞助方 Cpchain 的邀请去他们公司逛了一圈谈了很多吃了顿饭，对他们这样区块链物联网的方向还是挺有兴趣的。然后回学校就开始期中考试，期中考试考完就开始期末考试和期末论文（…）。哦对了，五月底在当当买了一大堆书（我突然想起来还有书单这么一个坑……）。英语课论文写了开源软件运动，还是挺好玩的。考试之间同时参加了网易 mini 游戏制作比赛，算是入坑了一把 unity，然而连初赛也没有过（笑）。期末考试完六月就快过完了（数分考炸，GPA瞬间消失术）。哦对了，还有录音机没电的四级考试，至今没有勇气查成绩（话说成绩出来了吗我都不知道）。接下来是暑学期，上 dt（design thinking，设计思维）。原本以为终于空了下来有时间了毕竟整个学期就一节课，没想到肝得要死。最终做了一个可穿戴报警装置（本来是想用导电线把原件缝在布上的但是实在来不及只能焊接），上了 esp32+GPS+GPRS+心率+陀螺仪，硬件固件服务器前端演示动画一个人全包.jpg。接下来就是社会实践，去了甘肃省天水市齐寿中学支教，也爽快地飞了一把无人机，同时也当了一个莫的感情的书记员。采访了同学老师村民镇政府镇派出所酸菜厂老板市教育局市文旅局，还是感触良多。最后去了菲律宾长滩旅（咸）游（鱼）了五天，就才回来了。

最近呢算是加入了我们学校宋富老师的系统与软件安全实验室（System and Software Security Laboratory, S3Lab），目前开始在做的课题是对 Facebook 新出的区块链 Libra 和 Move 语言的形式化验证，于是最近又忙着苦逼地读论文学 Rust。

下学期选了🥄🐟的概率论和宋富的编译原理，感觉又会是一个肝到爆炸的学期（（。现在甚至有点后悔大二上就选编译原理（汇编都没有系统地学过），但毕竟盘算着大三出国一年，还是要紧一点。

然后是有关一些坑。

第一个大概就是 hexo-leancloud-counter，当时也算是一腔热情被泼冷水，然后就心灰意冷.jpg。然后最近 Leancloud 发声明要求绑定备案域名才能提供服务，于是这个插件的门槛又进一步提高了，所以我想大概是名正言顺（？）地弃坑了叭。Leancloud 的确是一个比较棒的 BaaS 平台，当时还盘算着写点赞、投票、链接统计等功能，唉。不过遥遥无期地也还计划着用 Go 写一个通用的计数服务，到时候可能会开放一下 API。

然后是 Alanine，这个大概很少人知道叭，毕竟几乎没什么 progress。大概就是一个纯模块化的 headless CMS，当时选型一开始是 egg.js 然后切换到 nest.js，然而因为自己 Typescript 不够纯熟只能搁置。

然后是 meowthehoodie，一个游戏测评网站，域名已经买好了然而因为 Alanine 没有写出来所以啥都没有.jpg。

其实还有好多好多，课题组、社团、个人项目都还有一些没填的，只能慢慢来，一步走一步看了。

以及第二篇基石已经在写了，主题是 unicode 和 UTF-8，因为内容比较多所以这个暑假结束前写完放出来（赌上我的？？？一定不会咕）。

共勉。

¶什么是 Base64 编码

根据维基百科，字符编码（英语：Character encoding）、字集码是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉冲），以便文本在计算机中存储和通过通信网络的传递^[1]。

简而言之，编码就是使用一种数据格式来表达另一种数据格式的一个一一对应。

不过需要注意的是，Base64 编码中的“编码”二字并不符合上文中的字符编码的定义。恰恰相反，Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法^[2]。与 Base64 编码类似的二进制数据文本化方法还有 uuencode、BinHex 等。

由于 $64=2^6$，每个 Base64 编码字符可以表示 6 个比特（bit），而一个字节有 8 个比特（Byte），所以一个 Base64 编码字符可以表示 $\frac{3}{4}$ 个字节。由此我们可以知道，Base64 使用四个字节来编码三个字节，即被 Base64 编码过后的二进制数据会增大约 $\frac{4}{3}$ 倍。

用作 Base64 编码的字符集包括大写字母 A-Z、小写a-z，数字 0-9共 62 个，加上两个视不同 Base64 规范而不同的可打印字符（标准 Base64 规范使用的字符是 + 和 /）。

以下为 Base64 的索引表。

padding: =
* 视不同 Base64 标准而不同

¶为什么我们需要 Base64

在 MIME 格式的电子邮件中，只能使用 ASCII 码的可打印字符。所以，人们需要发明一种编码方式，以 ASCII 可打印字符表示非 ASCII 码字符，以在邮件中嵌入图片、音频等二进制数据，也即 Base64 编码。事实上，Base64 编码是作为 MIME 多媒体电子邮件标准的一部分开发的^[3]。

同时，在阮一峰老师的博客^[4]中也提到 Base64 编码的其他意义：

• 所有的二进制文件，都可以因此转化为可打印的文本编码，使用文本软件进行编辑；
• 能够对文本进行简单的加密。

（尽管 Base64 作为一种简单的固定替换只能称作广义上的加密（与凯撒密码类似）。）

同时，Base64 编码可以用作在 URL 中传递二进制数据或非 URL-friendly 的数据，也可以用作以 data: URL 形式在 HTML 等文本文件中内嵌图片等二进制数据。当然，由于 + 和 / 是非 URL-friendly 的，我们需要使用一种用于 URL 的改进 Base64 编码（不在末尾填充 = 号，并将 + 和 / 替换为 - 和 _）^[2]。

¶Base64 编码过程

将 3 字节的数据，先后放入一个 24 位的缓冲区中，先来的字节占高位。数据不足 3 字节的话，于缓冲器中剩下的比特用 0 补足。每次取出 6 比特，按照其值对应索引表中的字符作为编码后的输出，直到全部输入数据转换完成。

若原数据长度不是 3 的倍数时且剩下 1 个输入数据，则在编码结果后加 2 个=；若剩下 2 个输入数据，则在编码结果后加 1 个 =^[2]。

一个来自维基百科的例子：

另一个来自维基百科的例子（包含 padding =）：

¶用 JavaScript 实现 Base64 编码与解码

目前主流的浏览器中都实现了全局方法 atob() 和 btoa()用于 Base64 的编码与解码。

因为 Base64 原理比较简单，我就顺便实现了一下，作为参考。因为只是随手的实现，没有仔细考虑效率和阅读他人代码，可能会有 bug，请不要用在实际用途中。

同时这份代码使用了 Node.js 中的 Buffer，这也将会是基石系列第二篇的主题。

要补充的一点是，在实际使用 Base64 时，= padding 可以视情况而省略，不影响数据的完整性（事实上，在这份代码的解码函数一开始就去掉了原数据的 padding）。具体原因很简单，这里略过不表，请读者自己思考。

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

function base64encode(data, {
  char62 = '+',
  char63 = '/',
  padding = '=',
} = {}) {
  const c = Buffer.from(data);

  const base64EncodeTab = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789${char62}${char63}`;

  let str = '';

  for (let i = 0; i < Math.ceil(c.byteLength / 3); i++) {
    const p = 3 * i;
    str += base64EncodeTab[c[p] >> 2];
    str += base64EncodeTab[((c[p] << 4) & 0x3F) | (c[p + 1] >> 4)];
    const remains = c.byteLength - p;
    if (remains === 1) break;
    str += base64EncodeTab[((c[p + 1] << 2) & 0x3F) | (c[p + 2] >> 6)];
    if (remains === 2) break;
    str += base64EncodeTab[c[p + 2] & 0x3F];
  }

  return str.padEnd(Math.ceil(str.length / 4) * 4, padding);
}

function base64decode(data, {
  char62 = '+',
  char63 = '/',
  padding = '=',
  encoding = 'utf-8',
} = {}) {
  data = data.split(padding)[0];

  const base64DecodeTab = ((chars) => {
    let tmp = {};
    for (let i = 0; i < chars.length; i++) tmp[chars[i]] = i; 
    return tmp;
  })(`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789${char62}${char63}`);

  const c = Buffer.alloc(Math.ceil(data.length / 4) * 3 + ((data.length + 2) % 4) - 2);

  for (let i = 0; i < Math.ceil(data.length / 4); i++) {
    const p = 4 * i;
    c[3 * i] = (base64DecodeTab[data[p]] << 2) | (base64DecodeTab[data[p + 1]] >> 4);
    if (p + 2 >= data.length) break;
    c[3 * i + 1] = ((base64DecodeTab[data[p + 1]] << 4) & 0xFF) | (base64DecodeTab[data[p + 2]] >> 2);
    if (p + 3 >= data.length) break;
    c[3 * i + 2] = ((base64DecodeTab[data[p + 2]] << 6) & 0xFF) | base64DecodeTab[data[p + 3]];
  }

  return c.toString(encoding);
}

¶Base64 的不同标准

参见 维基百科（English only） ^[5]。

¶Base64 应用：Data URLs

Data URLs，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件^[6]。

Data URLs 的形式为：

1

data:[<mediatype>][;base64],<data>

其中，<mediatype> 为 MIME 类型的字符串，其默认值为 text/plain;charset=US-ASCII 。如果 <data> 为二进制类型，则需将其进行 Base64编码，并加上 [;base64] 选项。

具体的例子网上很多，这里就略过不表了。Data URLs 定义在 RFC 2397 ^[7]中，有兴趣的读者可以仔细阅读一下。

¶Base62x

为了克服 Base64 由于输出内容中包括两个以上“符号类”字符（+、/、= 等）而带来的互不兼容多变种问题，一种输出内容无符号的 Base62x 编码方案被引入软件工程领域，Base62x 被视为无符号化的 Base64 改进版本。^[2]

是国人提出的哦。

具体的 Base62x 描述可见 Base62x: An alternative approach to Base64 for non-alphanumeric characters^[8]。

基本思路为，使用 0-9、A-Z、a-w、x1、x2、x3、y、z 作为编码集，并且省略 padding。其中 x1、x2、x3 被称为 tag，在解码过程中遇见字符 x 则与下一个字符共同解码。

使用 Base62x 编码的长度平均为原消息的 138%，区间为 $[\frac{4}{3},\frac{8}{3}]$，比 Base64 略大^[8]。而在实际使用中，根据这篇文章（来自 Base62x 作者），我们可以认为 Base62x 的编码效率比 Base64 略高^[9]。

更多有关 Base62x 的资源以及其 Demo 可参见其官方网站^[10]。

¶UTF-7

由于在过去 SMTP 的传输仅能接受 7 比特的字符，而当时 Unicode 并无法直接满足既有的 SMTP 传输限制，在这样的背景下 UTF-7 被提出。严格来说 UTF-7 不能算是 Unicode 所定义的字符集之一，较精确的来说，UTF-7 是提供了一种将 Unicode 转换为 7 比特 US-ASCII 字符的转换方式^[11]。

详见维基百科^[11]和 RFC 2152^[12]。

¶写在最后

本来打算清明就写完的又咕咕咕了（笑

呼，终于写完了第一篇，虽然比之前计划的篇幅还是小了点（删了点比较复杂而且无关的细节，可以以后再单独写）。读了很多博客、wiki 和 RFC，学到了很多。再接再厉吧，我们下一篇见！

（马上就要考离散了咕咕咕咕咕咕

第一件事呢，就是可能我太急躁了。在重构 LeanCloud Counter 的时候，步子迈的太大？然后可能由于语言不通或者什么，导致 NexT Team 有人认为我要篡权？

（#黑人问号.jpg？

也对，开源项目又没钱拿，xjb 重构吃力不讨好，没有新功能还容易被 diss（

不过就很莫名其妙 orz 还被开出了 NexT Team

（详情可以看这里

现在想想我也真是挺蠢的2333

第二件事呢，就是真的我自己作死了。

在给自己的博客更新的时候，手滑 push 到了 master...

当我看到那个 100% 的时候，我内心就直接报警了。刚有点矛盾，还作死，这不是找死吗...

虽然并不会有什么影响，rebase 一下就好了。

然后就收获飞机票一张~

这件事告诉我，git push 的时候，一定要指定 remote。或者干脆，在 git add remote 的时候，直接把 push 和 fetch 的 url 设置成不一样的。的确，NexT 的 master 的 protection 不设置禁止直接 push 但设置其他限制导致 push 进去根本来不及后悔然而 rebase 或者 reset 的时候连 -f 都没用，像我这样的 careless junior git noob 根本不应该有 admin 权限（

果然还是我太菜了。

好的其实，这篇文章是来宣传一下自己新写的 Hexo 插件。全新重构的页面脚本，兼顾性能与扩展性；全新的极度友好的 init 命令，做到了完全自动化设置权限；改用 master key 作为鉴权方式，既安全又更加方便，同时也支持了 CI & CD；同时，实时热门文章、实时点赞等功能也在计划当中。But, who really cares 呢？

基石，如其名，在这个系列中，我将会写一些有关 JavaScript 和 Node.js 的基础、底层的一些东西。

为什么打算开始这个系列呢？其实我很早就有这个打算了。经常在 GitHub 上闲逛，读一些代码之类的，总感觉自己的基础还是不够扎实，对于很多代码和架构的理解，都只是浮于表面。同时，由于一些原因，深刻地感受到了自己最近的心态可能过于浮躁，甚至于急功近利，所以希望自己能够沉淀一二。“如果不写什么有意义的内容，光折腾博客、主题，这毫无意义。”

当然，好奇心也是一个很主要的原因。我发现，比起去学习如何使用 Vue，我更愿意从 Vue 是如何跑起来的下手，对于任何其他有趣的框架也是一样。然而以我目前的水平，还远远不能够理解他们的架构。贸然花费大量的时间去阅读源码，只是事倍功半。所以我打算从基础入手，潜心修炼（好中二哈哈哈）。

不过，由于学业繁忙（我真的是要忙死了 真实高四），我会尽量做到两周一篇的更新频率，也算是对自己的一种督促。

第零篇将会作为基石系列的目录和索引。

基石#0 | 开始之前的一些碎碎念

好了最后再立点小目标吧。不仅是基础，自己的技术栈也需要扩大一点。目前打算学习的有 TypeScript、Rxjs、Jest，希望可以坚持。

因为我的 Nginx 是以 root 运行的，所以在 reload 的时候一定需要 sudo 权限，如果把 reload 放在 drones 的 CD 过程中，就必须要创建一个具有 nopasswd sudo 权限的账户，并且让 drones ssh 上这个账户运行 reload 命令。

这样做是十分不安全的，如果有人获得了修改我的配置文件 repo 的权限，或者做到了可以控制 drones，那么他也就自动获得了服务器的 nopassed sudo 权限。所以我决定把配置文件自动部署和 Nginx 自动重载分开，也就是由 root 运行一个 py 脚本监控配置文件夹，在配置文件改变时自动执行 nginx -s reload 命令。

目前这份脚本已经上传至 GitHub：nginx-autoreload-service

脚本使用了 pyinotify 来监视配置文件夹，并且写了一个 .service 文件交给 systemd 做后台守护。

脚本可以做到命令延时执行，也就是如果在一定时间修改了多份配置文件，延时过后 reload 命令只会执行一次。

安装及配置方法详见 GitHub README

在写完这个脚本之后往 GitHub 一搜，就发现了很多类似的脚本，所以也权当练习了，而且那些脚本也不太符合我服务器的实际要求（尤其是延时执行，因为在 git pull 时可能会多次触发事件）。

# EOF

如果你苦恼于 OpenVZ 架构的 VPS 使用 Nginx Amplify 一直有很多 Metrics Unavailable，这篇博客给出了解决方案。

¶什么是 Nginx Amplify

大概就是 Nginx 官方出品的一款 Nginx 和服务器系统的数据监控平台。

NGINX Amplify is a SaaS‑based monitoring tool for the open source NGINX software and NGINX Plus. With NGINX Amplify you can monitor performance, keep track of infrastructure assets, and improve configuration with static analysis. NGINX Amplify also monitors the underlying OS, application servers (like PHP-FPM), databases, and other components. NGINX Amplify is simple to set up yet powerful enough to provide critical insight into NGINX and system performance.

¶安装 Nginx Amplify Agent

首先前往 amplify.nginx.com 注册一个账户，然后按照提示一步一步键入指令安装 nginx-amplify-agent。

先下载安装脚本（用 curl 或者 wget）

1

$ curl -L -O https://github.com/nginxinc/nginx-amplify-agent/raw/master/packages/install.sh

或者

1

$ wget https://github.com/nginxinc/nginx-amplify-agent/raw/master/packages/install.sh

接着执行（需要 sudo 权限）：

1

$ API_KEY='YOUR_API_KEY' sh ./install.sh

接着查看你的 Nginx 服务器是否带有 http_stub_status_module 模块。

1

$ sudo nginx -V 2>&1 | grep -o http_stub_status_module

如果没有，则需要重新编译安装 Nginx 服务器。

然后在 /etc/nginx/conf.d/ 下新建 stub_status.conf 文件，并粘贴入以下内容：

1
2
3
4
5
6
7
8
9

server {
    listen 127.0.0.1:80;
    server_name 127.0.0.1;
    location /nginx_status {
        stub_status;
        allow 127.0.0.1;
        deny all;
    }
}

并重启 Nginx 服务器。

等一会儿后你的数据应该就会在 amplify.nginx.com 显示了。

¶进一步配置 Nginx Amplify Agent

参见 https://amplify.nginx.com/docs/guide-metrics-and-metadata.html#additional-nginx-metrics

具体呢就是在你的 Nginx 配置下，增加一个 log_format：

1
2
3
4
5
6
7
8

log_format  main_ext  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for" '
                      '"$host" sn="$server_name" '
                      'rt=$request_time '
                      'ua="$upstream_addr" us="$upstream_status" '
                      'ut="$upstream_response_time" ul="$upstream_response_length" '
                      'cs=$upstream_cache_status' ;

然后将你的 access log 设为这个 format，并且把 error log 的等级设置为 warn。

最后重新加载 Nginx 配置就可以了。

¶解决 NGINX HTTP Errors 等 NGINX Metrics 无法被收集的问题（干货 x1）

如果配置完上一步之后，Amplify 网站中 NGINX HTTP Errors 等 Metrics 仍然显示 Metrics Unavailable，很大的可能性是因为你的 Nginx 服务器是以 root 身份运行的（至少我是这样）。然而 Amplify Agent 默认是以 Nginx 用户运行的，因为权限的原因，Amplify Agent 无法读到 Nginx 的日志。

首先看看 Amplify Agent 的运行日志（默认是 /var/log/amplify-agent/agent.log ）。如果看到类似 supervisor failed to initialize pipeline for "/var/log/nginx/access.log" due to IOError (maybe has no rights?) 的日志，那么就是上述的问题没跑了。

怎么解决呢？最自然的办法当然是让 Amplify Agent 以 root 运行。

¶让 Amplify Agent 以 root 运行

打开 Amplify Agent 的配置文件（默认是 /etc/amplify-agent/agent.conf ），修改 [nginx] 选项下的配置：

1
2

[nginx]
user = 0

然后重启 Amplify Agent 服务：

1

$ sudo service amplify-agent restart

等几分钟后应该就可以看到 Nginx Metrics 都已经开始统计了。

不过，让程序以 root 运行可不是什么好习惯，有很大的安全隐患。有没有其他的方法呢？既然是 Amplify Agent 无法读到 root 用户的文件，那不妨让 Nginx 以非 root 运行，并且让 Nginx 和 Amplify Agent 处于同一用户之下，这样不就解决了吗。

这样的方法看上去很诱人，但坑却很多，而且做不到完美。至今我仍然找不到让 Amplify Agent 顺利收集 Nginx Disk I/O 的方法。

这里容我吐槽一下。 Nginx Disk I/O 未能被收集的原因是 Amplify Agent 没有对 /proc/[pid]/io 的读取权限，但是我看这个文件的拥有着明明是 nginx 而且权限是 -r--------，并且我把文件cp出去之后就能读取了.... 我深度怀疑是 SELinux 的锅，虽然我的服务器貌似并没有装 SELinux .... 经过各种怀疑人生之后，我还是决定以 root 运行 Amplify Agent，并且打算有空去折腾 docker "nginx-with-amplify" images。

¶让 Nginx 以非 root 运行

首先，建立一个账户，我这里就用 nginx 账户了。

然后，将 Nginx 的相关文件和目录都改为 nginx 账户所属。

1
2
3

$ sudo chown nginx /usr/sbin/nginx/
$ sudo chown -R nginx /etc/nginx/
$ sudo chown -R nginx /var/log/nginx/

从上到下依次是：Nginx 的可执行文件、Nginx 的配置目录、Nginx 的日志目录。

然后修改 Nginx 的配置：

1
2
3
4

nginx.conf

# user = nginx;
pid /var/run/nginx/nginx.pid

然后创建 Nginx 所需的 pid 文件所在的目录：

1
2

$ sudo mkdir /var/run/nginx
$ sudo chown -R nginx /var/run/nginx/

注意这里还要将其他与 Nginx 相关的文件和目录改变归属使得 Nginx 有权限访问。例如我的 https 证书存在 /etc/letsencrypt/ 下，那就应该运行如下命令：

1

$ sudo chown -R nginx /etc/letsencrypt/

Linux 系统对非 root 用户的限制是不能绑定 1024 以下的端口，所以我们还需要赋予 Nginx 绑定 80 和 443 端口的权限。

1
2

$ sudo nginx -s quit
$ sudo setcap CAP_NET_BIND_SERVICE=+eip /usr/sbin/nginx

最后，以 nginx 用户身份启动 Nginx：

1

$ sudo -u nginx nginx

这样 Nginx 和 Amplify Agent 就都以同一用户运行了，自然 Nginx 的相关信息也就可以被 Amplify Agent 所收集到了。

¶解决 Disk I/O 等 System Metrics 无法被收集的问题（干货 x2）

这个问题主要出在 psutil 模块对 OpenVZ 系统的不完全支持，目前我提交的修复性 Pull Request 已经被合并，而且新版本也已经发布，所以只要把 Amplify Agent 所使用的 psutil 模块替换成最新的版本就可以了。

找到 Amplify Agent 的程序包位置（我的是 /usr/lib/python2.7/dist-packages/amplify），把其下的 psutil 文件夹整个删除。然后用 pip 安装最新的 psutil：pip install psutil。

但是这样操作之后数据还是没有出来，我读了 Amplify 的源码发现 Amplify 不处理虚拟设备，也不会发送总 Disk 统计。然而 OpenVZ 的所有 Disk 一般都是虚拟设备，这也就导致没有任何有关 Disk 的数据被发送，所以我们还需要修改 amplify/agent/collectors/system/metrics.py 文件。

在 disk_io_counters() 函数定义下修改：

1
2
3
4
5
6
7
8
9
10

146         for disk, io in disk_counters.iteritems():
147                     # do not process virtual devices
148                     disk_is_physical = False
149                     for real_dev_name in real_block_devs:
150                         if disk.startswith(real_dev_name):
151                             disk_is_physical = True
152+
153+                    if disk == 'ploop14245': # 这里改成你的块设备的名字（可以在 /sys/block/ 下查看）
154+                        disk_is_physical = True
155+

修改之后重启 Amplify Agent：

1

$ sudo service amplify-agent restart

稍等一会儿在 Nginx Amplify 页面上的 System 分页就可以看到 Disk I/O 等 Metrics 出现啦。

¶写在后面的话

这次的捉虫子经历对于我一个 Linux 小白来说，真的是精疲力竭。尤其是我还在旅途中，大部分时间只能用着手机连上服务器的 SSH 进行调试和查看 log。

这次捉虫子也让我学到了很多吧。有点打算去看看 Linux 内核相关的东西了。

给你们看看当时我在空间里的吐槽orz：

一开始我只是因为懒 想找个 nginx 图形化管理配置的面板
然后没找到但是看到了 amplify 一个可以分析配置的面板
然后果断安装但是一直有磁盘数据出不来
然后看官方文档说是权限问题 然后以 root 运行还是没用
然后去看源码 发现是psutil问题
然后去看 psutil 源码 发现是 openvz 架构不存在 /proc/diskstats
然后去服务商提工单 对面表示爱莫能助 要么加钱
然后去 psutil 提 issue 对面表示 pr is welcomed 也就是说希望你自己搞定并且贡献给开源社会
然后去查能不能伪造一个 /proc/diskstats 说在 /proc 下写文件需要写内核驱动
然后就开始研究 linux 内核驱动
…………………………
我真的一开始只是因为懒啊…

好啦这个长满荒草的博客或许终于又要开始更新啦。汇报一下最近可能的 bloggin 吧。最近正在肝一个 self-host 的评论系统 Alanine，采用了阿里的 eggjs 框架，因为实在找不到好用的评论系统，然后所以最近可能会写一点开发时踩的坑什么的。然后呢 SICP 系列或许可能真的应该要开始更新了吧。然后 NexT 这边的话，Leancloud Counter 还是有一大堆问题，半个月前重构了代码换用 REST API，但还是感觉配置过程太繁琐，不够优雅，所以最近可能会把插件重新写一遍，争取都能做到自动配置。

顺便说一声，博客的评论因为没有提醒所以万年不看。微博私信知乎私信同理。如果有事找我，请邮箱。

录了上科大，也马上 18 了。

安好。

LEAFERx

2018年8月18日

写于赛里木湖畔，新疆

¶安装 Visual Studio Code

前往 Visual Studio Code 官网下载最新版本的 VS Code 安装包，并在安装时勾选 添加到 PATH 。
同时，建议勾选其他三项（懒就要懒到底嘛qwq）。
如图所示：

¶添加自动打开编辑器脚本

在 博客根目录/scripts/ 下新建 AutoOpenEditor.js 文件（取其他名字也可以，不影响）（如果没有 scripts 目录则新建），并粘贴以下代码，保存。

1
2
3
4
5

let spawn = require('hexo-util/lib/spawn');

hexo.on('new', (data) => {
  spawn('code', [hexo.base_dir, data.path]);
});

这样，在你每次 hexo new 的时候，脚本就会自动帮你打开 VS Code 并切换到博客根目录顺带打开新建的 .md 文件啦。
是不是又懒了一点呢qwq

水这一篇就很开心qwq

PS：利用 Gulp 来压缩你的 Hexo 博客也更新了一种偷懒小技巧（在文末），还不快去看看？

This bug is found by LEAFERx and confirmed by Ivan.Nginx.

• Related issue: #25

• Related pr: #137

• Related plugin: hexo-leancloud-counter-security

This bug could only be fixed manually.

Warning: All NexT sites using Leancloud visitor counter that are not fixed and other sites integrated this function by similiar ways are considered unsecurity. Please fix it as soon as possible.

Chinese version guide is here

For convience, this doc also includes the way to setup the plugin. If you have already done this, skip to Deploy web engine to avoid your data being changed illegally.

Before you make the config, please upgrade your NexT version to v6.0.6 or greater.

Please note the difference between site config file and theme config file

¶Sign up to Leancloud and create an app

• Go to Leancloud website leancloud.cn and sign up to Leancloud. Then login.

• Click 1 to enter the console:

  

• Then click 1 to create an app:

  

• Type your app name in 1 in the pop up window(eg. "test"), then choose 2, which means developer's plan, and then click 3 to create the app:

  

¶Create Counter class and enable plugin in NexT

• Click 1(app name) to enter the app manage page:

  

• then click 1 to create a class for counter:

  

• Type Counter in the pop up window in 1, check 2, then click 3:

  

• Click 1 to enter the app setting, then click 2:

  

• Paste App ID and App Key to theme config file_config.yml like this:

  1 2 3 4 5 6 7

  leancloud_visitors: enable: true app_id: <<your app id>> app_key: <<your app key>> # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security security: true betterPerformance: false

• Set domain whitelist: Click1, then type your domain into 2(protocol, domain and port should be exactly the same):

¶Deploy web engine to avoid your data being changed illegally

• Click 1 -> 2 -> 3 by order

  

• Click1:

  

• In the pop up window, click 1 to choose type Hook, then choosebeforeUpdate in 2, choose Counter in 3. Paste code below into 4, then click 5 to save it:

  1 2 3 4 5 6 7 8

  var query = new AV.Query("Counter"); if (request.object.updatedKeys.indexOf('time') !== -1) { return query.get(request.object.id).then(function (obj) { if (obj.get("time") + 1 !== request.object.get("time")) { throw new AV.Cloud.Error('Invalid update!'); } }) }

  

• Click 1 to deploy after the message in the red rect shows up:

  

• Click 1 in the pop up：

  

• Click 1 to close the pop up window after the message in the red rect shows up:

  

¶Set access control for your database

• Open theme config file_config.yml, set leancloud_visitors: security to true:

  1 2 3 4 5 6 7

  leancloud_visitors: enable: true app_id: <<your app id>> app_key: <<your app key>> # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security security: true betterPerformance: false

  Explaination for betterPerformance:
  Because the Leancloud developer's plan has limits in requst thread amount and running time, counter number may be very slow to load in some times. If set betterPerformance to true, counter number will be displayed quickly by assuming the request is accepted normally.

• Open cmd then switch to root path of site, type commands to install hexo-leancloud-counter-security plugin:

  1	npm install hexo-leancloud-counter-security --save

• Open site config file_config.yml, add those config:

  1 2 3 4 5 6

  leancloud_counter_security: enable_sync: true app_id: <<your app id>> app_key: <<your app key> username: password:

• Type command:

  1	hexo lc-counter register <<username>> <<password>>

  or

  1	hexo lc-counter r <<username>> <<password>>

  Change <<username>> and <<password>> to your own username and password (no need to be the same as leancloud account). They will be used in the hexo deploying.

  • Open site config file_config.yml, change <<username>> and <<password>>to those you set above:

  1 2 3 4 5 6

  leancloud_counter_security: enable_sync: true app_id: <<your app id>> app_key: <<your app key> username: <<your username>> # will be asked while deploying if be left blank password: <<your password>> # recommend to leave it blank for security, will be asked while deploying if be left blank

• Add the deployer in the deploy of site config file_config.yml:

  1 2 3

  deploy: # other deployer - type: leancloud_counter_security_sync

• Return to the Leancloud console. Click 1 -> 2, check if there is a record added in the _User (the img below is using username "admin" for example):

  

• Click 1 -> 2 -> 3 by order:

  

• Click 1(add_fields), then choose 2:Do as below "create" setting(choose the user you create):

  

• click 1(create), then choose 2, type the username in 3, then click 4 -> 5:

  

  Now your page should be similar to this img after finishing the step.

  

• Click 1(delete), then choose 2:

Now the bug is fixed.

Every time when you run hexo d, plugin will scan posts in the source/_posts and compare to the database, then add create records for those posts which are not list in the database. This procedure is done locally so that database can only be changed by you.

¶起因

昨天因为一些情况修改了一点博文，在部署Hexo的时候发现出现了莫名其妙的错误，类似下图：

这个错误就很神奇，尤其是那个No error搞得我一脸懵逼...
尝试良久无果，于是改用ssh方式提交，成功。
与@Axton讨论过后，发现是gayhub最近停用了TLS1.0/1.1，然后巨硬底层太老不支持TLS1.2，于是https就提交不上去。

感谢@Axton供图2333

于是跑去hexo-deployer-git提issue，被告知问题已经被巨硬解决了，尝试了一下没有毛病。
不过我看目前仍很多人都还不知道解决方法，于是就打算写这么一篇短文。

¶解决方法

最为推荐的解决方法就是直接下载最新版（v2.16.2）的git，其中已经集成了巨硬提供的解决方法。
点我前往下载页面
如果你不愿意更新git，你也可以单独安装巨硬提供的解决方法：
在这个页面下载最新版Git Credential Manager for Windows并安装。
完成安装后，问题就自动解决了。
（安装完Git Credential Manager for Windows后请不要手贱卸载！！）
（不然重装后也一直是错误！！鬼知道这是什么原因...）
（然后下载了最新版git才解决问题）

¶相关issue

hexojs/hexo#3043

NexT主题使用的Leancloud访客统计插件存在重大安全漏洞，拥有不良企图的人利用该漏洞可随意更改访客数量或一定程度上增删数据库记录。
该漏洞由我独立发现，并由Ivan.Nginx确认。

• 有关的issue：#25
• 有关的pr：#137
• 有关的插件：hexo-leancloud-counter-security

经过讨论后，我们认为该漏洞必须由使用者手动修复。本文给出了修复方法。
注意：所有使用该插件而未经修复的NexT站点或使用类似方法集成Leancloud访客统计功能的站点都被认为是不安全的，请尽快修复。

For International Users:
This post is a guide to fix a serious security bug in Leancloud visitor counter, which is found by me and confirmed by Ivan.Nginx.
Someone could use this bug to change your visitor number easily and even add/delete records in your database.
This bug could only be fixed manually.

• related issue: #25
• related pr: #137
• related plugin: hexo-leancloud-counter-security

Warning: All NexT sites using Leancloud visitor counter that are not fixed and other sites integrated this function by similiar ways are considered unsecurity. Please fix it as soon as possible!
English version guide is under translating and will be released in few days.
2018.3.16: English version guide is here

为方便起见，本文将复述从头开始配置Leancloud访客统计插件的过程。
本文部分内容参考自Doublemine的为NexT主题添加文章阅读量统计功能。
对于已经完成该部分配置的用户，请自行对照本文步骤进行修复。

在配置前，请升级NexT至v6.0.5以上。
2018.2.26：目前NexTv6.0.5已经更新，但相关pr仍在讨论中。预计该漏洞将在v6.0.6修复
注：在本文发布时相关pull-request还在review当中，NexTv6.0.5仍未更新，请自行合并pr或按文末不更新主题的方法修复该漏洞。
2018.3.16：NexTv6.0.6已更新，该修复插件作为beta功能暂时添加，默认security选项为false，预计于v6.0.7正式添加。
2018.4.22：目前NexTv6.2.0已正式支持。

在配置过程中请注意博客配置文件和主题配置文件的区别。

¶注册Leancloud并创建应用

• 首先，前往Leancloud官网leancloud.cn进行注册，并登陆。
• 然后点击图示1处，进入控制台：
• 接着，点击图示1处，创建应用：
• 在弹出窗口1处输入应用名称（可随意输入，可更改，为演示方便取名为test），并选择2处“开发版”，然后点击3处创建：

到这里应用创建完成。

¶建立Counter类并在NexT中启用插件

• 点击1处应用名称进入应用管理界面：
• 如图，点击侧边栏1处创建Class：
• 在弹出窗口1处填入Counter，勾选2处无限制，并点击3处创建Class：
• 此时类已创建完成。接下来点击图示1处进入设置，然后点击2处进入应用Key：
• 粘贴App ID和App Key到NexT主题配置文件_config.yml对应位置。此时配置文件应如下：

1
2
3
4

leancloud_visitors:
  enable: true
  app_id: <<your app id>>
  app_key: <<your app key>>

• 设置Web安全域名确保域名调用安全。点击1处进入安全中心，然后在2处填写自己博客对应的域名（注意协议、域名和端口号需严格一致）：

到这里内容均与Doublemine的为NexT主题添加文章阅读量统计功能这篇文章相同，只不过截图为新版的Leancloud的界面。

¶部署云引擎以保证访客数量不被随意篡改

• 点击左侧1处云引擎，然后点击2处部署，再点击3处在线编辑：
• 点击1处创建函数：
• 在弹出窗口选择1处Hook类型，然后2处选择beforeUpdate，3处选择刚才建立的Counter类。在4中粘贴下方代码后，点5处保存。

1
2
3
4
5
6
7
8

var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
    return query.get(request.object.id).then(function (obj) {
        if (obj.get("time") + 1 !== request.object.get("time")) {
            throw new AV.Cloud.Error('Invalid update!');
        }
    })
}

如图所示：

• 点击保存后应出现类似红框处函数。此时点击1处部署：
• 在弹出窗口点击1处部署：
• 等待出现红框处的成功部署信息后，点击1处关闭：

至此云引擎已成功部署，任何非法的访客数量更改请求都将失败。

¶进一步设置权限（可选，建议设置）

• 打开NexT主题配置文件_config.yml，将leancloud_visitors下的security设置为true（如没有则新增）：

1
2
3
4
5
6
7

leancloud_visitors:
  enable: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  security: true
  betterPerformance: false

对betterPerformance选项的说明：
由于Leancloud免费版的云引擎存在请求线程数和运行时间限制以及休眠机制，很多时候访客数量加载会很慢。如果设置betterPerformance为true，则网页则会在提交请求之前直接显示访客人数为查询到的人数+1，以增加用户体验。

• 打开博客配置文件_config.yml，新增以下配置：

1
2
3
4
5
6

leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>
  username: 
  password:

• 打开cmd并切换至博客根目录，键入以下命令以安装hexo-leancloud-counter-security插件：

1

npm install hexo-leancloud-counter-security --save

• 在相同目录键入以下命令：

  1	hexo lc-counter register <<username>> <<password>>

  或

  1	hexo lc-counter r <<username>> <<password>>

  将<<username>>和<<password>>替换为你自己的用户名和密码（不必与leancloud的账号）相同。此用户名和密码将在hexo部署时使用。

• 打开博客配置文件_config.yml，将<<username>>和<<password>>替换为你刚刚设置的用户名和密码：

1
2
3
4
5
6

leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>
  username: <<your username>> #如留空则将在部署时询问
  password: <<your password>> #建议留空以保证安全性，如留空则将在部署时询问

• 在博客配置文件_config.yml的deploy下添加项：

1
2
3

deploy:
  # other deployer
  - type: leancloud_counter_security_sync

• 返回Leancloud控制台的应用内。依次点击1 2，检查_User表中是否出现一条记录（图示以用户名为admin为例）：
• 点击1处进入Counter表，依次点击2 3，打开权限设置：
• 点击1add_fields后选择2指定用户， 并将下两栏留空：此处应与下条create设置相同（选择你所创建的用户）：
• 点击1create后选择2指定用户， 在3处键入用户名，点击4处后点击5处添加：完成此步操作后，界面应与图示类似：
• 点击1delete后选择2指定用户， 并将下两栏留空：

至此权限已设置完成，数据库记录只能在本地增删。
每次运行hexo d部署的时候，插件都会扫描本地source/_posts下的文章并与数据库对比，然后在数据库创建没有录入数据库的文章记录。
如果在博客配置文件中留空username或password，则在部署过程中程序会要求输入。

¶手动修改lean-analytics-swig的方法（不建议）（已过时）

不愿更新NexT主题的用户可使用此方法保证插件正常使用。
强烈建议更新NexT至v6.0.5以上。
打开\layout\_third-party\analytics\lean-analytics.swig文件，替换为以下内容：

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

{% if theme.leancloud_visitors.enable %}

  {# custom analytics part create by xiamo; edited by LEAFERx #}
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("{{theme.leancloud_visitors.app_id}}", "{{theme.leancloud_visitors.app_key}}");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            {% if theme.leancloud_visitors.security %}
              var $element = $(document.getElementById(url));
              $element.find('.leancloud-visitors-count').text('Counter not initialized! See more at console err msg.');
              console.error('ATTENTION! LeanCloud counter has security bug, for solve it see here: https://github.com/theme-next/hexo-leancloud-counter-security. \n If you see this message, you must have set the security config to true but not install the plugin.');
            {% else %}
              var newcounter = new Counter();
              /* Set ACL */
              var acl = new AV.ACL();
              acl.setPublicReadAccess(true);
              acl.setPublicWriteAccess(true);
              newcounter.setACL(acl);
              /* End Set ACL */
              newcounter.set("title", title);
              newcounter.set("url", url);
              newcounter.set("time", 1);
              newcounter.save(null, {
                success: function(newcounter) {
                  var $element = $(document.getElementById(url));
                  $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
                },
                error: function(newcounter, error) {
                  console.log('Failed to create');
                }
              });
            {% endif %}
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>

{% endif %}

我不是在谈论，我是在诘问。

你记得你的床头柜上放有一束花。
清清楚楚，这束花在脑海中有画面。
可是你突然觉得不对，不知道为什么，就是，不对。
说不上来，一股难言的恐惧攫住了你。
摸索着起身，你向左偏头，没有。
没有。
哦，是梦。

还是现在才是梦。
花的每一分褶皱，每一条脉络，都不自觉地在你的脑海里呼啸。
你可以信誓旦旦。因为太真实。
一个被妄图挑战的问题：
究竟是“真实”在抗拒着真实，
还是真实在抗拒着“真实”？

类似的。
你如何判断，你正在看的这些文字，
太过真实而显得虚假。
你怎么知道你醒过来了。

究竟是真实，还是大脑的自动补全。
究竟什么是真实。
可触摸，可被感知，可被标准模型的拉格朗日量描述。
是吗？

缸中的大脑问题。
甚至是缸中的电脑问题。
你所运行的思想，是否被编程。
不是说被控制着，是被编程。
逻辑电路般，输入与输出的精准对应。
对你是黑盒，对缸外之人，内部过程可编程。
电解液才是灵魂。

伪随机数。

半夜惊醒时是最容易迷茫的时刻。
究竟是突然醒来，突然睡去，突然入梦，突然下一章。
还是早已确定好的cycle。
但我坚定地知道，盗梦空间中的陀螺，一定是虚假。

每个人都有自己的陀螺，籍此判断虚实。
往往是最后的倚仗。
或者说是防线吧。
然而其实只是不愿承认的心理安慰罢了。

陀螺是受控的。
重力控制陀螺，世界控制重力。
你控制世界，缸外的人控制你。
明白吗？

虚假的防线，可以轻易跨越的马奇诺。
奇怪的静坐战争。
静待亡国后再自由运动。

我不想在这里谈论，有关存在，有关所谓的物质性的、可受相互作用的真实。
我只是诘问，有关幻觉的纠葛。

往往，你会发现，你所倚仗的“真实”，总是充斥着象征性。
奇怪的仪式感，与应许之地之物链接。
但数据流究竟是单向还是双向，不得而知。

有时是对鲜血的渴望，是借生命力慰藉真实性。
有时是疼痛，从麻木的挤压中挣得半点呼吸的空间。

但是你在害怕，如果面向了错误的对象。
如果你倾注的是虚假，而将真实咀嚼。
如果。
如果你明白纠葛。
所以你在逃避开始。

空有全身愤懑而无可击之物。
气血逆行，叫你五内如焚。

我不是在谈论，我是在诘问。

希望你能彻底迷失于此。

一个夜里醒来的剑士和他的九十九里冰原。

前一段时间因为沉迷彩虹六号全境封锁（划掉）（算了不划了），博客持续长草
然后最近终于想起来 就更新了一下主题（其实书单是一直一直在更新的qwqqq）
（其实主要是CloudFlare访问实在太慢了...就倒腾了一下LeanCloud把图片扔在上面 这样终于访问速度能忍受了）
大概等成年之后就去备个案 然后就能全站启用七牛CDN了 这样应该会快很多

嗷 所以这是一篇十分十分草率的文章
本来想写点近况的 可是懒qwq
那就假装《新年记杂》也算在内吧

那那那顺便加一下steam呀qwq id：LEAFERx
唯一的

¶NexT主题已更新至6.0.1

感谢Ivan.Nginx和其他人的贡献 目前NexT主题6.0.1版本已经正式放出
话说我的博客被挂在了README上了诶嘿嘿 还有名字也写在了contributor里
1w+stars的项目 赚翻了赚翻了

¶图片和js库等部分静态资源临时托管至LeanCloud和staticfile.org上

为什么说临时是因为现在LeanCloud上文件都是手动上传粘贴链接的，十分不方便，以后肯定要换
本来打算用七牛CDN的，可是要备案，那就只能等到成年了orz

¶加入Pace.js页面加载进度条

从现在开始页面加载就有进度条动画了，不会就卡在哪里，用户体验大概会好很多吧

¶加入站点和文章字数统计

虽然这个插件连代码字数都统计了进去造成一种写了很多字的错觉，但是看起来爽啊qwq

¶其他细节性修改

还有些啥呢emmmm记不得了
那就假装有点细节上的修改好了

好 这篇草率的文章就让它结束吧
另外 1336大概最近会更新一下
可以去看看 也欢迎投稿w
qq上或者邮箱上找我就好

记得写过一篇平安夜记杂，尽是些不成文的语句。
回忆跌跌撞撞破门而入。五年。
五年，数以千记的日子，多少个五年。

又是一年元旦，扳扳手指，也已经数不过来了。
乱，实在是乱。乱到很多回忆自动被揉进幻觉，还是幻觉里面掺杂着一点回忆。
不知道，不知道。楼去而人空。

2017，with chaos an’ anxiety。
恍恍惚惚地，恍恍惚惚地，晃过去了。
留下了多少？问自己。
不知道，不知道。茶走而人凉。
大脑在嗡嗡作响，是机械硬盘的声音。
是自动地在删除些什么，又是自动地在插入着什么。
不知道，不知道。只有脚本才知道。

在写什么，不知道，迷茫，反正是记杂，那就杂。
那就先摸摸看到这里的你吧w
那也请你暂且放一下，看看今天的月亮。
请你含情脉脉地看看她，然后告诉我圆不圆，好吗？
这很重要。

在你看月亮的时候，让我偷偷地溜走一段吧。
我对月亮这个意象总是情有独钟。
不知道，不知道。矛盾的美。
鲁迅的“直刺着天空中圆满的月亮，使月亮窘得发白。”
她窘得发白，我爱她，因为她的另一面是深沉的黑。

回来了吧，告诉我，圆不圆。这很重要。
我的膝盖上枕着八斤重的电脑，好疼。
我在等你回话。

让我们来谈一点严肃的吧。

生而为人，真是对不起呀。
生活对于那些想要前行的人，真是太太太太刻薄了。
不是吗？你只要停下，她也会停下。
月亮跟着你走，月亮一样。
但你不能停下呀。停下了，就
就真的停下了。

但是呀。
但是。但是。
还有六七十年七八十年好活。
不是吗？那就把其中的几年送给生活当作谢礼。
谢谢她的刻薄，尽管你不想要。

鸡汤，对吗。
也是。你为什么就这么不屑呢。
你有什么资格，可以看到这里呢。
你是谁呢。

哈，开玩笑的啦。
你还没有回答我
月亮
到底
圆不圆呀。

啊不行。电脑好重。
让我趴着写一会儿。

那就说点甜的吧。

“包产到户”
真好呀。别人家的。

呐。如果你可以忍受的了我的混乱。
读到了这里。我想对你说。
对，就是对你说，不要往后看啦。
对你说：
喜欢你，绝非一言一语，一朝一夕。
喜欢你，就想让所有的，所有的雨都落向你。
喜欢你，想让樱花，让粉红色在你身上燃起。
喜欢你，让氢原子被自由电子捉去。

但你喜欢空虚中的暗夜啊，鲁迅所说的，盾牌后的空虚中的暗夜。
所以，所以所以
啊，趴着好难受，让我起来缓一缓。

呐，薛定谔被我的猫挠死啦。
“正是子夜时分。雨水敲打着窗户。不是子夜。没有下雨。”
来自塞缪尔·贝克特的《莫洛伊》。
嘿，我要把它送给你。

甜的说完啦，让我们继续混乱一点。
最近的一个月，过得十分十分文科生。
《古代汉语常识》《鲁迅选集》《文学阅读指南》《诗的八堂课》
你知道吗，在古代，“睡觉”解作“睡醒”
所以很晚啦，快去睡觉，晚安。

w

好的嘛，知道你不想睡。
那么，人为什么而活呢？
你知道吗。
告诉我好吗。
这也很重要。
不过还是月亮圆不圆更重要一点。
置死地而后生，
至死地而后不生吧。
月亮噎住了我，喝一杯黑夜润润喉。

吾辈皆如蚁。
仅为美如神。
顾城，顾城。

可是大火来了。会夺走一切的大火来了。
滚滚黑烟中，数不尽的幻觉肆意掠夺。
麻木而又冰冷，僵硬和悲伤在攻城掠地。

或许每一个人都有这样的念头：
为什么不是我？

对吗。

好，戛然而止吧。

被2017的末尾杀死的你。
2018，新年，我要祝你不快乐。

傻子，月亮圆吗？
新年快乐呀。

别管2017了。
2018快乐。
别管2018会不会快乐。
先快乐再说。

困顿、不自知
一个活着的人作于年末的夜空中

另附上一些不成文的词句
望不要嫌弃

云淡风轻还是波澜不惊
活还是死
淡漠 淡漠 没有仙人掌的沙漠
转瞬即逝的
回忆都会被雕刻
而幻觉总是自动闯入
流淌着的灵魂 太沉
伯努利方程
守恒 却总是熵增
活着就是氧化
混乱 混乱 分子被拆散
消散 消散
缸中大脑 怕不是缸中电脑
信息 信息 外界刺激
内部过程可编程
电解液才是灵魂
Do androids dream of electric sheep？
从灰色爬上黑色
还是从黑色掉入灰暗
那就割掉自己的左耳吧
剪断反馈的路线 剪断闭环
一劈两半
莫比乌斯环
然后掩埋
掩埋
庞贝和锡安
宇宙终将变成沙滩

最后的最后
衷心地祝愿胡太伟老师新年快乐
愿天堂再无病痛

¶新域名leaferx.online已投入使用

手一抖就花了5块钱买了个新域名orz 不过至少比leaferx.github.io好一点qwq
github不能挂SSL证书是真的麻烦 最后只能用CloudFlare来反代一下
CloudFlare是真的良心 不仅搞定了SSL而且能自动续期（虽然是公用SSL证书） 还有CDN加成（虽然都是美国节点）和安防（虽然对Github Pages并没有什么卵用） 甚至还可以做到全站http直接301到https 以及增加了网站统计功能 简直Github Pages最佳伴侣 最重要是的这些还都免费 所以忍不住打个广告qwq

不过对墙内的朋友们就不太友好了...Github和CloudFlare各种被半墙...有时间得弄下国内CDN
换了域名百度那边瞬间爆炸 本就不多的索引量瞬间清零 不过最近并没有什么SEO的想法
而且百度站长这个工具实在太难用了 各种通不过验证 简直毒 于是更没有兴趣了

由于全站访客人数统计用的是不蒜子 所以更换域名后4000+的人数被清零了 要重新开始
所以请大家来后多刷新几下再走啊qwqqqqqqqqqqqq

¶评论系统已更换为LiveRe

今年多说停止服务了 这么好的一个社会化评论系统彻底归为历史
于是一直在找多说的代替品
然而Disqus被墙 网易云更贴和搜狐畅言实在太丑...
前段时间一直在用Gitment过渡 为此我还发了个PR
Gitment好是好 但是只支持Github账户 面向群体有些小众 而且在移动端貌似还有奇奇怪怪的问题 于是还是琢磨着要换一个
然后在看到livere的时候就立刻拍板 就是它了（虽然中文名来必力真的很蠢而且总是让我想起来必堡......）
支持Github、QQ、微信登录 所以少年不如评论一发造成这个博客似乎有人来的假象？？？

¶NexT主题已更新至5.1.1

由于当年年少无知修改主题的时候都是直接修改 并没有用git 所以升级只能手动合并 特别麻烦
这里安利一个用来比较和合并文件和文件夹的软件 Beyond Compare 超级好用
当然 由于是手动合并 免不了有点疏漏 如果出现了bug请和我联系或者在底下评论 谢谢w

¶文章底部加入版权信息

如果没有特殊说明 本站所有文章均采用 CC BY-NC-SA 4.0 CN 许可协议
顺便求个友链ww

¶开启Scroll Percent功能

在返回顶部按钮上加入了阅读进度

¶开启Save Scroll功能

每篇文章的阅读进度都会写入cookies 这样等你返回的时候就能从你退出的地方读起啦

¶禁用底部点击小心心功能

出于代码整洁度和实用性考虑 该功能已被禁用
不过最近在构思一个可以统计点赞数量的tag 如果写出来了会写篇文章介绍

¶其他细节性改善

如禁用ScrolltoMore功能、解决sidebar内滚动功能（虽然暂时还用不到）等

这篇博文的大部分内容其实是网上抄来的 链接因为忘记了所以没法放 orz
写这篇博文呢主要是因为最近把 NexT 升级了 v5.1.1 里面有些 js 用了 ES6 的语法 但 gulp-uglify 并不支持 ES6
于是花了点时间看了下 Gulp 的文档 用 gulp-babel 把 ES6 转成 ES5 这样 uglify 就可以用啦
（发现自己不喜欢打标点orz）

¶Gulp简介

gulp.js 是一种基于流的，代码优于配置的新一代构建工具。
具体前往官网啦
反正是一个基于 node 的用于自动化的工具，和 Grunt 比较类似，不过亮点是 流 和 写代码 ，所以会比 Grunt 快一点。

¶准备环境

首先安装 Gulp

1

npm install gulp -g

然后 cd 到博客的根目录安装压缩静态文件要用的依赖包

1

npm install gulp-minify-css gulp-babel gulp-uglify gulp-htmlmin gulp-htmlclean --save-dev

（这里提倡使用 cnpm）
2018.03.17：
辣鸡 cnpm 装的包各种权限问题 不推荐了哼
等有空写写如何优雅地在国内使用 npm 好了 w

¶创建gulpfile.js

在博客的根目录创建文件 gulpfile.js
然后粘贴代码

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

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

gulp.task('minify-css', function () {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});

gulp.task('minify-html', function () {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});

gulp.task('minify-js', function () {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

gulp.task('default', ['minify-html', 'minify-css', 'minify-js']);

注意
gulp-babel 只能转换如箭头函数等一部分 ES6 的新特性 对 import 无能为力 如果需要压缩含有 import 特性的代码 需要使用 webpack 或者 browserify 等工具 具体教程网上有 我因为用不到也就没仔细研究

¶压缩方法

在 hexo g 之后在 cmd 里敲入 gulp 回车就可以啦
推荐姿势：

1

hexo cl && hexo g && gulp && hexo d

gulp运行截图

gulp运行前后比较

¶更为推（tou）荐（lan）的姿势

2018.03.17更新
打开博客根目录的 package.json ，在 "scripts" 项增加一个 "publish" 命令：

1
2
3
4
5
6
7
8
9

{
  //...
  "scripts": {
    //...
    "publish": "hexo cl && hexo g && gulp && hexo d",
    //...
  }
  //...
}

然后每次需要部署的时候只要运行下面命令就可以啦。

1

npm run publish

省了 20 个字符呢 w

本文主要着重于搭建该系统时遇到的各种坑

好了按惯例先扯上一会儿 跳过就好w
好久不见 我（大概）来月更了orzzz
临近期末事情越来越多 各种比赛和社团要收尾 根本没时间刷SICP和习题
更何况我又入了C++ Premier Plus的坑
所以.....................
SICP的第一篇读书笔记可能要鸽很久很久啦（大概高三暑假）（你还真有脸说）
当然习题还是会抽空刷的 在GitBook上不定期诈尸Exersices Solutions of SICP
公开课也一直在刷 虽然每天看不到十分钟就要睡觉了orz

真紧张明天我的桌子和椅子就要参加高考了
看了一下ZUI DAYS
还有88天物竞
还有131天选考
还有365天高考
时间有时候真是令人生厌

物理还是没有进150名
不过暑假要去质心决赛班 终于可以亲眼见到蔡子星啦嘿嘿嘿
我爱物理我爱物理我爱物理我爱物理我爱物理我爱物理我爱物理

物理免修后多出来五节自修课最近浪得很开心 刷刷题看看书泡泡实验室什么的
但不知道为什么时间还是那么少 事情还是那么多

不知不觉扯了这么多orz 还是回归一下正题吧

人生中第一次在Github上写这么长的英文README
人生中第一次Arduino写多文件模块化程序（没有用类啦因为觉得没必要orz）

这个项目史无前例地遇到了各种巨坑 坑多到报警
到现在都还没有完全解决（大概也没空解决了呃）

其实本来这个项目是很宏大的 还计划了智能窗帘、智能橱柜、分布式传感器系统
但因为人手和时间的原因 可能就只能这样了....
创客空间也没几个人真正在做事情 无奈

这个项目目前已经参加了宁波中科院创客空间举办的比赛 相关参赛视频和链接什么的在文末

好了 接下来 我们谈谈各种坑

¶服务器部分

来张（半）全家福

从左下到右上分别是 ESP8266、MFRC522、Arduino Uno、Banana Pi

服务器部分我采用的是香蕉派（最经典的那款）（也就是最弱的那款）（连板载WiFi都没有）
没错 就是这么简单的一个node应用 我都遇到了巨坑
而且第一个坑就是在安装node上

首先说明 我用的系统是32位的Raspbian jessie for bananapi
在安装之前 我就看见网上大佬们各种警告 不要用包管理器安装
那好吧 那就下载源码编译吧
可我万万没想到的是 我光make就花了整整一天的时间
喵喵喵？？？
更可怕的是 我make install了整整一天都没装上.....
CPU一直跑在100%但我并不知道它到底在干啥 只能^C了
最后 我是下载了别人编译好的二进制包才成功装了上去

第二个坑是对这次开发影响最小的但是让我感受到了绝望
我本来想打算借着这个项目接触一下MongoDB
于是我在开始做之前看了大半个月的教程和文档
好了你们应该猜到什么了吧
MongoDB只支持64位系统！！！
这只香蕉派只有32位系统镜像！！！（至少我没找到64位）
那好吧 我大半个月只能算白看了 毕竟再次应用肯定不知道要等到什么时候去到时候肯定早就忘了
于是只能屈服于MySQL 安慰自己关系型数据库挺好的 稳定安全又好弄（雾）

第三个坑是一个十分naive的坑（咳）
node和mysql连接的库只有英文文档 还写得有点乱糟糟的
我修改了一下复制的示例 然后发现如果查询命中就没问题 但如果没有命中就会报错 直接退出
当时以为是库的原因 没有命中就throw error
然后就各种看文档和怀疑自己的英语水平
直到我看见了if(err) throw err;
........
于是我神经错乱到在回调函数外写了try-carch..........
然后我看到了错误提示Cannot read property of undefined
.................
我可能是要重新学一遍js
总结：

1. 类型检查一定要做 尤其是和数据库相关的时候
2. 遇到错误千万要仔细读几遍 确定了错哪再去调bug
   不过这次是因为由于error是在回调函数里面被抛出 所以错误信息被模块又封装了一层所以特别不起眼orzzz

迈过了三座大坑 我写完了服务端
但是 我万万没有想到的是 这还只是个开始......

¶客户端部分

MFRC522和ESP8266

调MFRC522一切顺利 用了@miguelbalboa的库
谢天谢地 这是我最靠谱的时刻

然后就是ESP8266了 这家伙真我是见过的最难调的模块
尤其是当你一开始没有开软串口来调试的时候
（不要问我为什么不用软串口连ESP8266 软串口波特率最高只有9600...）

我这个项目是使用HTTP协议完成客户端和服务端的通信
数据交换格式是json
这也是我整个项目最作死的地方......

数据只有十几二十字节 但加上了HTTP头瞬间变成了两百字节...
然后Arduino就瞬间爆炸
什么串口缓冲区溢出啦 内存不足啦 全都来了
关键是这个错误没有报错一开始还意识不到 白做了很多debug尝试

第一个坑就是串口缓冲区溢出
而且这个坑让我明白了 什么叫做为什么调通了程序都不知道自己做了什么操作

一开始我读取数据时 使用的函数大概是这样的

1
2
3
4

while (ESP8266.available() > 0){
    msg += char(ESP8266.read());
    delay(4);
}

然后一般只接收到70来个字节就收不到了（Arduino默认缓冲区只有64字节）
很显然是缓冲区溢出了

但很神奇的是 我把缓冲区调大也并没有什么卵用 消息始终收不全
尤其是当我把缓冲区调到256字节以上的时候 毛都收不到了.........

没办法 我只能从接收函数下手了
我怀疑接收函数一个一个字节实在太慢了尤其还停顿了4毫秒（虽然我把delay注释了也读不全虽然会稍微好一点）
然后我就看文档有没有直接收整个缓冲区的函数 于是我看到了readString
虽然这个操作把我带向了另外一个深坑

于是我的接收函数就变成了这样

1
2
3
4
5
6
7
8
9
10

void ESP8266_ReadData(String& temp, int delay_time = 4) {
    #ifdef USE_DEBUG_MODE
        DEBUG.println("Reading data...");
    #endif
    while(!ESP8266.available());
    while(ESP8266.available()){
        temp += ESP8266.readString();
        delay(delay_time);
    }
}

看上去非常正确是不是 可还是不行
但当我把缓冲区调到128字节的时候就特喵的行了......
work perfectly
这让我很绝望....
到底是为什么orz

第二个坑又是文档的问题
我在用ArduinoJson库的时候 用了DynamicBuffer
可谁知道DynamicBuffer是不会自动释放的......
于是立马内存溢出 运行几轮后就程序错乱
当时不是很肯定是ArduinoJson的问题
而且我又看了两遍文档也注意到什么 直到我搜了Issue才解决
只要把DynamicBuffer定义在全局就行了
可这么重要的事情为什么就不能写在文档里呢
要么是我太小白了？（非常有可能orz）

好了 来到最后一个巨坑 内！存！不！足！
对这个巨坑 我想到的唯一办法就是上Arduino Mega2560
实在解决不了了

为了解决第一个坑 我（迫不得已）用了String类（或者说只是因为懒而已String用起来好方便啊qwqqqq）
然后？然后内存就炸了

虽然明明我删掉了所有调试信息后烧进去提示只占用了30%左右的内存
可能我局部String用得实在太多了吧
逼得我传String只能传引用（这才是正确的写法好吗直接返回String是真的非常小白的做法） 于是程序终于勉勉强强地跑起来了

但是接下来就是我最绝望的时刻
因为这个程序 它不稳定
不稳定到什么程度呢
你完全不知道什么时候它是正常运行的
有的时候完全没法用
有的时候只能跑一轮两轮
极少数时候能一直正常运行
所以我按了无数遍的重启.........
最难受的是我还看不见调试信息 为了省内存....

总结：没事别拿Uno折腾自己 该上Mega就果断上 不要和内存优化死磕 尤其是当你还在用String类的时候

其实还踩了很多很多小坑 但这篇充满吐槽风格的文章还是就到这吧
已经毛4000字了....第一次一口气写这么多....

好了 最后附点视频

调试信息还活着的时候拍的演示视频

最终的比赛视频

晚好
2017/6/7 20:30
LEAFERx

“世之奇伟、瑰怪、非常之观，常在于险远，而人之所罕至焉，故非有志者不能至也。”
王安石《游褒禅山记》

这是《计算机程序的构造和解释》（Structure and Interpretation of Computer Programs）笔记系列的第0篇

是的我终于来诈尸了 好久不见
考完学考选考感觉自己像个废人 然后5.1物理省赛 最近是真的忙
但梦想不能丢对吧 于是我打算开始了这本书的笔记（其实只是算法导论实在刷不下去了orzzz）
这本书大概算是圈中公认的（至少是知乎qwq）一本计算机编程入门奇书
书的内容按大佬们的说法是各种抽象概念和抽象方法 是一本讲述控制复杂度方法的入门书
同按大佬的说法 阅读这本书的最终目的是抓住计算机中的神灵
其实这本书我断断续续阅读了也大概有两个月了 算是勉强看完了前三章 虽然是按照阅读《xxx从入门到精通》的节奏
所以决定痛改一下前非 认真地啃完这本书
第0篇主要写一些准备内容吧比如环境搭建啊还有一些学习资源啊什么的
嗯 算法导论再见
好了以上是瞎吐槽 跳过就好
顺便放张图 共勉

¶Introduction

我用的是机械工业出版社和中信出版社出版的SICP中文译本
豆瓣链接

带着崇敬和赞美，将本书献给活在计算机里的神灵。
“我认为，在计算机科学中保持计算中的趣味性是特别重要的事情。这一学科在起步时包含着趣味性。当然，那些付钱的客户们时常觉得受了骗。一段时 间之后，我们开始严肃地看待他们的抱怨。我们开始感觉到，自己真的像是要负起成功地、无差错地、完美地使用这些机器的责任。我不认为我们可以做到这些。我 认为我们的责任是拓展这一领域，将其发展到新的方向，并在自己的家里保持趣味性。我希望计算机科学的领域绝不要丧失其趣味意识。最重要的是，我希望我们不 要变成传道士，不要认为你是兜售圣经的人，世界上这种人已经太多了。你所知道的有关有关计算的东西，其他人也都能学到。绝不要认为似乎成功计算的钥匙就掌 握在你的手里。你所掌握的，也是我认为并希望的，也就是智慧：那种看到这一机器比你第一次站在它面前时能做得更多的能力，这样你才能将它向前推进。”
Alan J. Perlis

目录构成：

• 构造过程抽象（Building Abstractions with Procedures）
• 构造数据抽象（Building Abstractions with Data）
• 模块化、对象和状态（Modularity, Objects, and State）
• 元语言抽象（Meta-Linguistic Abstraction）
• 寄存器机器里的计算（Register Machine' Model of Control）

¶Environment

我使用Racket 6.8 64位作为实验和习题环境
Racket的安装包可以在Racket官网获得
安装完后 可以使用由Neil大佬提供的SICP语言包进行编程
（Racket看上去是一个很好玩的语言平台 有空可以去深入一下）
（好吧我其实只是实在搞不懂MIT-GNU Scheme...）
安装SICP语言包的方法：

1. 打开DrRacket
2. 在上方编辑框内将 #lang racket 改为 #lang planet neil/sicp 并点上方Run
3. 等下载好安装好后 重启DrRacket
4. 点击上方菜单栏 Language => Choose language... => Teaching Languagues 选择下方的SICP 然后点OK
5. 完成 会看到下方编辑框显示：Language: SICP (PLaneT 1.18); memory limit: xxx MB. 如果没有请点一下Run或者重启 接下来就可以在下方编辑框编写程序了

¶Resources

MIT公开课（英文）
MIT公开课视频翻译项目
北大课程资料（使用SICP作为课本）
知乎问题：《计算机程序的构造和解释（SICP）》讨论的核心问题是什么？
还有许多大佬的笔记 搜索关键词：SICP 笔记 就行

¶专业向

¶计算机

• 2018.03 MongoDB权威指南（第2版） [美] 霍多罗夫 (Kristina Chodorow)
• 2017.11 JavaScript设计模式 [美] Addy Osmani
• 2017.08 编码：隐匿在计算机软硬件背后的语言 [美] Charles Petzold
• 2017.04 Web全栈工程师的自我修养 余果
• 2017.02 精通Linux（第2版） [美] Brian Ward
• 2017.02 深入理解JavaScript [美] Axel Rauschmayer
• 2017.02 Raspberry Pi快速入门指南 [美] Maik Schmidt
• 2017.01 计算机程序的构造和解释 [美] Harold Abelson等
• 2016.10 啊哈！算法 啊哈磊
• 2016.09 图解密码技术（第3版） [日] 结城浩
• 2015.11 算法导论 [美] Thomas H.Cormen等
• 2015.09 算法竞赛入门经典（第2版） 刘汝佳
• 2015.09 算法竞赛入门经典：训练指南 刘汝佳
• 2015.09 爱上Arduino：学Arduino玩转Kinect制作项目 Enrique Ramos Melgar等
• 2015.01 妙趣横生的算法 杨峰
• 2015.01 Arduino高级开发权威指南 [美] Steven F.Barrett
• 2015.01 CSS高效开发实战 谢郁
• 2015.01 Arduino晋级应用指南 [美] Emery Premeaux
• 2015.01 jQuery权威指南(第2版) 陶国荣
• 2015.01 Arduino魔法书 [美] Jeremy Blum
• 2015.01 AVR单片机入门与速成攻略 高显生 9787111461555

¶数学

• 2017.04 线性代数 [美] Steven J. Leon
• 2016.03 散度、旋度、梯度释义（图解版） [美] Schey, H.M.
• 2016.02 离散数学 许克祥等 9787512415942
• 2015.01 数学建模（原书第5版） [美] Frank R. Giordano等
• 2015.01 我怎样解题 单墫
• 2015.01 初等数论 陈景润

¶物理

• 2017.08 数学物理方法 [德] 顾樵
• 2017.08 Introduction to Electrodynamics (3rd Edition) [美] David J. Griffiths
• 2017.04 力学 [俄] П.Д.朗道
• 2017.04 经典力学 沈惠川
• 2015.11 费恩曼物理学讲义（第1卷） [美] R.P.Feynman
• 2015.11 费恩曼物理学讲义（第2卷） [美] R.P.Feynman
• 2015.11 费恩曼物理学讲义（第3卷） [美] R.P.Feynman
• 2015.04 电路 邱关源等
• 2015.01 狭义与广义相对论浅说 [美] 爱因斯坦

¶化学

• 2015.11 无机化学（第三版）上册 武汉大学 / 吉林大学
• 2015.11 无机化学（第三版）下册 武汉大学 / 吉林大学

¶其他

• 2017.04 Cinema 4D完全学习手册 TVart培训基地

¶非专业向

¶科普向

• 2018.03 黑洞不是黑的 [英] 史蒂芬·霍金
• 2018.03 现实不似你所见 [意] 卡洛·罗韦利
• 2017.04 费曼讲演录 [美] 理查德·费曼
• 2017.04 度量 [美] 保罗·洛克哈特
• 2017.04 希格斯粒子是如何找到的 [英] 乔恩·巴特沃思
• 2017.02 爱与数学 [美] Edward Frenkel
• 2017.01 程序是怎样跑起来的 [日] 矢泽久雄
• 2017.01 计算机是怎样跑起来的 [日] 矢泽久雄
• 2016.10 七堂极简物理课 [意] 卡洛·罗韦利
• 2016.07 强力与弱力 [日] 大栗博司
• 2016.07 庞加莱猜想 [日] 春日真人
• 2016.05 超弦理论 [日] 大栗博司
• 2016.03 《三体》中的物理学 李淼
• 2016.02 巫师、外星人和星舰 [美] Charles L. Adler
• 2016.02 Microcosmos [德] Harald Fritzsch
• 2015.03 理解科学丛书 （截止至2017年1月28日共有11册）
• 2015.03 无穷的开始 [英] David Deutsch
• 2015.01 电子，电子！谁来拯救摩尔定律？ 张天蓉
• 2015.01 光影世界：电影中的物理学 李耀俊
• 2015.01 电的旅程 探索人类驾驭电子的历史过程 张大凯
• 2015.01 平面宇宙 [美] A. K. 杜德尼
• 2015.01 反欺骗的艺术 [美] 米特尼克
• 2015.01 寻找薛定谔的猫 [英] John Gribbin
• 2015.01 悖论：破解科学史上最复杂的9大谜团 [英] Jim Al-Khalili
• 2015.01 生活中的概率趣事 [瑞典] Peter Olofsson
• 2015.01 反入侵的艺术——黑客入侵背后的真实故事 [美] 米特尼克等
• 2015.01 欲望都市数学版：城市生活中的数学建模 [美] John A. Adam
• 2015.01 化学元素之旅 [美] Tom Jackson

¶社科文学向

• 2017.12 天真的人类学家 [英] 奈吉尔·巴利
• 2017.12 导读弗洛伊德 [英] 帕梅拉·瑟齐韦尔
• 2017.12 文学阅读指南 [英] 特里·伊格尔顿
• 2017.12 诗的八堂课 江弱水
• 2017.12 古代汉语常识 王力
• 2017.01 斯坦福极简经济学 [美] 蒂莫西‧泰勒
• 2017.01 乌合之众：大众心理研究 [法] Gustave Le Bon
• 2015.01 查拉图斯特拉如是说 [德] Friedrich Nietzsche
• 2015.01 莱布尼茨不是黄油饼干 [德] 米歇尔·施密特-所罗门等
• 2015.01 生命之轮 [美] 伊丽莎白·库伯勒-罗斯等
• 2015.01 哲学的门槛 [英] 奈杰尔·沃伯顿
• 2015.01 一战简史 [英]诺曼·斯通

¶艺术向

• 2016.05 设计中的设计 [日] 原研哉
• 2015.05 超越平凡的平面设计 [美] John McWade
• 2015.05 写给大家看的设计书（第3版） [美] Robin Williams

¶诗

• 2018.03 自由 ［爱尔兰］萨缪尔·贝克特
• 2017.03 云雀叫了一整天 木心
• 2017.01 西班牙三棵树 木心
• 2016.09 面朝大海 春暖花开 海子
• 2016.04 设计诗 朱赢椿
• 2015.01 暴风雨使我安睡 顾城
• 2015.01 我会像青草一样呼吸 顾城
• 2015.01 走了一万一千里路 顾城

¶影集

• 2015.03 南法航线 Pano
• 2015.01 我爱这哭不出来的浪漫 严明
• 2015.01 尔本 安东尼

¶散文杂文

• 2018.03 阅读是一座随身携带的避难所 [英]毛姆
• 2018.03 看见 柴静
• 2017.12 野草 鲁迅
• 2017.09 人间草木 汪曾祺
• 2017.04 沉默的大多数 王小波
• 2017.04 自由的夜行 史铁生
• 2017.01 皮囊 蔡崇达
• 2017.01 黑客与画家 [美] Paul Graham
• 2017.01 论摄影 [美] 苏珊·桑塔格
• 2016.10 我的精神家园 王小波
• 2016.05 我们仨 杨绛先生
• 2016.05 最糟的宇宙，最好的地球 刘慈欣
• 2016.02 橙 安东尼
• 2016.01 红 安东尼
• 2015.03 痕记 痕痕
• 2015.03 目送 龙应台
• 2015.01 愿风裁尘 郭敬明
• 2015.01 怀石逾沙 郭敬明
• 2015.01 守岁白驹 郭敬明
• 2015.01 常识 梁文道
• 2015.01 不辩，是一种智慧 林清玄
• 2015.01 眠空 安妮宝贝
• 2015.01 告白与告别 韩寒
• 2015.01 通稿二零零三 韩寒
• 2015.01 万万没想到 有时右逝等

¶小说

• 2018.05 高老头 [法] 巴尔扎克
• 2018.05 捕鼠器 [英] 阿加莎·克里斯蒂
• 2018.03 少数派报告 [美] 菲利普·迪克
• 2018.03 呼啸山庄 [英] 艾米莉·勃朗特
• 2018.03 世界尽头与冷酷仙境 [日] 村上春树
• 2018.01 围城 钱锺书
• 2018.01 苦妓回忆录 [哥伦比亚] 加西亚·马尔克斯
• 2018.01 世界尽头与冷酷仙境 [日] 村上春树
• 2018.01 刀锋 [英] 毛姆
• 2018.01 爱情和其他魔鬼 [哥伦比亚] 加西亚·马尔克斯
• 2018.01 第二十二条军规 [美] 约瑟夫·海勒
• 2017.12 远山淡影 [英] 石黑一雄
• 2017.11 手机 [美] 斯蒂芬·金
• 2017.11 仿生人会梦见电子羊吗？ [美] 菲利普·迪克
• 2017.11 天使与魔鬼 [美] 丹·布朗
• 2017.09 不存在的骑士 [意] 伊塔洛·卡尔维诺
• 2017.09 达·芬奇密码 [美] 丹·布朗
• 2017.09 我们 [俄] 尤金·扎米亚金
• 2017.08 国王与抒情诗 李宏伟
• 2017.08 一桩事先张扬的凶杀案 [哥伦比亚] 加西亚·马尔克斯
• 2017.08 分成两半的子爵 [意] 伊塔洛·卡尔维诺
• 2017.08 美丽新世界 [英] 阿道司·赫胥黎
• 2017.06 罗生门 [日] 芥川龙之介
• 2017.06 没有色彩的多崎作和他的巡礼之年 [日] 村上春树
• 2017.04 1Q84 BOOK 3 [日] 村上春树
• 2017.02 你好，旧时光 八月长安
• 2017.02 暗恋·橘生淮南 八月长安
• 2017.02 最好的我们 八月长安
• 2017.01 蝇王 [英] William Golding
• 2017.01 局外人 [法] Albert Camus
• 2015.01 小王子 [法] 安托万·德·圣埃克苏佩里
• 2016.10 套中人 [俄] 契诃夫
• 2016.10 1Q84 BOOK 1 [日] 村上春树
• 2016.10 1Q84 BOOK 2 [日] 村上春树
• 2016.09 动物庄园 [英] George Orwell
• 2016.09 麦田里的守望者 [美] J.D.塞林格
• 2016.07 失乐园 [日] 渡边淳一
• 2016.07 发条橙 [英] Anthony Burgess
• 2016.05 悖论13 [日] 东野圭吾
• 2016.04 天空之蜂 [日] 东野圭吾
• 2016.04 嫌疑人X的献身 [日] 东野圭吾
• 2016.04 岛 [英] 维多利亚·希斯洛普
• 2016.04 红玫瑰与白玫瑰 张爱玲
• 2016.04 十字弓·玫瑰之刃 恒殊
• 2016.04 十字弓·背叛者月 恒殊
• 2016.04 十字弓·亡者归来 恒殊
• 2016.02 梦之海 刘慈欣
• 2015.03 挪威的森林 [日] 村上春树
• 2015.03 在逃 王若虚
• 2015.03 桥声 吴忠全
• 2015.03 第七天 余华
• 2015.01 星际迷航-红衫 [美] John Scalzi
• 2015.01 1988：我想和这个世界谈谈 韩寒
• 2015.01 倾城之恋 张爱玲
• 2015.01 慢 [法] 米兰·昆德拉
• 2015.01 一粒红尘 独木舟
• 2015.01 牧羊少年奇幻之旅 [巴西]保罗·柯艾略
• 2015.01 胡萝卜须 [法] 儒勒·列那尔
• 2015.01 欧叶妮·葛朗台 [法] 巴尔扎克
• 2015.01 最后一课 [法] 都德
• 2015.01 羊脂球 [法] 莫泊桑
• 2015.01 从你的全世界路过 张嘉佳
• 2015.01 杀死一只知更鸟 [美] 哈珀·李
• 2015.01 神曲 但丁
• 2015.01 1984 [英] George Orwell
• 2015.01 穹顶之下·危机卷 刘慈欣等
• 2015.01 穹顶之下·末日卷 刘慈欣等
• 2015.01 三体 刘慈欣

¶传记

• 2017.08 特斯拉：电气时代的开创者 [美] W.伯纳德·卡尔森
• 2016.12 硅谷钢铁侠 [美] Ashlee Vance
• 2015.05 乔纳森传 [美] Leander Kahney
• 2015.05 与自己对话 [南非] Nelson Mandela
• 2015.01 小QQ大帝国 熊江

在现实断裂的地方
梦 汇成了海

顾城 《弥合》

所以你好 欢迎来到 LEAFER x LAB
这是我的博客 主要写一些技术类的文章
当然 可能还会放一些自己的作品
那么请持续关注啦
比心

¶关于我

咸鱼终于想起来要更新啦哈哈哈哈哈。
目前在上海科技大学勤奋睡觉学习.jpg
咸鱼一只，仍旧挣扎在高考的滚滚浪潮之下，是物竞党 + NOIP蒟蒻。
喜欢编程，喜欢设计，喜欢尝试各种新奇好玩的东西。
喜欢书，喜欢诗和奇奇怪怪的科普。
喜欢明信片，喜欢吃。
觉得自己应该是一只有趣的咸鱼。

¶关于这个博客

由于各种时间不够，上了大学也只能不定期诈尸 qaq。
由于各种时间不够，所以大概高考前就都只能不定期诈尸啦。

但是一旦闲下来就会频繁诈尸哦。
所以请多多关注啦。

¶关于文章转载和其他

如果没有特殊说明 本站所有文章均采用 CC BY-NC-SA 4.0 CN 许可协议
转载请注明作者并最好附带原文链接哦
顺便如果喜欢我的博客 欢迎友链ww

¶最后

那么，送上一首Alan Pownall的Colourful Day。
请多多指教啦w。