Cesium的小部件animation和timeline显示UTC系统时间，需要将其改为本地系统时间。修改方法如下：

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

this.viewer.animation.viewModel.dateFormatter = localeDateTimeFormatter
this.viewer.animation.viewModel.timeFormatter = localeTimeFormatter
this.viewer.timeline.makeLabel = function (time) { return localeDateTimeFormatter(time) }

// Date formatting to a global form
function localeDateTimeFormatter(datetime, viewModel, ignoredate) {
    var julianDT = new Cesium.JulianDate(); 
    Cesium.JulianDate.addHours(datetime,8,julianDT)
    var gregorianDT= Cesium.JulianDate.toGregorianDate(julianDT)
    var objDT;
    if (ignoredate)
        objDT = '';
    else {
        objDT = new Date(gregorianDT.year, gregorianDT.month - 1, gregorianDT.day);
        objDT = gregorianDT.year  + '年' +objDT.toLocaleString("zh-cn", { month: "short" })+ gregorianDT.day + '日' ;
        if (viewModel || gregorianDT.hour + gregorianDT.minute === 0)
        return objDT;
        objDT += ' ';
    }
    return objDT + Cesium.sprintf("%02d:%02d:%02d", gregorianDT.hour, gregorianDT.minute, gregorianDT.second);
}

function localeTimeFormatter(time, viewModel) {
    return localeDateTimeFormatter(time, viewModel, true);
}

上述代码还存在一个问题，当timeline小部件不活动时，其仍然显示UTC标准系统时间。

Cesium的credit十分碍眼，采用如下方法去掉：

1
2

//去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";

参考链接

1. EST，CST，PST，GMT，UTC，EDT等等时间缩写, by chienchia.
2. Change UTC timezone to SGT timezone in Cesiumjs, by stackoverflow.
3. Cesium去掉logo,by 跃然实验室.

股票分析离不开各种图表的绘制，尤其是最常用的蜡烛图。下面介绍python中使用matplotlib绘制蜡烛图的过程。

环境及配置

使用的环境如下：

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

$ python3 --version
Python 3.6.5rc1
$ ipython3
In [1]: import matplotlib
In [2]: matplotlib.__version__
Out[2]: '2.2.2'
In [3]: import tushare as ts
In [4]: ts.__version__
Out[4]: '1.1.9'
In [5]: import talib
In [6]: talib.__version__
Out[6]: '0.4.17'

绘制蜡烛图通常使用matplotlib.finance库，但这个库在matplotlib 2.0后已经被废弃，并被移到一个名叫mpl_finance的库中。可使用如下命令安装mpl_finance。

1

pip3 install https://github.com/matplotlib/mpl_finance/archive/master.zip

mpl_finance使用雅虎接口获取股票数据，但是不稳定，因此推荐使用tushare库获取股票数据。另外使用talib计算股票各种技术分析指标，例如常用的均线数据。需要注意的是通过pip3按照的talib库是对C/C++版talib的包装，因此需先安装C/C++版talib。

蜡烛图绘制

蜡烛图绘制函数简介

mpl_finance库中蜡烛图的绘制主要有以下四个函数：

1
2
3
4

candlestick2_ochl(ax, opens, closes, highs, lows, width=4, colorup='k', colordown='r', alpha=0.75)
candlestick2_ohlc(ax, opens, highs, lows, closes, width=4, colorup='k', colordown='r', alpha=0.75)
candlestick_ochl(ax, quotes, width=0.2, colorup='k', colordown='r', alpha=1.0)
candlestick_ohlc(ax, quotes, width=0.2, colorup='k', colordown='r', alpha=1.0)

在这四个函数的使用过程中需要注意的是：

• candlestick2_ohlc函数假定opens, highs, lows, closes中任意一个值不存在，则其他值也不存在。

• candlestick_ochl和candlestick_ohlc的输入参数quotes是(time, open, close, high, low, …)元组序列，其中time必须是浮点日期格式，具体参见date2num。

蜡烛图绘制函数存在日线图的时间间隔问题（非交易日无法跳过，导致图像断裂）。常用解决方法是建议重新调整横坐标，被动地过滤掉非交易时间段^[2]。例如：

1
2

ax.set_xticks(range(0, len(data['date']), 10))
ax.set_xticklabels(data['date'][::10])

蜡烛图的简单绘制

蜡烛图的简单例子如下：

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

import numpy as np
import talib
import tushare as ts
import matplotlib.pyplot as plt
import mpl_finance as mpf
 
data = ts.get_k_data('002320')
sma_10 = talib.SMA(np.array(data['close']), 10)
sma_30 = talib.SMA(np.array(data['close']), 30)
fig = plt.figure(figsize=(24, 8))
ax = fig.add_subplot(1, 1, 1)
ax.set_xticks(range(0, len(data['date']), 50))
ax.set_xticklabels(data['date'][::50])
ax.plot(sma_10, label='10 日均线')
ax.plot(sma_30, label='30 日均线')
ax.legend(loc='upper left')
mpf.candlestick2_ochl(ax, data['open'], data['close'], data['high'], data['low'],width=0.5, colorup='r', colordown='green',alpha=0.6)
plt.grid()
plt.show()

参考链接

1. finance api, by matplotlib

matplotlib 是Python编程语言及其数值数学扩展包 NumPy的可视化操作界面。它为利用通用的图形用户界面工具包，如Tkinter, wxPython, Qt或GTK+向应用程序嵌入式绘图提供了应用程序接口（API）。此外，matplotlib还有一个基于图像处理库（如开放图形库OpenGL）的pylab接口，其设计与MATLAB非常类似–尽管并不怎么好用。SciPy就是用matplotlib进行图形绘制。

绘图结构

matplotlib API包含有三层：

• backend_bases.FigureCanvas : 图表的绘制领域
• backend_bases.Renderer : 知道如何在FigureCanvas上如何绘图
• artist.Artist : 知道如何使用Renderer在FigureCanvas上绘图

FigureCanvas和Renderer需要处理底层的绘图操作，例如使用wxPython在界面上绘图，或者使用PostScript绘制PDF。Artist则处理所有的高层结构，例如处理图表、文字和曲线等的绘制和布局。通常我们只和Artist打交道，而不需要关心底层的绘制细节。

Artists分为简单类型和容器类型两种。简单类型的Artists为标准的绘图元件，例如Line2D、 Rectangle、 Text、AxesImage 等等。而容器类型则可以包含许多简单类型的Artists，使它们组织成一个整体，例如Axis、 Axes、Figure等。

基本用法

使用plt.figure定义一个图像窗口。

1
2
3
4
5
6
7

import matplotlib.pyplot as plt
import numpy as np
x = np.linspace(-1, 1, 50)
y = 2*x + 1
plt.figure() 
plt.plot(x, y)
plt.show()

设置标题

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

# 导入matplotlib库
import matplotlib
import matplotlib.pyplot as plt
# %matplotlib inline 显示图表
# 使用'ggplot'风格美化显示的图表
plt.style.use('ggplot') 

# 设置使用的字体（需要显示中文的时候使用）
font = {'family':'SimHei'} 
matplotlib.rc('font',**font)

# 当坐标轴有负号的时候可以显示负号
matplotlib.rcParams['axes.unicode_minus']=False 

# 设置标题
plt.title('正弦函数',fontsize=20) 设置子图表标题和标题字体的大小

设置坐标轴

使用plt.xlim设置x坐标轴范围：(-1, 2)； 使用plt.ylim设置y坐标轴范围：(-2, 3)；
使用plt.xlabel设置x坐标轴名称：’I am x’； 使用plt.ylabel设置y坐标轴名称：’I am y’；

1
2
3
4

plt.xlim((-1, 2))
plt.ylim((-2, 3))
plt.xlabel('I am x')
plt.ylabel('I am y')

使用np.linspace定义范围以及个数：范围是(-1,2);个数是5. 使用print打印出新定义的范围. 使用plt.xticks设置x轴刻度：范围是(-1,2);个数是5.

1
2
3

new_ticks = np.linspace(-1, 2, 5)
print(new_ticks)
plt.xticks(new_ticks)

使用plt.yticks设置y轴刻度以及名称：刻度为[-2, -1.8, -1, 1.22, 3]；对应刻度的名称为[‘really bad’,’bad’,’normal’,’good’, ‘really good’]. 使用plt.show显示图像.

1
2

plt.yticks([-2, -1.8, -1, 1.22, 3],[r'$really\ bad$', r'$bad$', r'$normal$', r'$good$', r'$really\ good$'])
plt.show()

使用plt.gca获取当前坐标轴信息. 使用.spines设置边框：右侧边框；使用.set_color设置边框颜色：默认白色； 使用.spines设置边框：上边框；使用.set_color设置边框颜色：默认白色；

1
2
3
4

ax = plt.gca()
ax.spines['right'].set_color('none')
ax.spines['top'].set_color('none')
plt.show()

调整坐标轴

使用.xaxis.set_ticks_position设置x坐标刻度数字或名称的位置：bottom.（所有位置：top，bottom，both，default，none）

1

ax.xaxis.set_ticks_position('bottom')

使用.spines设置边框：x轴；使用.set_position设置边框位置：y=0的位置；（位置所有属性：outward，axes，data）
使用.yaxis.set_ticks_position设置y坐标刻度数字或名称的位置：left.（所有位置：left，right，both，default，none）
使用.spines设置边框：y轴；使用.set_position设置边框位置：x=0的位置；（位置所有属性：outward，axes，data） 使用plt.show显示图像.

1
2
3
4

ax.spines['bottom'].set_position(('data', 0))
ax.yaxis.set_ticks_position('left')
ax.spines['left'].set_position(('data',0))
plt.show()

legend图例

基本用法

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

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(-3, 3, 50)
y1 = 2*x + 1
y2 = x**2

plt.figure()
#set x limits
plt.xlim((-1, 2))
plt.ylim((-2, 3))

# set new sticks
new_sticks = np.linspace(-1, 2, 5)
plt.xticks(new_sticks)
# set tick labels
plt.yticks([-2, -1.8, -1, 1.22, 3],
           [r'$really\ bad$', r'$bad$', r'$normal$', r'$good$', r'$really\ good$'])

# set line syles
l1, = plt.plot(x, y1, label='linear line')
l2, = plt.plot(x, y2, color='red', linewidth=1.0, linestyle='--', label='square line')

plt.legend(loc='upper right')

调整位置和名称

1

plt.legend(handles=[l1, l2], labels=['up', 'down'],  loc='best')

其中’loc’参数有多种，’best’表示自动分配最佳位置。

1
2
3
4
5
6
7
8
9
10
11

'best' : 0,          
'upper right'  : 1,
'upper left'   : 2,
'lower left'   : 3,
'lower right'  : 4,
'right'        : 5,
'center left'  : 6,
'center right' : 7,
'lower center' : 8,
'upper center' : 9,
'center'       : 10,

子图

使用plt.subplot来创建小图。 plt.subplot(2,2,1)表示将整个图像窗口分为2行2列, 当前位置为1。 使用plt.plot([0,1],[0,1])在第1个位置创建一个小图。

1
2
3
4

import matplotlib.pyplot as plt
fig=plt.figure()
ax = fig.add_subplot(2, 2, 1, projection='3d')
ax.plot([0,1,1],[0,1,1])

plt.subplot(222)表示将整个图像窗口分为2行2列, 当前位置为2. 使用plt.plot([0,1],[0,2])在第2个位置创建一个小图.

1
2

plt.subplot(222)
plt.plot([0,1],[0,2])

动画

Matplotlib使用FuncAnimation函数生成动画。参数说明：

• fig 进行动画绘制的figure
• func 自定义动画函数，即传入刚定义的函数animate
• frames 动画长度，一次循环包含的帧数
• init_func 自定义开始帧，即传入刚定义的函数init
• interval 更新频率，以ms计
• blit 选择更新所有点，还是仅更新产生变化的点。应选择True，但mac用户请选择False，否则无法显示动画

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

from matplotlib import pyplot as plt
from matplotlib import animation
import numpy as np

fig, ax = plt.subplots()

x = np.arange(0, 2*np.pi, 0.01)
line, = ax.plot(x, np.sin(x))

def animate(i):
    line.set_ydata(np.sin(x + i/10.0))
    return line,

def init():
    line.set_ydata(np.sin(x))
    return line,
//注意此处FuncAnimation必须有返回值
ani = animation.FuncAnimation(fig=fig,
                              func=animate,
                              frames=100,
                              init_func=init,
                              interval=20,
                              blit=False)

plt.show()

参考链接

1. matplotlib, by wikipedia
2. 莫烦Python, by morvanzhou
3. API Overview,by matplotlib.
4. Python matplotlib高级绘图详解,by 微岩.
5. 用Matplotlib制作动画,by 段丞博.
6. Plot inline or a separate window using Matplotlib in Spyder IDE,by stackoverflow.
7. Python之matplotlib的使用汇总,by 探索数据之美.

Python是一种广泛使用的高级编程语言，属于通用型编程语言，由吉多·范罗苏姆创造，第一版发布于1991年。可以视之为一种改良（加入一些其他编程语言的优点，如面向对象）的LISP。作为一种解释型语言，Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进划分代码块，而非使用大括号或者关键词）。相比于C++或Java，Python让开发者能够用更少的代码表达想法。不管是小型还是大型程序，该语言都试图让程序的结构清晰明了。

与Scheme、Ruby、Perl、Tcl等动态类型编程语言一样，Python拥有动态类型系统和垃圾回收功能，能够自动管理内存使用，并且支持多种编程范式，包括面向对象、命令式、函数式和过程式编程。其本身拥有一个巨大而广泛的标准库。

Python 解释器本身几乎可以在所有的操作系统中运行。Python的正式解释器CPython是用C语言编写的、是一个由社区驱动的自由软件，目前由Python软件基金会管理。

python3与python2区别

print函数

Python 2 的 print 声明在Python 3中已经被 print() 函数取代

1
2
3
4
5

#!/usr/bin/python2
print 'Hello, World!'

#!/usr/bin/python3
print('Hello, World!')

整除

/是精确除法，//是向下取整除法，%是求模。

//和%运算符在2和3版本中一样，但是运算符/不一样。

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

#!/usr/bin/python2
>>> 3 / 2
1
>>> 3 // 2
1
>>> 3 / 2.0
1.5
>>> 3 // 2.0
1.0

#!/usr/bin/python3
>>> 3 / 2
1.5
>>> 3 // 2
1
>>> 3 / 2.0
1.5
>>> 3 // 2.0
1.0

Unicode

由于历史遗留问题，Python 2.x版本虽然支持Unicode，但在语法上需要’xxx’和u’xxx’两种字符串表示方式。

在Python 3.x版本中，把’xxx’和u’xxx’统一成Unicode编码，即写不写前缀u都是一样的，而以字节形式表示的字符串则必须加上b前缀：b’xxx’。

1
2
3
4
5
6

#!/usr/bin/python2

#!/usr/bin/python3
>>> 中国 = 'china' 
>>> print(中国)
china

xrange模块

在 Python 2 中 xrange() 创建迭代对象的用法是非常流行的。比如： for 循环或者是列表/集合/字典推导式。

在 Python 3 中，range() 是像 xrange() 那样实现以至于一个专门的 xrange() 函数都不再存在（在 Python 3 中 xrange() 会抛出命名异常）。

不等运算符

Python 2.x中不等于有两种写法 != 和 <>

Python 3.x中去掉了<>, 只有!=一种写法

数据类型

• Py3.X去除了long类型，现在只有一种整型——int，但它的行为就像2.X版本的long
• 新增了bytes类型，对应于2.X版本的八位串
• dict的.keys()、.items 和.values()方法返回迭代器，而之前的iterkeys()等函数都被废弃。同时去掉的还有 dict.has_key()，用 in替代它吧 。

异常

• 在 Python 3 中处理异常也轻微的改变了，在 Python 3 中我们现在使用 as 作为关键词。
• 捕获异常的语法由 except exc, var 改为 except exc as var。
  使用语法except (exc1, exc2) as var可以同时捕获多种类别的异常。 Python 2.6已经支持这两种语法。

解析用户的输入

• 在python2.x中raw_input()和input()，两个函数都存在，其中区别为

  raw_input()—将所有输入作为字符串看待，返回字符串类型

  input()—–只能接收“数字”的输入，在对待纯数字输入时具有自己的特性，它返回所输入的数字的类型（int, float）

• 在python3.x中raw_input()和input()进行了整合，去除了raw_input()，仅保留了input()函数，其接收任意任性输入，将所有输入默认为字符串处理，并返回字符串类型。

返回可迭代对象，而不是列表

如果在 xrange 章节看到的，现在在 Python 3 中一些方法和函数返回迭代对象 — 代替 Python 2 中的列表。

因为我们通常那些遍历只有一次，我认为这个改变对节约内存很有意义。尽管如此，它也是可能的，相对于生成器 —- 如需要遍历多次。它是不那么高效的。

而对于那些情况下，我们真正需要的是列表对象，我们可以通过 list() 函数简单的把迭代对象转换成一个列表。

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

#!/usr/bin/python2
>>> print range(3) 
[0, 1, 2]
>>> print type(range(3))
<type 'list'>

#!/usr/bin/python3
>>> print(range(3))
range(0, 3)
>>> print(type(range(3)))
<class 'range'>
>>> print(list(range(3)))
[0, 1, 2]

For循环变量和全局命名空间泄漏

在 Python 3.x 中 for 循环变量不会再导致命名空间泄漏。

在 Python 3.x 中做了一个改变，在 What’s New In Python 3.0 中有如下描述：
“列表推导不再支持 [… for var in item1, item2, …] 这样的语法。使用 [… for var in (item1, item2, …)] 代替。

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

#!/usr/bin/python2
>>> i = 1
>>> print 'before: i =', i
before: i = 1
>>> print 'comprehension: ', [i for i in range(5)]
comprehension:  [0, 1, 2, 3, 4]
>>> print 'after: i =', i
after: i = 4

#!/usr/bin/python3
>>> i = 1
>>> print('before: i =', i)
before: i = 1
>>> print('comprehension:', [i for i in range(5)])
comprehension: [0, 1, 2, 3, 4]
>>> print('after: i =', i)
after: i = 1

兼容python3与python2

当前python3的普及还不尽人意，因此编写的python程序能同时兼容python2与python3是十分必要的。下面介绍同时支持python2与python3的方法。

• 放弃python 2.6之前的python版本
• 使用 2to3 工具对代码检查
• 使用python -3执行python程序
• from future import
  “from future import”后即可使使用python的未来特性了。python的完整future特性可见 future 。python3中所有字符都变成了unicode。在python2中unicode字符在定义时需要在字符前面加 u，但在3中则不需要家u，而且在加u后程序会无法编译通过。为了解决该问题可以 “from future import unicode_literals” ，这样python2中字符的行为将和python3中保持一致，python2中定义普通字符将自动识别为unicode。
• import问题
  python3中“少”了很多python2的包，在大多情况下这些包之是改了个名字而已。我们可以在import的时候对这些问题进行处理。

  1 2 3 4 5 6 7

  try:#python2 from UserDict import UserDict #建议按照python3的名字进行import from UserDict import DictMixin as MutableMapping except ImportError:#python3 from collections import UserDict from collections import MutableMapping

• 使用python3的方式写程序
• 检查当前运行的python版本

  1 2 3 4 5

  import sys if sys.version > '3': PY3 = True else: PY3 = False

• six
  不推荐使用six。

参考链接

1. https://zh.wikipedia.org/wiki/Python, by wikipedia
2. https://www.jianshu.com/p/85583e032eb8, by EarthChen
3. http://python.jobbole.com/83987/, by 天地一沙鸥

git是一个分布式版本控制软件，最初由林纳斯·托瓦兹（Linus Torvalds）创作，于2005年以GPL发布。最初目的是为更好地管理Linux内核开发而设计^[1]。

新建代码库

1
2
3
4
5
6
7
8

# 在当前目录新建一个Git代码库
$ git init

# 新建一个目录，将其初始化为Git代码库
$ git init [project-name]

# 下载一个项目和它的整个代码历史
$ git clone [url]

配置

Git的设置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）。

1
2
3
4
5
6
7
8
9

# 显示当前的Git配置
$ git config --list

# 编辑Git配置文件
$ git config -e [--global]

# 设置提交代码时的用户信息
$ git config [--global] user.name "[name]"
$ git config [--global] user.email "[email address]"

代码提交

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

# 提交暂存区到仓库区
$ git commit -m [message]

# 提交暂存区的指定文件到仓库区
$ git commit [file1] [file2] ... -m [message]

# 提交工作区自上次commit之后的变化，直接到仓库区
$ git commit -a

# 提交时显示所有diff信息
$ git commit -v

# 使用一次新的commit，替代上一次提交
# 如果代码没有任何新变化，则用来改写上一次commit的提交信息
$ git commit --amend -m [message]

# 重做上一次commit，并包括指定文件的新变化
$ git commit --amend [file1] [file2] ...

查看信息

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

# 显示有变更的文件
$ git status

# 显示当前分支的版本历史
$ git log

# 显示commit历史，以及每次commit发生变更的文件
$ git log --stat

# 搜索提交历史，根据关键词
$ git log -S [keyword]

# 显示某个commit之后的所有变动，每个commit占据一行
$ git log [tag] HEAD --pretty=format:%s

# 显示某个commit之后的所有变动，其"提交说明"必须符合搜索条件
$ git log [tag] HEAD --grep feature

# 显示某个文件的版本历史，包括文件改名
$ git log --follow [file]
$ git whatchanged [file]

# 显示指定文件相关的每一次diff
$ git log -p [file]

# 显示过去5次提交
$ git log -5 --pretty --oneline

# 显示所有提交过的用户，按提交次数排序
$ git shortlog -sn

# 显示指定文件是什么人在什么时间修改过
$ git blame [file]

# 显示暂存区和工作区的差异
$ git diff

# 显示暂存区和上一个commit的差异
$ git diff --cached [file]

# 显示工作区与当前分支最新commit之间的差异
$ git diff HEAD

# 显示两次提交之间的差异
$ git diff [first-branch]...[second-branch]

# 显示今天你写了多少行代码
$ git diff --shortstat "@{0 day ago}"

# 显示某次提交的元数据和内容变化
$ git show [commit]

# 显示某次提交发生变化的文件
$ git show --name-only [commit]

# 显示某次提交时，某个文件的内容
$ git show [commit]:[filename]

# 显示当前分支的最近几次提交
$ git reflog

Git 工具 - 子模块

有种情况我们经常会遇到：某个工作中的项目需要包含并使用另一个项目。 也许是第三方库，或者你独立开发的，用于多个父项目的库。 现在问题来了：你想要把它们当做两个独立的项目，同时又想在一个项目中使用另一个。

Git 通过子模块来解决这个问题。 子模块允许你将一个 Git 仓库作为另一个 Git 仓库的子目录。 它能让你将另一个仓库克隆到自己的项目中，同时还保持提交的独立。

1
2
3
4
5
6
7

$ git submodule add https://github.com/chaconinc/DbConnector
Cloning into 'DbConnector'...
remote: Counting objects: 11, done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 11 (delta 0), reused 11 (delta 0)
Unpacking objects: 100% (11/11), done.
Checking connectivity... done.

默认情况下，子模块会将子项目放到一个与仓库同名的目录中，本例中是 “DbConnector”。 如果你想要放到其他地方，那么可以在命令结尾添加一个不同的路径。

Git代理设置

1
2
3
4
5
6
7
8
9
10

git config --global https.proxy http://127.0.0.1:1080

git config --global https.proxy https://127.0.0.1:1080

git config --global --unset http.proxy

git config --global --unset https.proxy


npm config delete proxy

不常用操作

• 查看代码仓库中标签

  1

  git tag

• 检出指定标签代码

  1	git checkout tag_name

• 丢弃本地修改

  1	git checkout .

• 打包导出仓库代码

  1	git archive --format zip --output ..\emsdk\zips\1.38.8.zip HEAD

参考链接

1. Git, by wikipedia
2. git 如何获取指定 tag 代码, by 一介布衣
3. 常用 Git 命令清单,by 阮一峰.
4. 7.11 Git 工具 - 子模块,by git.
5. Git submodule用法,by jinlei_123.

Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。Three.js使用WebGL。源代码托管在GitHub。

下面介绍在Vue.js中集成three.js的步骤。

1. 安装vue-cli脚手架
2. 安装three.js

   1	npm install --save three

3. 编写使用three.js创建3D场景的Vuejs组件

   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

   <template> <div id="container"></div> </template> <script> import * as Three from 'three' export default { name: 'Home', data () { return { camera: null, scene: null, renderer: null, mesh: null } }, methods: { init: function () { var container = document.getElementById('container') this.camera = new Three.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10) this.camera.position.z = 1 this.scene = new Three.Scene() var geometry = new Three.BoxGeometry(0.2, 0.2, 0.2) var material = new Three.MeshNormalMaterial() this.mesh = new Three.Mesh(geometry, material) this.scene.add(this.mesh) this.renderer = new Three.WebGLRenderer({ antialias: true }) this.renderer.setSize(container.clientWidth, container.clientHeight) container.appendChild(this.renderer.domElement) }, animate: function () { requestAnimationFrame(this.animate) this.mesh.rotation.x += 0.01 this.mesh.rotation.y += 0.02 this.renderer.render(this.scene, this.camera) } }, mounted () { this.init() this.animate() } } </script> <style rel="stylesheet/scss" lang="scss" scoped> #container { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style>

参考链接

1. Three.js, by Wikipedia
2. Import and use three.js library in vue component, by Stackoverlflow

批处理文件(BAT文件)是DOS，OS/2和Microsoft Windows中的一种脚本文件^[1]。 它由命令行解释器执行的一系列命令组成，存储在纯文本文件中，通常以BAT为扩展名。批处理文件可以包含解释器交互接受的任何命令，并使用在批处理文件中启用条件分支和循环的构造，如IF，FOR和GOTO标签。在Windows平台自动化部署或处理日常重复性工作时，常使用Windows批处理文件。

批处理命令简介

下面简单介绍Windows BAT文件的语法。

变量操作

• 设置变量

格式：set 变量名=变量值
详细：被设定的变量以%变量名%引用

• 取消变量
  格式：set 变量名=
  详细：取消后的变量若被引用%变量名%将为空

• 展示变量
  格式：set 变量名
  详细：展示以变量名开头的所有变量的值

• 列出所有可用的变量
  格式：set

常用命令

• @

让执行窗口中不显示它后面这一行的命令本身。

1
2

// 使用@将不显示后面的echo off命令
@ echo off

• echo

echo即回显或反馈的意思。它由两种状态：打开和关闭。

1
2
3
4

// 将不显示后续的命令
@ echo off
// 将显示后续的命令
@ echo on

• ::

注释命令。在批处理文件中与rem命令等效

• call

call命令用来从一个批处理文件调用另一个批处理文件。只有当被调用的批处理文件执行完成时，才返回。

1

call pm2-startup install

• start

启动单独的“命令提示符”窗口来运行指定程序或命令。如果在没有参数的情况下使用，start 将打开第二个命令提示符窗口。

• pause

暂停命令。方便用户查看信息，查看完毕后可继续执行。

• explorer

在 cmd 下输入explorer可打开文件夹图形界面，例如：

1
2

// 在图形界面中打开当前文件夹
explorer .

• %i

for循环在cmd命令行中的固定用法for %i in (set) do (…)，循环变量格式为%i

1

for %i in (1,2,3,5,8) do echo %i

• %%i

for循环在bat处理程序中的固定用法for %%i in (set) do (…)，循环变量格式为%%i

• &

顺序执行多条命令，而不管命令是否执行成功

• &&

顺序执行多条命令，当碰到执行出错的命令后将不执行后面的命令

• ||

顺序执行多条命令，当碰到执行正确的命令后将不执行后面的命令（即：只有前面命令执行错误时才执行后面命令）

• |

管道命令 前一个命令的执行结果输出到后一个命令 如：help|more

清除文件中原有的内容后再写入

追加内容到文件末尾，而不会清除原有的内容主要将本来显示在屏幕上的内容输出到指定文件中指定文件如果不存在，则自动生成该文件。

1

certutil -hashfile user-history.db md5 >> hash.txt

• cd /d %~dp0

1
2
3
4
5
6

/d 表示直接切换到对应分区
%0代表批处理本身 d:\qq\a.bat
~dp是变量扩充
d既是扩充到分区号 d:
p就是扩充到路径 \qq
dp就是扩充到分区号路径 d:\qq

批处理脚本示例

示例1：

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

@echo off
set PATH=E:\Simulation\x64\Release\;%PATH%;
E:
cd E:\Simulation\x64\Release\
cd BlueSimu
start FlightSimServer.exe
cd ../RedSimu
start FlightSimServer.exe
cd ..
start Simulation.exe
start Simulation.exe
pause

示例2：

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

:: 定义变量
set dataset=j:\tensorflow\dataset\LSOTB-TIR\Training Dataset
set imagedir=%dataset%\LSOTB-TIR_TrainingData\TrainingData\TIR_training_004\bird_001
set xmldir=%dataset%\LSOTB-TIR_TrainingData\Annotations\TIR_training_004\bird_001
set labelpath=j:\tensorflow\workspace\training_demo\annotations\label_map.pbtxt
set outputdir=j:\tensorflow\workspace\training_demo\annotations\infrared_train_bird_004_001
set process_script=j:\tensorflow\scripts\preprocessing\generate_pascal_tfrecord.py

:: 调用tfrecord脚本程序, for循环，字符串截取，字符串拼接，路径空格处理 
for /L %%i in (1,1,7) do python %process_script% -i "%imagedir:~0,-1%%%i"  -x "%xmldir:~0,-1%%%i"  -l %labelpath% -o %outputdir:~0,-1%%%i.record
:: for /L %%i in (10,1,16) do python %process_script% -i "%imagedir:~0,-2%%%i"  -x "%xmldir:~0,-2%%%i"  -l %labelpath% -o %outputdir:~0,-2%%%i.record

pause

参考链接

1. Batch file,by Wikipedia.
2. 批处理最完整人性化教程(.bat文件语法), by s1ihome.
3. 批处理命令之Start的详细用法,by QiaoZhi.
4. windows批处理set命令,by 鹤唳九天.
5. windows批处理——变量，命令换行,by undefined.
6. Batch批处理字符串操作、for循环学习记录,by blingbling_110.
7. .bat批处理（八）：各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别,by AlbertS.
8. Bat命令学习-批处理中的&、&&、|、||、>、>>符号,by iloli.
9. Windows certutil.exe 命令 简单举例 计算MD5与SHA1/256,by ldq_sd.
10. cmd: cd /D %~dp0 的含义,by Nemo_XP.
11. CMD获取当前目录的绝对路径 （当前盘符和路径：%~dp0）,by 亟待!.

近期在研究集成封装Cesium为Vue.js组件，记录一下过程，防止忘了。

安装环境

• node.js: v8.9.4
• npm: 5.6.0
• vue: 2.5.2
• cesium: 1.45.0
• vue-cli: 2.9.3
• webpack: 3.6.0

注意此处vue-cli版本是2，因此该教程不适用vue-cli 3。如需在Vue-cli 3中构建Cesium，请参考Vue-cli 3.0 + cesium 构建.

安装配置

1. 安装nodejs
2. 安装vue-cli脚手架

   1 2 3 4 5

   npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev

3. 安装cesium

   1	npm install --save cesium

4. webpack配置

• 在build/webpack.base.conf.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 34 35 36

  //定义cesium源代码位置 const cesiumSource = '../node_modules/cesium/Source' ... module.exports = { ... output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // Needed to compile multiline strings in Cesium sourcePrefix: '' }, amd:{ // Enable webpack-friendly use of require in Cesium toUrlUndefined: true }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), //设置cesium的别名 'cesium': path.resolve(__dirname, cesiumSource) } }, module: { rules: [ ... ], //不让Webpack打印载入特定库时候的警告 unknownContextCritical: false }, ... }

• 在build/webpack.dev.conf.js文件中做如下修改

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

  //定义 Cesium 源代码路径，前面没有../ const cesiumSource = 'node_modules/cesium/Source' //定义 Cesium Workers 路径 const cesiumWorkers = '../Build/Cesium/Workers' ... plugins: [ ... new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]), new webpack.DefinePlugin({ // Define relative base path in cesium for loading assets CESIUM_BASE_URL: JSON.stringify('') }) ... ]

• 在build/webpack.prod.conf.js文件中做如下修改

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

  //定义 Cesium 源代码路径，前面没有../ const cesiumSource = 'node_modules/cesium/Source' //定义 Cesium Workers 路径 const cesiumWorkers = '../Build/Cesium/Workers' ... plugins: [ ... new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]), new webpack.DefinePlugin({ //定义 Cesium 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径 CESIUM_BASE_URL: JSON.stringify('./') }) ... ]

Vue.js组件编写

• 在src/components下新建 CesiumViewer.vue vue组件

  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

  <template> <div id="cesiumContainer"> </div> </template> <script type="text/javascript"> import Cesium from 'cesium/Cesium' import widgets from 'cesium/Widgets/widgets.css' export default { name: 'CesiumViewer', mounted () { var viewer = new Cesium.Viewer('cesiumContainer') } } </script> <style rel="stylesheet/scss" lang="scss" scoped> #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style>

• 创建全局样式文件src/styles/index.scss，做如下修改

  1 2 3 4 5 6 7 8

  html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }

• 在src/main.js中做如下修改

  1	import '@/styles/index.scss' // global css

参考链接

1. 基于webpack 构建Cesium + Vue 的应用, by QingMings
2. Vue-cli 3.0 + cesium 构建,by QingMings.
3. cesium-and-webpack, by cesiumjs.org
4. vue-cli生成的项目，main.js引入scss时报错,by segmentfault.

离线环境下Node.js应用部署时需要解决以下三个基本问题：

1. Node.js应用的进程管理，如性能监控、自动重启、负载均衡等
2. Node.js应用开机如何自启动
3. 离线环境下如何部署Node.js应用

下面以在Windows Server 2012上离线部署Node.js应用为例，记录上述问题的解决方案：

Node.js应用的进程管理

在生产环境中运行 Express 应用程序时，使用进程管理器对于完成以下任务很有帮助^[1]：

• 在应用程序崩溃后将其重新启动。
• 获得对运行时性能和资源消耗的洞察。
• 动态修改设置以改善性能。
• 控制集群。

进程管理器有点类似于应用程序服务器：它是应用程序的“容器”，可促进部署，提供高可用性并使您可以在运行时管理应用程序。

用于 Express 和其他 Node.js 应用程序的最流行的进程管理器包括：

• StrongLoop Process Manager
• PM2
• Forever

上述三种工具的比较请参阅http://strong-pm.io/compare/。其中，StrongLoop Process Manager无法在Windows平台工作，再综合比较PM2和Forever，由于Forever没有操作系统自启动的脚本，故选择PM2作为Windows平台Node.js应用的进程管理器。

Node.js应用开机如何自启动

选择PM2作为Node.js应用的进程管理器后，Node.js应用开机自启动的问题就变为如何开机自启动PM2。Windows平台存在两个自启动PM2的脚本：

• pm2-windows-service
• pm2-windows-startup

pm2-windows-service基于 node-windows将PM2注册为Windows服务，从而实现自启动。pm2-windows-startup则基于start-on-windows-boot在注册表中将PM2设为自启动程序，从而实现自启动。两种方案经测试，只有pm2-windows-startup在Windows Server 2012上可行，故选择pm2-windows-startup作为解决Node.js应用开机自启动的方案。

离线环境下如何部署Node.js应用

PM2和pm2-windows-startup必须全局安装，如何简单方便地在离线环境下全局安装这两个模块是一个问题。网上搜到的方法有：

• npm link
• npm-bundle

npm link^[2]是npm的一个命令，可将本地包链接成全局包，但实际测试过程中，无法解决PM2包的依赖问题，故放弃。而npm-bundle^[3]则能很好的解决PM2的依赖问题。具体过程为：

1
2
3
4
5
6

\\在线环境下全局安装
npm install -g pm2
npm install -g pm2-windows-startup
npm install -g npm-bundle
npm-bundle pm2
npm-bundle pm2-windows-startup

离线部署Nodejs Express应用

1
2
3
4
5
6
7

@echo off
SET NODE_ENV=production
call npm install .\pm2-2.10.3.tgz -g 
call npm install .\pm2-windows-startup-1.0.3.tgz -g
call pm2-startup install 
call pm2 start ./bin/www -i 0
call pm2 save

离线卸载Nodejs Express应用

1
2
3
4
5

@echo off
call pm2 stop all
call pm2-startup uninstall
call npm uninstall pm2 -g
call npm uninstall pm2-windows-startup -g

参考链接

1. Express 应用程序的进程管理器, by Express
2. npm离线安装全局包,内网安装npm中的包, by 爱死费崇政
3. What exact command is to install pm2 on offline RHEL, by stackoverflow.
4. NodeJS: PM2 Startup on Windows,by Walter Accantelli.
5. bat脚本%cd%和%~dp0获取当前目录区别,by dmfrm

Vue.js集成Highcharts方法

1. 安装highcharts

   1	npm install --save highcharts

2. 封装hightcharts成Vue.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 34 35 36 37

   <template> <div class="highcharts-container"> </div> </template> <script> import Highcharts from 'highcharts/highstock' import HighchartsMore from 'highcharts/highcharts-more' import HighchartsDrilldown from 'highcharts/modules/drilldown' import Highcharts3D from 'highcharts/highcharts-3d' HighchartsMore(Highcharts) HighchartsDrilldown(Highcharts) Highcharts3D(Highcharts) export default { props: ['options'], name: 'HighCharts', data () { return { chart: null } }, watch: { options: function (newVal, oldVal) { // watch it this.chart.update(newVal, true) } }, mounted () { this.initChart() }, methods: { initChart () { this.chart = new Highcharts.Chart(this.$el, this.options) } } } </script>

3. 在src/main.js引入组件

   1 2	import HighCharts from './components/HighCharts.vue' Vue.component('HighCharts', HighCharts)

4. 使用组件

   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

   <template> <div class="radarGraph"> <HighCharts :options="options" class="radar" ></HighCharts> </div> </template> <script> export default { name: 'RadarGraph', computed: { gameInfo () { return this.$store.state.gameInfo }, options () { return { chart: { polar: true, type: 'line', marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0 }, credits: { enabled: false }, pane: { size: '75%' }, title: null, legend: { enabled: false }, xAxis: { categories: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6' ], labels: { style: { fontSize: '14px' } }, tickmarkPlacement: 'on', lineWidth: 0 }, yAxis: { gridLineInterpolation: 'polygon', lineWidth: 0, min: 0 }, series: [{ type: 'area', name: '得分', data: [this.gameInfo.radar1, this.gameInfo.radar2, this.gameInfo.radar3, this.gameInfo.radar4, this.gameInfo.radar5, this.gameInfo.radar6], pointPlacement: 'on' }] } }, ...mapGetters([ 'userId' ]) }, created () { this.fetchData() }, methods: { fetchData () { this.$store.dispatch('GetGameInfo', this.userId) } } } </script>

   参考链接

1. 在 Vue 中使用 Highcharts,by 简数科技.