背景

前几天在逛博客的时候发现两个用hexo的很厉害的博客:yikun,raysmond，发现他们不仅内容牛x，而且他们都有一个读书页面，能够同步自己在豆瓣的账户，将自己的阅读经历放在博客中。我觉得这个idea非常有意思，原来博客不仅可以分享技术、分享感悟，还可以当作读书笔记，更加方便的记录自己的学习历程。
于是我就想了，反正最近临近期末考试，闲着也是闲着，不如捣鼓捣鼓这个玩意，顺便学学Nodejs。本来打算花几个小时搞一搞的，结果摊子铺的有点大，搞了两三天搞出了个能同步豆瓣读书跟电影的hexo插件，也算是个意外收获吧。

踩坑

第一坑

我参考了raysmond的网页源码，发现其实他做的事情很简单，就是用xhr调用豆瓣API，然后把结果渲染给页面。于是我就新建了一个page，将源码改了改放了进去，发现并不能用，因为很多浏览器禁止xhr的跨域访问，raysmond的博客使用的是七牛云的cdn，所以不存在这个问题。而我没搞这个cdn，所以在我的chrome里报了错，加载失败。

第二坑

既然不允许跨域请求，那我干脆就在部署前用python脚本手动调用api，先把返回的结果存在服务器，然后再用xhr访问这个不跨域的本地数据。显然，这会导致数据不是实时更新，需要自己手动去同步，不过好处就是这样可以解决之前的问题，同时也不会受豆瓣API的调用限制的影响，况且由于这些数据本身就不常更新，手动调用api也不难，因此不太影响体验。
搞完之后发现基本能用，正当我打算完工的时候突然发现在github上有一个插件叫hexo-generator-douban，没错，这个插件就是yikun弄的。我试了试的确能用，不过布局没有raysmond的好看。于是我就想着要不我也搞个插件吧，毕竟直接在page中写html代码实在是太丑了，不方便身边的同学重用，也不方便自己搬运，倒不如写成个插件用起来方便。。。

第三坑

于是我就端起了hexo-generator-douban的源码开始研究，研究hexo的api,学着创建npm帐号，创建npmjs项目,发布npm项目。。。不过当我想把代码按照套路填在里面的时候，我发现在插件中是不能直接用script和style标签来引用其他文件的，因为我们引用的使用所采用的相对路径与调用的时候的路由是完全不一样的。也就是说我不能在代码中写入运行时的路径，只能写入编译时的路径。这样我只能直接把js和css写进nodejs文件里了。。。可这也太丑了吧。。。

第四坑

研究了一会发现其实我应该可以ejs这样的模板引擎，毕竟这是编译时就处理的，于是我就倒腾了一会ejs，搞了搞发现成，终于可以把html(ejs)文件与控制(nodejs)文件分开搞了，代码好看了很多，调理也清楚了。
忽然，我想既然我们可以同步读书，那么为什么不同步电影呢？？？翻了翻豆瓣的api，发现他竟然没有提供“获取用户喜欢的电影”这类的接口。。。不知道他们是怎么想的，不过看了看豆瓣自己的网页都报了一堆error，我感觉这也正常。。。

第五坑

既然不能掉用api，那有没有其他方法获得这个信息呢？忽然我灵机一动，发现自己豆瓣主页的rss能够提供读书跟电影的信息。不错，就拿这个搞了。
于是我捣鼓了半天的xpath，xmldom来解析这个rss，照着之前的html模板写了半天，终于搞定了电影的获取。正当我写完打算庆功的时候，突然发现我忘记了rss只能获取最近的信息，当我收藏新的电影时，旧的就会被顶走。。。这特么就很坑了。。。

第六坑

好吧，既然这样也不行，那我就只能手动写个爬虫了。。。于是我就照着豆瓣的源码，写了半天的爬虫，总算是成功获取到了数据，放到之前的代码中，成功显示。
正当我又以为成功的时候，突然发现了一个bug，我在读书页面中使用yilia的smart menu的时候，发现返回的时候页面就消失不见了。。。难道是兼容性问题？？？那我还要去看yilia的源码喽？？？想想就蛋疼。。。

未完待续

这个bug找了一个晚上，忽然发现竟然是我自己写的一个叫hide的样式跟yilia的样式重名了。。。这下我总算意识到了名空间的重要性，于是我在所有我自己定义的样式前面加了hexo-douban-前缀，成功debug。。。

总结

项目托管在了我的github上，同时注册在了npmjs里，而且发布在了hexo.io的插件列表里。并且以我自己的读书页面跟电影页面作为在线demo，算是对开源界作出了一点点小贡献吧。
整个项目到目前前前后后花了半个礼拜时间，版本一改再改，现在改到了0.1.７了，就先告一段落吧，以后什么分页啊排序啊什么的有空再搞吧，开始期末复(预)习喽。

ps:为防止以后页面失效，先存个截图：

前言

最近恶心的项目中期检查，我被分配到做社交图的分析，然而事实上我并不知道弄啥。虽然不是我自己答辩，但是考虑到还是不要太坑dalao，我决定不管怎样至少得搞点图撑撑场面免得尴尬，这几天就赶鸭子上架倒腾了下graph_tool这个专门用于对图进行可视化的python库。虽然网上中文资料不足，但是他的英文文档还是非常全面的，很多设计的小细节也在文档里提及了，非常简单容易上手。下面就从一个初学者的记录下我的学习历程。

安装

虽然是个python库，但是毕竟是要做大量数据计算的，因此graphtool在底层使用了Boost, CGAL 和 expat这几个C++库(Boost是扩展的标准库，CGAL是一个计算几何算法库，expat是一个XML解析器)。这就导致了使用通常的pip和easyinstall不太好直接安装。正确的安装姿势大概有三种:

1. 使用Docker
2. 源码安装
3. 各个Linux版本的包管理器

这里主要参考graph-tool installation的各种安装说明。
从最基本的源码安装，到封装好的包管理器安装，再到最万金油的docker安装一应俱全。
看上去一片美好。
然而真正用的时候发现，如果使用docker，官方提供的镜像还是太过庞大，用起来还是太臃肿了;如果采用更新源+包管理器安装的化，要是系统的版本比较新还好，要是系统版本老了，就会报各种依赖不足的问题。。。最坑爹的是，即使采用源码安装的方式，由于开发人员比较勤快，经常更新技术，很多库都需要较新的版本，容易导致老的机器上无法编译，而且由于项目源码是托管在他自己搭的git服务器上，这个服务器还很坑，旧的版本经常下不下来。。。最近不知道为什么官网的服务器崩了，还好我之前下了源码，于是把他fork到了我的github上，做个备份。

不过还好，虽然我的服务器比较旧，但是我的台式机比较新，没啥问题。。。

函数结构

这个项目的文档非常详尽，可以参考他的quickstart，类的API在这里。下面稍微整理下大概用途，方便查找：

简单说明

图的构建

• graph-tool支持有向图和无向图，默认是无向图，他将节点用一个编号表示，边用开始节点和终结点的编号来表示。节点编号下标从0开始递增，并始终从0开始保持连续。
• 当我们删除一个节点时，实际上是将这个节点与最后一个节点交换索引，然后将总的编号减一。因此当我们迭代删除的时候，要按照节点编号逆序遍历删除。
• graph-tool为方便保存图的信息，采用的是压缩的xml来进行图的持久化存储，用这个格式来保存图还是比较高效的，我们要率先考虑。
• 使用这个库的时候我们尽量不要写循环语句，比如节点度数的统计信息等。因为就和numpy一样，绝大多数需要循环的操作他都提供了并且做了优化，我们需要做的就是找到这个函数。

PropertyMap对象

这个对象是graph_tool封装的一个映射工具，文档在这里，以后经常会用到。他其实是对C++中的Map进行的一个封装，键的类型被限定为了’e’,’v’,’g’，而值可以映射为int,float,vector等多种c++类型，用法如下:

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

import graph_tool.all as gt
g=gt.price_network(200)
prop_v=g.new_vertex_property("int")#创建一个节点到int的映射
#prop_e=g.new_edge_property("int")#创建一个边到int的映射
#prop_g=g.new_graph_property("int")#创建一个图到int的映射
prop_v.a=np.ones(g.num_vertices()) #为prop_v赋值
#print prop_v.a#直接获取映射数组
#print prop_v[2]#按下标取值
#print prop_v.value_type()#值的类型
#print prop_v.key_type()#键的类型

我们也可以直接把PropertyMap跟Graph绑定:

1
2
3
4

g.properties[("e", "foo")] = g.new_edge_property("vector<double>")
g.vertex_properties["foo"] = g.new_vertex_property("double")
g.vertex_properties["bar"] = g.new_vertex_property("python::object")
g.graph_properties["gnat"] = g.new_graph_property("string", "hi there!")

绘图方法

我的目的是画图，那么我就重点研究了下用来画”图”的函数graph_draw。这个函数必选参数只有一个，但是可选参数却有十几个，我们选几个重要的一一讨论。
下面是函数原型:

1

graph_tool.draw.graph_draw(g, pos=None, vprops=None, eprops=None, vorder=None, eorder=None, nodesfirst=False, output_size=(600, 600), fit_view=True, inline=False, mplfig=None, output=None, fmt='auto', **kwargs)

必备参数
必备的参数肯定是g，是指我们需要画的Graph对象。

pos参数
pos参数是指我们通过一些布局算法计算出来的对于每一个节点的坐标，是一个PropertyMap对象。这个PropertyMap对象其实就是一个映射，每一个节点的下标对应了该节点的x,y坐标。这个对象是通过布局算法生成的就行了。默认情况下我们用的是sfdp_layout()方法来生成这一系列坐标。

vorder,eorder,nodefirst参数
这些参数控制的是绘图的顺序，主要是考虑了一些点线的覆盖问题。

output参数
这个参数指定的是文件的输出文件名和格式，可以根据后缀判断，支持png,svg,pdf,ps四种文件格式。当然也可以用fmt参数直接指定格式。通常情况下png方便显示，但是容易失真。pdf和svg是基于矢量的，放大不失真。
有趣的是如果不指定这个参数，那么他会生成一个可以交互的界面:

这个界面至少有下面的功能:

• 点击一个节点，左下角会显示这个节点的下标
• 点击一个节点，他会高亮与之相邻的节点
• 我们可以对图片进行放大，缩小，旋转
• 我们可以拖动节点从而改变图的形状
• 对图片进行修改后，在我们关闭界面之后，修改后的布局会被更新到pos参数里

vertex_*,edge_*属性
这些属性可以指定具体画图的样式，样式表可以参见文档，下面用几个例子说明。

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

import graph_tool.all as gt
import numpy as np
g = gt.price_network(1500)
deg = g.degree_property_map("in")
deg.a = 4 * (np.sqrt(deg.a) * 0.5 + 0.4)
ebet = gt.betweenness(g)[1]
ebet.a /= ebet.a.max() / 10.
eorder = ebet.copy()
eorder.a *= -1
pos = gt.sfdp_layout(g)
gt.graph_draw(g, pos=pos, vertex_size=deg, vertex_fill_color=deg,
    vorder=deg,edge_color=ebet, eorder=eorder, edge_pen_width=ebet,
    output="output.png")

这个例子非常简单而且经典，他做了下面的事情：

1. 随机初始化了一个由5000个节点组成的price_network模型
2. 用PropertyMap deg保存所有节点的入度，用于保存节点的权重
3. 对deg的值做了个简单的函数变换
4. 用PropertyMap ebet保存所有边的betweenness中心度，用于保存边的权重
5. 将ebet的值归一化到0-10之间
6. 用PropertyMap eorder对ebet进行拷贝并取反，用于保存绘图顺序
7. 用PropertyMap pos保存sfdp算法生成的图的坐标信息
8. 将节点的大小、颜色用deg控制，将边的粗细、颜色用ebet控制，随后输出成png。

其他布局算法与绘图算法

graphtool提供了至少７种布局算法，非常丰富。同时他也提供了社区分块算法与层级绘图算法，这里就不细说了。

最后链一个简单实验:Weibo_Data_Analysis

参考资料

graph-tool installation
graph-tool

前言

好久没写博客了，倒不是因为最近没在学习，而是觉得最近学得有点太多，一时无从下笔。知识这种东西真是奇怪，真的是懂得越多才知道自己懂得越少。虽然这个真相经常会给我一种无力感，但是我还是会沉浸在了解一件事情的来龙去脉的过程中。唔，看来学习也是会容易让人上瘾的。。。

不过最近在学习的过程中，我渐渐也明白了一点，那就是碎片化的学习效率那是惊人的低。我曾经十分推崇学习一个技术的时候，先上手，然后遇到一个问题就解决一个问题。但是后来慢慢发现，这样经常会导致我们花很多的时间去解决那些在这个领域里非常基本的问题。所谓语速则不达，还是稳扎稳打拿本书在手里啃啃靠谱点。

不过今天我不打算写那些工具类的笔记，我倒是想记一记一个有趣的问题，那就是如何用Ascii字符来绘制一幅画。

Ascii-Art是啥

Ascii-art是啥，话不多说，举几个例子:

类别一

1
2
3
4

  / __/__  ___ _____/ /__
 _\ \/ _ \/ _ `/ __/  '_/
/___/ .__/\_,_/_/ /_/\_\   version 1.6.2
   /_/

1
2
3
4
5
6
7

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.5.3.RELEASE)

这个是我最近遇到的两个图标，他们都是用ascii字符来表示另一个Ascii串。当我第一次见到的时候我还对这个图标的设计赞叹不已，感觉设计者还是花了一点小心思的，毕竟相比于普通的图片banner，这个纯ascii码的更加方便文本的显示，尤其是对于程序员。我们可以把他放在代码的注释里、网页的console里，命令行的提示里等等，并且总有一种十分装x的感觉。

类别二

再看看下面的例子:

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

                             /T /I
                              / |/ | .-~/
                          T\ Y  I  |/  /  _
         /T               | \I  |  I  Y.-~/
        I l   /I       T\ |  |  l  |  T  /
     T\ |  \ Y l  /T   | \I  l   \ `  l Y
 __  | \l   \l  \I l __l  l   \   `  _. |
 \ ~-l  `\   `\  \  \\ ~\  \   `. .-~   |
  \   ~-. "-.  `  \  ^._ ^. "-.  /  \   |
.--~-._  ~-  `  _  ~-_.-"-." ._ /._ ." ./
 >--.  ~-.   ._  ~>-"    "\\   7   7   ]
^.___~"--._    ~-{  .-~ .  `\ Y . /    |
 <__ ~"-.  ~       /_/   \   \I  Y   : |
   ^-.__           ~(_/   \   >._:   | l______
       ^--.,___.-~"  /_/   !  `-.~"--l_ /     ~"-.
              (_/ .  ~(   /'     "~"--,Y   -=b-. _)
               (_/ .  \  :           / l      c"~o \
                \ /    `.    .     .^   \_.-~"~--.  )
                 (_/ .   `  /     /       !       )/
                  / / _.   '.   .':      /        '
                  ~(_/ .   /    _  `  .-<_
                    /_/ . ' .-~" `.  / \  \          ,z=.
                    ~( /   '  :   | K   "-.~-.______//
                      "-,.    l   I/ \_    __{--->._(==.
                       //(     \  <    ~"~"     //
                      /' /\     \  \     ,v=.  ((
                    .^. / /\     "  }__ //===-  `
                   / / ' '  "-.,__ {---(==-       -Row
                 .^ '       :  T  ~"   ll       
                / .  .  . : | :!        \\
               (_/  /   | | j-"          ~^
                 ~-<_(_.^-~"

1
2
3
4
5
6
7
8
9
10
11

              _..-'(                       )`-.._
           ./'. '||\\.       (\_/)       .//||` .`\.
        ./'.|'.'||||\\|..    )O O(    ..|//||||`.`|.`\.
     ./'..|'.|| |||||\`````` '`"'` ''''''/||||| ||.`|..`\.
   ./'.||'.|||| ||||||||||||.     .|||||||||||| |||||.`||.`\.
  /'|||'.|||||| ||||||||||||{     }|||||||||||| ||||||.`|||`\
 '.|||'.||||||| ||||||||||||{     }|||||||||||| |||||||.`|||.`
'.||| ||||||||| |/'   ``\||``     ''||/''   `\| ||||||||| |||.`
|/' \./'     `\./         \!|\   /|!/         \./'     `\./ `\|
V    V         V          }' `\ /' `{          V         V    V
`    `         `               V               '         '    '

唔，这两张图片就更有意思了，一个好像是只鹰，另一个好像是只蝙蝠，栩栩如生，重点是他的设计是如此的精巧，图片的轮廓与字符衔接的十分完美，真的可以说每一幅图都给人一种眼前一亮的感觉。甚至可以说，这就是art。

类别三

还有一类:

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

ZZZZZZZZZZZZuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
ZZZZZZZZZZZZZZZuuuZuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
ZZZZZZZZZZZuuZuuZuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
ZZZZZZZZuuZuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
ZZZZZZZZuZuZuuuuuZyfppkqqbppyZuuuuuuuuuuuuuuuuuuuu
ZZZZZZZZuuZuypg@NNMMMMMMMMMMM#@qyuuuuuuuuuuuuuuuuu
ZZZZZZZuZZf@#NNMMMMMMMMMMMMMMMMMM#qZuuuuuuuuuuuuuu
ZZZZuZZZpg#NMNMNNNNNNN#####NNMMMMMN#qZuuuuuuuuuuuu
ZZuuuuZqH#NNNNNN#H@@@ggqkbqg@@H##NNNNHpuuuzuuuuuuu
ZZuuZZg#NNNNN#HgqpfVyyZZuuuuuuuVbg@H#HHfuzuuuuzuuu
ZZZuZyHNNNNNHmbffVyZuuuzzrrtl===trf@@HH@Zuuuuuuuuu
ZZZZuy#NNNNHgpffVyZZuuzzrttl=????>tq@@HHpuuzuuuuuu
ZZZZZy#NNNNHqfVyyZZuuzzvttll===?>;?p@HHHpuuzuuuuuu
ZZZZZf#NNN#@bfpbbfVZzzzrt=lrrvuzr=>rqHHHpzuuuuuuuu
ZZuuuVHNNNHbfpkpbppffyyul=rZyyzl==??r@@Hbzuuzzuuzu
ZZuuZZ@#NN@bkVVpqqqfZZypuvZubqytt>;rrg@mZzzzzzuzuu
ZZZuZZyq@#myyVfpVVyyyfqpr=Zrvuvt??>=?bu>ttzzzuuzuu
ZZZZZZfVp@qZyyyyZVVyyffZr?>?lrrtl?;:;zz:ltuzzuuzuu
ZZZZZZZVgbfyZZZZuuuZfZpyv?=?>==?>::~;;ul>uzzuuuuuu
ZZZZZZZZfyyyZZZuuuuZyfpfuttl?==?;:~:::;>rzzzuzuuuu
ZZZZZZZZZZyyZZZZZuZyyyyZuvll=>?>::~:>;lzzuzuuuuuuu
ZZZZZZZZZuZZyZZZZZyVpbpfyuuurtl>::~:zuuuuuzuuuuuuu
ZZZZZZZZZZZZZZZZZZZZZZZZzr=>?l?;:::luzuuuuuuzuuuuu
ZZZZZZZZZZZZZZyZZZZyZZZuvl?>;;;:::luuuuuuzuuuuuuuu
yZZZZZZZZZZZZZyyyyyZyyyuvt?;;;::;=uuuuuuuuuuuuuuuu
yZZZZZZZZZZZZZyyVfVyyyZuzrl=>>>;:tuuuuuuuuuzuuuuuu
yZZZZZZZZZZZZZyyyVfffVyZzrt??>;::lrvuuuuuuuuuuuuuu
yyyZZZZZZZZrufyyyyVVyyZur=>;;;;::rZ>>uuuuuuuuuuuuu
yyyyyZZZZZ=tqkyyyyyyyyZv=>>;>;;::tqz.:uuuuuuuuuuuu
yyyZZZZZZt;>VqyyyZZyZZuvl??>>;;;>vb?` >uuuuuuuuuuu
yyyZyZyZr>;;;tVyZZZZZuzrl=?????lzr~`   ~?ruuuuuuuu
yyyuvtl?;;;>;;:lZyZuuzzrttlllrzt:`    ```.~:?tuuuu
t=>>>>>>;;;;;;::~luuvrrrrvrrv=~.`  `````.......~;?
>;>>>>>>::;;;;;::~~>=trrzvl;..``````.````......~~~
>>>>>>??;::::;;::~~:;~~::~~.`````.....``......~~~~
;;;;>>>??::::::;>?==;...~~:;;:~........``.....~~~~
;;;>>>>>?>>>???>;;>?:`....~~:::;;:~...~~``.....~~~

虽然看不太清楚但是意思到了（如果想清楚一点可以加大图片的大小）。。。其实这是我本人的一个证件照。。。跟上面棱角分明的简图不同，这个类似用字符代替像素点来对图片进行构造，看上去简陋了许多。

历史来源

其实这种类似的图片并不新鲜，或者说这其实是旧时代的产物。在计算机刚刚普及的时候，由于图像处理能力以及网络比较差劲，一般只能显示文本。为了传递更多有趣的信息，人们想到了用ascii码来拼一个图片。在很多早期的电子邮件，BBS里经常会看到这样的东西。不过其实最早的asciiart可以追溯到1966年左右。。。具体的历史可以参考wiki。charter.net里也有一些关于ascii-art的FAQ。

到了当今时代，网络和显示器显然都不成问题了，但是仍然有很多人对这类精巧的图片感兴趣，他们致力于设计和使用这类文字。而事实上，我们的输入法中也有大量类似的颜文字，比如：

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

@_@ 疑惑、晕头转向
o_O 讶异
^_^ 高兴
XD (横向看) 现在多用于高兴地笑、张开嘴大笑
T_T 哭得很伤心
-_-b 流汗
=_=" 无奈
=3= 亲吻、嘟嘴
^o^/ 抱抱
(^O^)/ 开心
._/.# 生气
(=^_^=) 喵猫
(￣(工)￣) 大狗熊

其实我们现在所说的“颜文字”，一般就是指日式颜文字或日本颜文字（emoticon–emotion icon的简称），或者”Japanese ascii art”。

如何制作

当然，我并不是很在意这些东西的历史，我更加关心这些东西从哪里能搞得到以及是怎么搞出来的。

FIGlet字体

首先我们研究一下第一类图片是怎么搞的。
我找到了这样的一个网站patorjk.com。
他提供了我们不同字体不同宽度高度的Text转Ascii的接口，一般情况下我们可以直接利用这个接口得到自己想要的图案。

很显然，他的原理十分简单，就是将Ascii码做成一种特定格式的字体，然后将这个字体应用到你写的Ascii码上即可。
需要注意的是这个字体与我们常见的.ttf之类的字体是不一样的。在FIglet Fonts里提供了至少263中字体包。下载下来的文件中以.flf为后缀的就是字体文件。

这个.flf的字体文件需要用专门的软件打开。在Linux下就直接有一个叫figlet的软件包，apt-get就能下载下来。
基本用法如下:

1
2
3
4
5
6
7
8

myths@business:~$ figlet -d ~/Downloads/fonts/ -f o8.flf
myths
                          o8   oooo                    
oo ooo oooo oooo   oooo o888oo  888ooooo    oooooooo8  
 888 888 888 888   888   888    888   888  888ooooooo  
 888 888 888  888 888    888    888   888          888 
o888o888o888o   8888      888o o888o o888o 88oooooo88  
             o8o888

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

myths@business:~$ figlet -d ~/Downloads/fonts/ -f 3d_diagonal.flf
myths
                                                           
                                                           
          ____              ___      ,---,                 
        ,'  , `.          ,--.'|_  ,--.' |                 
     ,-+-,.' _ |          |  | :,' |  |  :                 
  ,-+-. ;   , ||          :  : ' : :  :  :      .--.--.    
 ,--.'|'   |  ||    .--,.;__,'  /  :  |  |,--. /  /    '   
|   |  ,', |  |,  /_ ./||  |   |   |  :  '   ||  :  /`./   
|   | /  | |--', ' , ' ::__,'| :   |  |   /' :|  :  ;_     
|   : |  | ,  /___/ \: |  '  : |__ '  :  | | | \  \    `.  
|   : |  |/    .  \  ' |  |  | '.'||  |  ' | :  `----.   \ 
|   | |`-'      \  ;   :  ;  :    ;|  :  :_:,' /  /`--'  / 
|   ;/           \  \  ;  |  ,   / |  | ,'    '--'.     /  
'---'             :  \  \  ---`-'  `--''        `--'---'   
                   \  ' ;                                  
                    `--`

用-d指定字体文件夹，-f 指定字体文件，然后就进入了交互式的环境，输入字符后输入回车就能产生生成的图案，十分方便。

JavE绘图

对于第二类的图形，我找到了很多汇总的网站，比如ascii-art.de、chris.com。这里都记载了很多有趣的图形，就不一一列举了。其实很多ascii-art的网站都属于一个叫ASCII Arts Web Ring的圈子(artcode)，通过这个主站我们可以很轻松的找到很多手机图案的网站。

那么这些图案又是怎么做的呢？

显然上面的方法只能搞定纯Ascii的文本，甚至不能支持中文(谁叫中文那么多。。。)，所以显然也不能支持。这就需要用到我们的JavE5了。
由于看上去这个网站好多年没更新了，生怕他哪天宕掉，我就把这个项目fork到了我的github上，并且加上了最新的Figlet字体。。。侵删。。。

项目中有一个jave5.jar的文件，运行这个文件我们就可以打开这个软件(java -jar jave5.jar):

我们可以很方便的使用这个软件来进行创作。值得一提的是，除了支持一般的绘画，他也支持上面的 FIGlet字体，甚至支持latex公式。。。

image2ascii

相比于上面的，我个人觉得这个就比较简单了。毕竟稍微懂点计算机图形学的同学就知道怎么从图片中提取像素信息。一个简单的思路是，我们可以把图片进行二值化，然后对应白色的地方我们补0，对应黑色的地方我们补8，这样我们就可以生成一个0-8的ascii图片（这里可能还需要考虑字符的宽高比）。如果想要缩放，我们就需要先对原图进行缩放再进行替换即可。

不过这个方法还是有点丑，毕竟我们是把图片当成二值图来进行处理的。其实我们完全可以把图片变成灰度图，然后根据不同像素点的灰度选择不同”灰度”的字符，这样生成的图片更为好看。

在jave5中，也非常完美的实现了这个功能，我们可以直接在命令行使用这个命令：

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

myths@business:~/Downloads/jave5$ java -jar jave5.jar i2a ~/Pictures/me.gif width=20
ZZZZZuuZuuuuuuuuuuuu
ZZZuZuuuZZZuuuuuuuuu
ZZZZQNMMMMMMNmXuuuuu
ZuQMNNMMMMHMMMMRuuuu
ZZWNMHVZuwtz=vHHkuuu
ZuMNMWkkwOzuy+WHkuzu
ZZdMHfHHXKXW01wBwzuu
ZZXWWZZXWkj+z<(Izzuu
ZZZZWZZXkkAz<:(zuuuu
ZZZZZZZyZkI<<(zuuuzz
yyZZZZVWWXO+<juuuzuu
yyyZOHyyyZ<;;d>Ouuuu
yZU3;?WZuOz1z=  ?Ouu
>>><;;_?zvC^`  `..._
;;><((<1!__<--.- ._~

这是我上面的证件照的缩小版，我们可以通过指定width来修改大小。

参考资料

Wiki Ascii_art
Ascii-Art-Faq
Text to ASCII Art Generator
artcode.org
Jave
chris ascii
textart

Thymeleaf

Thymeleaf是最近SpringBoot推荐支持的模板框架，官网在thymeleaf.org这里。

我们为什么要用Thymeleaf来作为模板引擎呢？官网给了我们一个非常令人信服的解释：

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.>

基本写法就像下面这样:

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

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</th>
      <th th:text="#{msgs.headers.price}">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod: ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
    </tr>
  </tbody>
</table>

没错，由于这个模板是以xml的格式以属性的形式嵌入在html里，因此不仅适合后台人员使用，也能直接在没有后台程序的情况下直接由浏览器渲染，因为浏览器会自动忽视html未定义的属性。

这个属性还是非常吸引人的，毕竟我们做后台最麻烦的就是在乱七八糟的前台模板加代码，加完代码之后前台的也不知道加的代码对不对，非得先跑一遍才能知道。如果模板文件能够直接由前端人员编写那该多好，而且前端人员在编写的时候就能知道这个代码能不能跑，岂不是非常开心？

参考文档

Thymeleaf的文档链接在这里，细节可以直接去搜索，下面主要列举下我经常遇到的一些问题。

模板定义

由于我们很多的IDE都会提供很好的提示工作，因此我们有必要告诉IDE我们使用的模板规范以方便他给我们提供服务。Thymeleaf的一般规范是这样的:

1
2
3
4

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
...
</html>

把我们需要编写的DOM放在这个html标签里面就好了。
这句话做了什么事呢？其实就是定义了一个叫th的名空间，所有Thymeleaf的属性都是在这个名空间下面。

静态文件的加载

我们知道一个网页中加载的静态文件通常有一个十分尴尬的问题，比如对于bootstrap.css，就是如果我们能让IDE识别这个文件，那么我们得用相对路径来引入这个文件。这样我们的IDE才能加载到这个文件，并且给予我们相应的提示。但是如果我们想要在发布后服务器能够加载这个文件，我们就必须用相对于resources或者static的位置来引入静态文件。显然，一般情况下我们不能兼顾这两个问题，只能要么在编写的时候用相对自己的路径，然后在发布的时候用相对于项目资源文件夹的路径，要么就只能放弃IDE的提示，非常尴尬。

而在Thymeleaf中，我们可很好的处理这一点。在引入资源的时候，我们可以写类似下面的代码:

1
2

<link rel="stylesheet" type="text/css" media="all" 
          href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />

当我们在没有后台渲染的情况下，浏览器会认得href，但是不认得th:href，这样它就会选择以相对与本文件的相对路径去加载静态文件。而且我们的IDE也能识别这样的加载方式，从而给我们提示。
当我们在有后台渲染的情况下，后台会把这个标签渲染为这样:

1

<link rel="stylesheet" type="text/css" media="all" href="/css/gtvg.css" />

原来的href标签会被替换成相对于项目的路径，因此服务器就能找到正确的资源，从而正确渲染。

非常的智能而且方便。

这里需要注意到所有的路径我们是用”@{}”来引用，而不是”${}”，因为后者是用来引用变量名的，而前者是引用路径的，因此我们在这里用的是前者。可是如果我们是把路径写在变量里，那么就要用后者来引用了。

常量的渲染以及文字国际化

很多情况下我们并不希望在代码里硬编码进文字，我们希望把文字提取成统一的代号，这样方便管理，也方便更改语言。
我们要做的首先是创建一个语言文件，比如message_chinese.properties:

1
2
3
4

title=这是标题
message1=这是消息2
message2=这是消息2
....

然后我们在application.properties里加上下面这行注册这个语言文件:

1

spring.messages.basename=message_chinese

这样，我们在模板里就可以通过#{消息名}来获取这个消息对应的真正的文字:

1

<title th:text="#{title}"></title>

变量的渲染

对于一个模板文件来说，最重要的事情莫过与传递变量了。
这件事情非常简单，主要分为两步，首先是在SpringBoot的Controller里给Model传进参数：

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

@Controller
public class IndexController {
    @RequestMapping(path = {"index", "/"}, method = {RequestMethod.GET})
    public String index(Model model) {
    
        model.addAttribute("var1", "value1");
        model.addAttribute("src1", "https://www.baidu.com");
        
        Map<String,Object> map=new HashMap<>();
        map.put("src1","/a.png");
        map.put("src2","/b.png");
        model.addAttribute("src", map);
        return "index";
    }
}

这样我们就可以在模板里通过th:属性名="${变量名}"这种方式来传值，比如:

1
2
3

<span th:text="${var1}"></span>
<a th:href="${src1}" >baidu</a>
<img th:src="${src.src1}" />

定义十分清楚，也很容易类比，支持层次选择，不再细说。

循环语句

当我们需要动态加载一些帖子的时候，我们经常需要用循环语句，Thymeleaf中循环语句也很简单，主要是依靠th:each这玩意来实现。
首先我们当然是在Controller里创建可供循环的List对象并传递给model:

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

@Controller
public class IndexController {
    @RequestMapping(path = {"index", "/"}, method = {RequestMethod.GET})
    public String index(Model model) {
    
        List<String> list=new ArrayList<>();
        for(int i=0;i<10;i++){
            list.add(String.valueOf(i));
        }
        model.addAttribute("list", list);
        return "index";
    }
}

然后在需要循环的地方这样使用：

1

<div th:each="value:${list}" th:text="${value}"></div>

就能循环渲染这个list里的元素了。

激活语句

所谓的激活语句(自己起得名字)，就是在某些情况下我们想根据变量的值来选择到底显示还是不显示这个标签。用法也很见简单，主要靠th:if跟th:unless:

1
2

<div th:if="${judge}" >if clause</div>
<div th:unless="${judge}" >unless clause</div>

通过判断judge这个变量是否不为空来控制这个标签是否显示。。。if跟unless互为反义词。。。不解释了。。。

选择语句

类似于switch-case语句，非常简单，见下例：

1
2
3
4

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
</div>

这段代码顺便体现了一个小细节，如果想在th名空间里直接填入字符串，我们必须再用一对引号来引用。。。

代码分割引用

thymeleaf也提供了类似import的东西，可以将很多代码块抽象成模块，然后在需要的时候引用，非常方便。具体的说，引用方式有两种–replace和include。
比如有两个文件

1
2

<!--footer.html-->
<div th:fragment="copy">footer</div>

1
2

<!--index.html-->
<div th:include="footer :: copy">index</div>

通过这样，我们就可以在index里面引用footer里面的这个div，我们用的是include，因此渲染的结果就是这样:

1
2
3

<div>
    <div th:fragment="copy">footer</div>
</div>

如果是replace，那就是整个标签的替换，很好理解。
当然，除了用fragment来标识引用的部分，我们还可以用id来引用，具体可以参考文档。

有时候我们可能希望在引用的时候传递参数，我们可以在引用时加上这样的参数:

1
2

<!--index.html-->
<div th:include="footer :: copy" th:with="param=${value}" >index</div>

这样我们就可以把index页面的value变量传递到footer页面里。非常简单。

引用js的坑

有时候我们想用js变量来保存模板传递的参数，我们可以这样来引用:

1
2
3
4
5
6
7

<script th:inline="javascript">
/*<![CDATA[*/
    ...
    var username = /*[[${session.user.name}]]*/ 'Sebastian';
    ...
/*]]>*/
</script>

注意，这是官方推荐的写法，注意以下几点。

• 我们要用inline来指定这个script标签;
• 我们需要注释<![CDATA[,]]>对，否则就会无法在js中使用比较符号;
• 我们要用[[${value}]]来引用模板变量;
• 我们要在变量外面也套上注释\**\，并在后面添加上默认的值，这是为了前端开发人员能在没有后台的情况下正常渲染。

最后

当前我遇到的基本上靠上面的知识都足以解决了，更多高级用法可以直接读文档，到时候用到再来添加0.0。

拦截器

我们知道做Web开发最知名的一个编程思路叫AOP–面向切面的编程。第一次接触到这个名词以为是跟面向对象编程一样是套很复杂的流程。然而实际接触下来才发现，这其实是一个非常简单的思想，能够解决非常现实的问题，比如登录问题。

我们知道很多网站在访问时是需要登录的，也就是说服务器在处理每一个访问之前，必须都要做一件事情，就是登录用户的身份确认。我们很容易想到一个解决方法，就是定义一个类，专门处理这个登录问题。但是这也是比较麻烦的事情，在每一个请求处理前都要写一些一模一样的代码来调用这个类，显然维护起来比较难受。那怎么办呢？这时候我们很容易想到在Web请求处理的生命周期里横插一刀，在对请求进行处理之前统一加上一个函数，做一些必须做的事情。那么这个函数就叫做切面，这个方法就叫做面向切面的编程。

不过事实上，切面也分种类，我们可以在通过请求的URL来进行过滤，也可以指定Controller的名字来进行过滤。有时候我们会通过Controller的名字来进行拦截，不过这需要添加一些额外的包，比如spring-boot-starter-aop。通常情况下我们使用的是对URL进行过滤，这就要用到我们SpringBoot自带的Interceptor机制了。

定义拦截器

为了定义一个拦截器，我们只需要定义一个Component，让他实现HandlerInterceptor接口：

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

@Component
public class AppInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
    }
    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
    }
    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
    }
}

事实上，HandlerInterceptor这个接口有三个重载方法，我们可以打开源码来看看:

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

public interface HandlerInterceptor {
	/**
	 * Intercept the execution of a handler. Called after HandlerMapping determined
	 * an appropriate handler object, but before HandlerAdapter invokes the handler.
	 * <p>DispatcherServlet processes a handler in an execution chain, consisting
	 * of any number of interceptors, with the handler itself at the end.
	 * With this method, each interceptor can decide to abort the execution chain,
	 * typically sending a HTTP error or writing a custom response.
	 * <p><strong>Note:</strong> special considerations apply for asynchronous
	 * request processing. For more details see
	 * {@link org.springframework.web.servlet.AsyncHandlerInterceptor}.
	 * @param request current HTTP request
	 * @param response current HTTP response
	 * @param handler chosen handler to execute, for type and/or instance evaluation
	 * @return {@code true} if the execution chain should proceed with the
	 * next interceptor or the handler itself. Else, DispatcherServlet assumes
	 * that this interceptor has already dealt with the response itself.
	 * @throws Exception in case of errors
	 */
	boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception;
	/**
	 * Intercept the execution of a handler. Called after HandlerAdapter actually
	 * invoked the handler, but before the DispatcherServlet renders the view.
	 * Can expose additional model objects to the view via the given ModelAndView.
	 * <p>DispatcherServlet processes a handler in an execution chain, consisting
	 * of any number of interceptors, with the handler itself at the end.
	 * With this method, each interceptor can post-process an execution,
	 * getting applied in inverse order of the execution chain.
	 * <p><strong>Note:</strong> special considerations apply for asynchronous
	 * request processing. For more details see
	 * {@link org.springframework.web.servlet.AsyncHandlerInterceptor}.
	 * @param request current HTTP request
	 * @param response current HTTP response
	 * @param handler handler (or {@link HandlerMethod}) that started asynchronous
	 * execution, for type and/or instance examination
	 * @param modelAndView the {@code ModelAndView} that the handler returned
	 * (can also be {@code null})
	 * @throws Exception in case of errors
	 */
	void postHandle(
			HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView)
			throws Exception;
	/**
	 * Callback after completion of request processing, that is, after rendering
	 * the view. Will be called on any outcome of handler execution, thus allows
	 * for proper resource cleanup.
	 * <p>Note: Will only be called if this interceptor's {@code preHandle}
	 * method has successfully completed and returned {@code true}!
	 * <p>As with the {@code postHandle} method, the method will be invoked on each
	 * interceptor in the chain in reverse order, so the first interceptor will be
	 * the last to be invoked.
	 * <p><strong>Note:</strong> special considerations apply for asynchronous
	 * request processing. For more details see
	 * {@link org.springframework.web.servlet.AsyncHandlerInterceptor}.
	 * @param request current HTTP request
	 * @param response current HTTP response
	 * @param handler handler (or {@link HandlerMethod}) that started asynchronous
	 * execution, for type and/or instance examination
	 * @param ex exception thrown on handler execution, if any
	 * @throws Exception in case of errors
	 */
	void afterCompletion(
			HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
			throws Exception;
}

这三个函数就像三把刀，横着插进了服务端接受并处理请求的整个生命周期。

preHandle

preHandle作用的地方是请求已经被RequestMapping分配到了不同的Controller里，但是还并未被Controller进行处理。
如果我们的目的是对登陆进行验证的话，那么这里就是我们主要的工作地点了。在这个过程里，我们可以验证用户的Cookie：

• 如果成功，则可以记录下当前User的信息，并且将这个信息保存到一个ThreadLocal的UserComponent里，方便以后的调用，并且将请求放行。
• 如果失败，则可以将请求通过response的sendRedirect函数重定向到登陆页面。
  这里的返回值就是是否放行，如果不放行，那么客户端就收不到任何消息。显然我们一般都会放行。

postHandle

postHandle作用的地方是请求已经被Controller处理了，但是还并未传递到网页模板进行渲染。因此我们可以看到postHandle的参数比preHandle多了一个ModelAndView这个参数。这个参数其实就包括了Controller处理后需要传递给模板的那个Model参数。
如果我们的目的是将拦截器得到的User信息统一渲染到模板上，那么我们只要在这个步骤做这件事就不会错了:

1
2
3
4
5
6

@Override
public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
    if (modelAndView != null) {
        modelAndView.addObject("user", userComponent.getUser());
    }
}

afterCompletion

afterCompletion显然就是处理一些收尾工作了，他作用的地方就是在页面被渲染之后即将返回给用户的时候。这里通常是清除一些局部变量，比如清除掉在前面保存的ThreadLocal的本地信息:

1
2
3
4

@Override
public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
    userComponent.clear();
}

配置拦截器

当然，上面写了半天代码，我们并没有定义我们的拦截器的拦截规则，也没有在SpringBoot里做任何配置。下面我们就来进行相应的配置。
我们需要新建一个继承了WebMvcConfigurerAdapter的配置类，或者在原有配置类上进行修改。

1
2
3
4
5
6
7
8
9
10
11

@Component
public class AppWebConfiguration extends WebMvcConfigurerAdapter {
    @Autowired
    AppInterceptor appInterceptor;
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(appInterceptor).addPathPatterns("/app/**");
        super.addInterceptors(registry);
    }
}

这个WebMvcConfigurerAdapter管理了很多的配置信息，就包括了拦截器的配置。
我们需要做的就是在这里通过依赖注入导入我们想注册的拦截器，然后通过重写addInterceptors方法来进行配置。
如果需要对拦截器进行过滤，我们只需要对addInterceptors返回的InterceptorRegistration对象进行处理。
这个InterceptorRegistration对象通常有两个方法addPathPatterns和excludePathPatterns，并且支持链式调用。
显然，这两个函数应该会接受一个用来进行匹配的字符串，跟普通的正则匹配的规则不同，这类规则我们通常称为Ant path style。

Ant Path Style

这个规范的设计在org.springframework.util.AntPathMatcher里，基本上包括了下面的规则：

1
2
3
4

? matches one character
* matches zero or more characters
** matches zero or more directories in a path
{spring:[a-z]+} matches the regexp [a-z]+ as a path variable named "spring"

具体可以参照下面的例子：

1
2
3
4
5
6

com/t?st.jsp — matches com/test.jsp but also com/tast.jsp or com/txst.jsp
com/*.jsp — matches all .jsp files in the com directory
com/**/test.jsp — matches all test.jsp files underneath the com path
org/springframework/**/*.jsp — matches all .jsp files underneath the org/springframework path
org/**/servlet/bla.jsp — matches org/springframework/servlet/bla.jsp but also org/springframework/testing/servlet/bla.jsp and org/servlet/bla.jsp
com/{filename:\\w+}.jsp will match com/test.jsp and assign the value test to the filename variable

最后

通过上述步骤，我们就成功配置了一个拦截器。

参考资料

learning-ant-path-style
Spring doc–AntPathMatcher

任务需求

最近在用SpringBoot写一个关于定时项目的时候遇到一个问题，就是客户端访问服务器的结果实际上是每个一段时间发生一次变化，并且在服务器在每天的某个固定的时间点都要触发一次事件。
我们当然可以在遇到每一个请求时都重新计算结果，但是为了提高效率，我们显然可以让服务器每隔一段时间计算一次结果，并且把这个结果进行保存，对在下一个时间段内的每个请求都直接返回计算后的结果。这样就能较好的提高了服务器的性能。
那么问题就在于如何处理定时任务。其实SpringBoot早就提供了非常方便的接口，但是网上的介绍还是有点乱的，我就记录下具体操作的注意点方便以后查找。

创建定时服务

一般来说定时服务会写在一个Component里，方便管理。对于定时任务，我们其实只要在需要定时执行的函数前加上@Scheduled注解，比如下面这样:

1
2
3
4
5
6
7
8

@Component
public class ScheduledTask {
    @Scheduled(fixedRate = 5000)
    public void scheduledTask() {
        //do sth...
    }
}

与此同时，我们还要在项目的启动文件里配置上@EnableScheduling注解，告诉项目我们是支持定时任务的:

1
2
3
4
5
6
7
8

@SpringBootApplication
@EnableScheduling
public class LotteryApplication {
	public static void main(String[] args) {
		SpringApplication.run(LotteryApplication.class, args);
	}
}

这样我们的函数就能定时执行了。

Scheduled参数

Scheduled主要支持fixRate,fixDelay,cron,initialDelay这些参数，下面做简要说明。

fixRate和fixDelay

fixRate和fixDelay参数都指定了函数每隔某个毫秒数执行一次，但是他们之间也有细小的差别。
fixRate
fixRate的计时是相对于系统时间的，也就是一定相隔会固定时间执行。
fixDelay
fixDelay的计时是相对于上一次调用的时间的，因此他受其他程序调用的影响，如果该函数在其他地方被手动调用，那么这个计时器就会重新计时。

initialDelay参数

initialDelay参数是个额外参数，比较简单，就是指定从项目开始运行到该函数首次被调用的执行时间，以毫秒计。
如果不指定这个参数，这个值就是-1，也就是程序开始时不执行。
在不知到initialDelay这个参数的时候为了让程序启动时立即调用该函数，我让这个定时类继承了InitializingBean并在重写的afterPropertiesSet方法中手动调用了这个函数。。。现在看起来还真是愚蠢。。。

cron

这个Cron是最复杂也是高度自定义化的定时工具，在Linux系统里也有类似的crontab命令。他其实是更加细致的定义了定时任务，以一个字符串的形式进行表示。
在SpringBoot中，一个cron字符串是由六个部分以空格组成的字符串，文档中的例子是这样的：

1
2
3
4
5
6
7

"0 0 * * * *" = the top of every hour of every day.
"*/10 * * * * *" = every ten seconds.
"0 0 8-10 * * *" = 8, 9 and 10 o'clock of every day.
"0 0 6,19 * * *" = 6:00 AM and 7:00 PM every day.
"0 0/30 8-10 * * *" = 8:00, 8:30, 9:00, 9:30, 10:00 and 10:30 every day.
"0 0 9-17 * * MON-FRI" = on the hour nine-to-five weekdays
"0 0 0 25 12 ?" = every Christmas Day at midnight

六个部分分别表示秒、分、时、日、月、周。
他支持’-‘表示范围，’*’表示通配，’/‘表示在左边的时间匹配后间隔右边的时间，’?’一般表示周的通配。
具体的使用方法还要参考相关文档。
网上有很多类似Cron表达式测试工具这样的测试工具，方便我们测试自己写的Cron表达式。
下面一个例子表示每隔五分钟执行一次:

1
2
3
4

@Scheduled(cron = "0 0/5 * * * ?")
public void fiveMinutes() {
    //do sth.
}

注意点

在实际使用Scheduled注解时，我们一定要指定且仅仅指定fixRate、fixDelay、cron当中的一个，否则肯定会导致错误。当然，我们可以任意指定initialDelay参数。

参考资料

SpringBoot Guides
Spring CronSequenceGenerator
Cron expression
Cron表达式详解

命令行测试运行

有些时候我们需要将项目部署在服务器上进行简单测试，但是直接部署到Tomcat里又十分慢，这时候我们可以用maven工具的一个命令来模拟本地启动项目:

1

./mvnw spring-boot:run

这里用到了一个叫spring-boot-starter-parent的包，只要pom.xml里加了这个就能执行。
这样我们就可以在服务器的8080端口访问到这个临时的项目。

简单部署

通常情况下，我们会把SpringBoot生成的项目打包成war放在Tomcat服务器中运行，不过这当中也有一些需要注意的地方，下面就简单罗列一下，作为总结。

修改项目配置

参考SpringBoot的一篇文档Traditional deployment。为了能让项目支持在Tomcat中启动，我们首先要修改一下启动配置。
修改项目中的XXXApplication.java这个启动文件，使他继承SpringBootServletInitializer，并重载configure方法:

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

@SpringBootApplication
public class OnlineLibraryApplication extends SpringBootServletInitializer {
	@Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
		return builder.sources(OnlineLibraryApplication.class);
	}
	public static void main(String[] args) {
		SpringApplication.run(OnlineLibraryApplication.class, args);
	}
}

这样这样就可以让项目在Tomcat中启动了。

修改导出的包类型

由于默认使用的包管理工具是maven，我们要修改下pom.xml中的导出方式，在该文件的开头将packaging标签修改为war。

1

<packaging>war</packaging>

运行Maven命令导出包

为了保证项目能够在服务器中运行，最好将编译的过程放在服务器上，这样可以提早发现服务器版本落后的等的问题。因为很多情况下，Java Tomcat版本落后会导致很多奇怪的问题，有时候还不容易发现。
在项目根目录中有一个mvnw文件，我们通过下面命令执行他：

1

./mvnw clean package

这样，程序就会编译并且测试这个项目，以保证该项目能够在当前环境中运行。
编译并测试通过后，会在项目的target/文件夹下生成一个war包，我们把这个包放到Tomcat的webapps目录下并且重启项目，稍等片刻后即可在8080端口下与项目名相对应的路径中访问到该项目。

配置反向代理

上面的项目在很多情况下会加载不了静态文件，因为项目中访问静态文件通常是直接在xxx.xxx.xxx/css之类的路径中，而Tomcat简单部署后项目的根路径会变成xxx.xxx.xxx/projectName/，这样实际的静态文件路径就是xxx.xxx.xxx/projectName/css/，显然就会找不到了。
当然，我们可以配置Tomcat将项目映射到/下，但是为了保证项目的并发性更好，我们一般都采用nginx进行反向代理。

一般在/etc/nginx/sites-enabled/default文件中，修改出一个类似下面的配置:

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

server {
    listen 80;
    server_name 127.0.0.1:8080;
    location / {
        proxy_pass  http://127.0.0.1:8080/projectName/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
   }
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 8k;
    gzip_http_version 1.1;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml image/png image/jpeg;
}

主要就是添加一个反向代理并开启Gzip加速。
很多情况下对服务性能的提高还是非常有帮助的，尤其是Gzip，如果发现某些mime-type没有加速可以把这个类型添加到gzip_types中。

查看Log日志

很多情况下，我们会在程序里打上Log，那么在Tomcat里这些Log都写在了哪里呢？
这个主要是Tomcat的设置了，在Tomcat的logs文件夹下有很多log文件，主要是下面三类:

项目启动类日志

这类日志一般名字会类似catalina.2017-05-19.log这样。
这些日志主要记录了项目启动以及关闭时可能报的错，主要是Tomcat在启动服务的时候写的。

Web访问类日志

这类日志一般名字会类似localhost_access_log.2017-05-19.txt这样。
这些日志主要记录了每一个Web访问的历史，跟Apache的日志类似：

1
2
3

127.0.0.1 - - [19/May/2017:15:03:28 +0800] "GET /onlinelibrary-0.0.1-SNAPSHOT/js/swiper.min.js HTTP/1.1" 200 96826
127.0.0.1 - - [19/May/2017:15:03:28 +0800] "GET /onlinelibrary-0.0.1-SNAPSHOT/images/pic1.jpg HTTP/1.1" 200 123242
127.0.0.1 - - [19/May/2017:15:03:28 +0800] "GET /onlinelibrary-0.0.1-SNAPSHOT/images/pic2.jpg HTTP/1.1" 200 24962

SpringBoot日志

这类日志一般名字会类似catalina.out这样。
这些日志主要记录了SpringBoot的启动日志，以及程序员在程序中写的logger的日志，方便我们进行监控。

Controller

Controller是SpringBoot里最基本的组件，他的作用是把用户提交来的请求通过对URL的匹配，分配给不同的接收器，再进行处理，然后向用户返回结果。他的重点就在于如何从HTTP请求中获得信息，提取参数，并分发给不同的处理服务。

基本组成

一个最经典的Controller应该大概长这样:

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

package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
 * Created by myths on 5/16/17.
 */
@Controller
public class IndexController {
    @RequestMapping(value = {"index", "/"})
    public String index(Model model) {
        return "index";
    }
}

首先应该在类的开头，加上@Controller注解，告知Spring这是一个控制器。
然后在对应的处理函数前面加上@RequestMapping，告知这个函数需要相应的URL。
接着这个函数传入了一个Model类型的参数，这个参数主要是用于向模板传递数据。
该函数最后返回了一个叫”index”的字符串，表示将调用名为”index”的模板，具体名称取决于模板引擎，比如对于jsp他将访问”index.jsp”这个文件,对于thymeleaf，他将访问”index.html”这个文件。

上面的是最简单的用法，实际上有很多细节需要注意，下面就来一一解释。

ResponseBody

如果我们想返回纯字符串而不是渲染后的模板，那我们可以在需要返回字符串的函数前面加上@ResponseBody这个注解；
如果我们像对于整个类都返回字符串，我们也可以在这个类前面加上@ResponseBody注解，或者将@Controller注解换成@RestController，均可。

RequestMapping

基本用法

这个注解是用来告诉Spring，下面的这个函数或者类是用来映射到那个URL的，通常情况下有下面这些选项：

1
2
3
4
5
6
7
8

@RequestMapping(
        path = {"/test"},
        params = {"name","userId"},
        method = {RequestMethod.GET},
        consumes = {"text/plain", "application/*"},
        produces = "text/plain",
        headers = "content-type=text/*"
)

我们可以指定这个路径，参数，方法，头信息，来作为一个Controller的入口。当然，通常我们只需要指定path就行了。

作用对象

这个注解可以注解一个函数，也可以注解一个类。当注解一个类时，类中所有的方法都会在这个基础上再进行过滤：

1
2
3
4
5
6
7
8
9

@Controller
@RequestMapping("/path1")
public class TestController {
    @RequestMapping("/path2")
    @ResponseBody
    public String index() {
        return "ok";
    }
}

这个函数就能匹配”/path1/path1”这个地址。

缺省参数

当RequestMapping的参数是空的时候，他就表示匹配剩余所有的页面,实际上也就是匹配所有的404页面。

1
2
3
4
5
6
7

@Controller
public class IndexController {
    @RequestMapping
    public String index(Model model) {
        return "index";
    }
}

当RequestMapping不指定参数名时，默认就是path参数。

1
2
3
4
5
6
7

@Controller
public class IndexController {
    @RequestMapping("/index")
    public String index(Model model) {
        return "index";
    }
}

PathVariable

RequestMapping中的path也可以是一个未定的变量，比如下面的代码:

1
2
3
4
5
6
7
8

@Controller
public class TestController {
    @RequestMapping("/{variable}")
    @ResponseBody
    public String index(@PathVariable("variable")String variable) {
        return variable;
    }
}

通过花括号我们就可以指定这个变量，并且通过@PathVariable注解得到这个参数，非常方便。

RequestParam

RequestMapping也可以获取类似表单传回的信息形式，比如/index?name=XXX，这个name变量就可以通过RequestParam注解来获得:

1
2
3
4
5
6
7
8

@Controller
public class TestController {
    @RequestMapping("/index")
    @ResponseBody
    public String index(@RequestParam(value = "name",required = false,defaultValue = "233")String name) {
        return name;
    }
}

我们可以控制这个参数的名字，是否必须，以及设置默认值，来更好的进行匹配。

RequestBody

RequestBody用来获取Post信息的消息体,只要在参数中通过@RequestBody注解就能得到这个参数:

1
2
3
4
5
6
7
8
9

@Controller
public class TestController {
    @RequestMapping("/index")
    @ResponseBody
    public String index(@RequestBody String body) {
		//对body进行解析即可
        return "success";
    }
}

总结

上面这些大概就是Controller中最基本的用法了，十分的方便清楚。具体的细节可以参考源码中的注释，解释的也是十分详尽了。

前言

就个人而言，我曾经比较畏惧JAVA，我们都知道JAVA这个东西是相当成熟了，各种框架特别复杂，名词也特别的多。我还记得我第一次想学struts的时候折腾了半天硬是没有找到头绪，面对各种眼花缭乱的包、眼花缭乱的配置文件、眼花缭乱的框架版本、眼花缭乱的报错信息，还有眼花缭乱的各种名词，硬是停留在了servlet的层面上，完全失去了在短时间内学下去的动力。因此很久都没有碰过JAVA。不过一个机缘巧合，我突然发现其实这些东西都是很有套路的，每一个东西其实都是为了解决某一个小问题，只是刚入门的时候面对庞大的体系一下子懵了。而且，在JAVA发展到当今的程度，之前冗杂的事情也被简化了很多，框架的封装度更加的高，我们学起来也轻松很多了。

SpringBoot

Springboot就是当前火热起来的用于JAVA Web开发的微框架，配置十分方便，结合Intellij IDEA用起来十分的顺手，非常适合快速上手。同时他的文档也清楚,官方文档里写的也很细致。

快速上手

曾经最烦人的配置问题在这里都不是问题，当我们需要创建项目的时候，可以去start.spring.io上选择相应的配置，下载一个空的项目包，然后用IDE打开即可。

通常情况下，除了指定包信息以及各种版本信息之外，我们在开发Springboot的时候一般会加上下面的依赖：

• Thymeleaf
• AOP
• MySQL
• MyBatis
• Redis
• DevTools

Thymeleaf是SpringBoot1.5版本后推荐的模板引擎，取代了曾经的velocity以及更加古老的jsp，左右后台渲染前台页面的控制器；
AOP则是对面向切面编程思想的支持，他给我们提供了面向切面编程的接口；
MySQL则是非常主流的数据库驱动；
Mybatis则为我们在数据库与函数之间建立了一个DAO(Data Access Object)层，方便我们不用写jdbc的代码就能访问数据；
Redis则是非常流行的NOSQL数据库，适合对一些数据做缓存处理以及快速的读取写入；
DevTools则提供了很多方便我们编程的特性，让IDE反应更快。。。

事实上这个网站做的事情也很简单，就是构建了下面的文件结构:

├── mvnw
├── mvnw.cmd
├── pom.xml
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── example
    │   │           └── demo
    │   │               └── DemoApplication.java
    │   └── resources
    │       ├── application.properties
    │       ├── static
    │       └── templates
    └── test
        └── java
            └── com
                └── example
                    └── demo
                        └── DemoApplicationTests.java

说白了其实就是配置了maven的包管理系统，以及推荐的文件结构，仅此而已。

什么是maven

maven其实就是一个包管理工具，就像是python的pip，ubuntu的apt,js的npm，在www.maven.org里集成了绝大多数大家常用的包信息，类似于webservice的注册中心。maven将本项目所有的包依赖全都写进了pom.xml文件中，免得我们一个一个下载再一个一个放进build path里，免去了很多的麻烦。
上面的配置形成的pom.xml如下:

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

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.example</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.3.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-redis</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.3.0</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
        </build>
</project>

如果我们想重新加入一个包，只要在maven的管理中心找到这个包的groupId以及artifactId然后写在这里的dependency里就行了。最后利用IDE提供的自动导入maven包即可。

配置文件

相比于曾经写项目每个组件都有一个xml配置文件，SpringBoot都帮我们封装成了一个统一的配置文件application.properties，比如在某一个项目中我的配置是这样的:

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

#tomcat start
server.compression.enabled=true
#tomcat end
#redis start
spring.redis.database=0
spring.redis.host=localhost
spring.redis.port=6379
#redis end
#multipart start
spring.http.multipart.enabled=true
spring.http.multipart.max-file-size=10MB
spring.http.multipart.max-request-size=10MB
#multipart end
#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=true
#thymeleaf end
#mysql start
spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=123456
#mysql start
#mybatis start
mybatis.configuration.cache-enabled=true
mybatis.configuration.lazy-loading-enabled=true
mybatis.configuration.multipleResultSetsEnabled=true
#mybatis end

这其实就是对传统的配置方法做了一层封装，使得项目更加简洁清楚，所有的配置项也都能由IDE自动补全，不要太爽。

最后

由于这个框架比较新，因此很多组建都需要java8的支持，并且如果以后发布到服务器上，也需要Tomcat8的支持，这一点需要尤其的注意。

右值引用

分类

在古老的标准里，C++中的变量分为左值(lvalue)与右值(rvalue)这两种，左值就是能够用&获得地址的值，可以对他进行修改，右值就是不能用&获得地址的值，通常只是临时变量，不能进行修改。而在C++11中，变量不再仅仅分为左值与右值了，他引入了另一种值叫将亡值(expire value,xvalue)。从此，变量类型分为了三种:

• lvalue :left value 就是传统意义上的左值
• xvalue :expire value 就是将亡值
• prvalue :pure right value 就是传统意义上的右值

而且，xvalue+prvalue又称为rvalue，lvalue+xvalue又称为glvalue。

定义

那么什么是xvalue呢，什么又是右值引用呢？
xvalue其实就是对右值的引用：

1

int &&x=10;

这个x跟传统的左值引用肯定是不一样的，毕竟左值引用是不能引用右值的。
这个x跟左值变量也是不一样的，虽然看上去没啥区别，但是实际上这个x并没有进行构造，而是像左值引用一样，对右值10进行了引用，使得这个右值的内存不被立即释放。这样我们就可以像使用左值一样的使用这个右值了。
那么现在就应该清楚了，右值引用就是通过对右值进行引用使得我们能够保存这个右值的生命周期，并像使用左值一样的使用右值的方法。（自己的定义）

用途

这么费劲心机定义一个右值引用有啥意义呢？其实主要是为了提高变量传递的效率。虽然很多情况下，我们的编译器会做一些优化，但是不同编译器不同，因此下面基于g++的测试我开启了-fno-elide-constructors参数防止其优化。
比如下面的这个过程:

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

#include<iostream>
class Test{
public:
    Test(){
        std::cout<<"construct"<<std::endl;
    }
    Test(const Test &test){
        std::cout<<"copy"<<std::endl;
    }
    ~Test(){
        std::cout<<"destroy"<<std::endl;
    }
};
int main(){
    Test t=Test();
}

看上去没什么额外开销，而事实上，这个过程的执行结果是：

1
2
3
4

construct
copy
destroy
destroy

也就是说他执行了一次构造，一次拷贝构造。而事实上，这个拷贝构造是浪费额外开销的，而且这个拷贝其实是对一个右值的拷贝，在拷贝后这个右值就被析构了，我们完全可以不执行析构而让新的值就用这个右值的引用。
旧的做法是使用常量引用来做这件事:

1
2
3

int main(){
    const Test& t=Test();
}

这避免了额外的拷贝，但是后果是这个值只能是常量，无法被修改。
如果使用了右值引用，那么这个问题就简单多了:

1
2
3

int main(){
    Test&& t=Test();
}

结果：

1
2

construct
destroy

这个右值引用既没有对结果进行拷贝，也能够让我们像使用一个左值一样的使用他。

移动拷贝构造

为什么引入移动拷贝构造，这是因为我们考虑到了以下问题：
我们知道，构造函数分为深拷贝和浅拷贝，默认的是浅拷贝，浅拷贝导致的结果就是拷贝出来的对象跟拷贝前的对象拥有相同的堆内元素，如果我们析构了拷贝前的对象，那么拷贝后的对象就无法使用了，因此浅拷贝不适合做赋值的移动操作；而深拷贝呢，又太浪费空间了，完全没有必要生成一个一模一样的对象然后把原先的再删除。因此就引入了拷贝构造这个东西。
比如下面的例子：

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

class Test{
private:
    int *ptr;
public:
    Test():ptr(new int(0)){
        std::cout<<"construct"<<std::endl;
    }
    Test(const Test &test):ptr(new int(*test.ptr)){
        std::cout<<"copy"<<std::endl;
    }
    Test(Test &&test):ptr(test.ptr){
        test.ptr=nullptr;
        std::cout<<"move"<<std::endl;
    }
    ~Test(){
        delete ptr;
        std::cout<<"destroy"<<std::endl;
    }
};
int main(){
    Test t=Test();
}

结果：

1
2
3
4

construct
move
destroy
destroy

移动构造的参数就是一个右值引用，他做的事是将移动源的所有堆内元素指针断开，并连上移动目的地的指针。这样移动源就可以安心的析构而不影响移动目的地的堆内元素。同时也省去了不必要的拷贝开销，效率非常的高。

std::move

移动构造有一个问题，就是他的参数必须是右值，这就带来一个问题，如果上面的main函数变成这样:

1
2
3
4

int main(){
    Test t1;
    Test t2=t1;
}

结果：

1
2
3
4

construct
copy
destroy
destroy

由于t1是个左值，那么他会去执行拷贝构造而不会执行移动构造，这显然不是我们像看到的。
为了使左值的移动能够使用移动构造，我们就有了std::move这个东西，他的作用很简单，就是把左值变成右值引用。

1
2
3
4

int main(){
    Test t1;
    Test t2=std::move(t1);
}

结果：

1
2
3
4

construct
move
destroy
destroy

如我所愿。
注意一点就是在使用std::move()之后的对象t1这时候的堆内元素就已经无效了。

std::move()这么好用，显然c++中的模板都支持这个move语义。

std::emplace_back

我们知道了对象的构造，拷贝、移动都是要付出一些代价的，那我们很容易就会想到，当我们使用容器的时候，如果使用拷贝构造，显然效率很低；如果使用移动构造，那么还是会有一些移动的开销，需要执行移动构造函数，能不能有一种方法，直接在容器里执行构造函数，这样就既不用拷贝，也不用移动了呢？答案是当然有，这就是std::emplace_back方法。我们可以比较下面的三种方法：

拷贝插入

1
2
3
4
5

int main(){
    std::vector<Test>v;
    Test t;
    v.push_back(t);
}

输出：

1
2
3
4

construct
copy
destroy
destroy

移动插入

1
2
3
4

int main(){
    std::vector<Test>v;
    v.push_back(Test());
}

输出：

1
2
3
4

construct
move
destroy
destroy

emplace_back

1
2
3
4

int main(){
    std::vector<Test>v;
    v.emplace_back();
}

输出：

1
2

construct
destroy

显然，这个emplace_back的效率是最高的。

参考资料

深入应用c++11