感觉手动设置 table 样式挺恶心的，而且性能也很烂，今天用 ul + flexbox 简单模拟一个 vue 上用的

my-table.vue

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

<div class="table">
  <ul class="tr">
    <li class="th" :style="styles(item)" v-for="item in columns" :key="item.key">{{item.title}}</li>
  </ul>
  <ul class="tr" v-for="(row, index) in data" :key="index">
    <li
      class="td"
      :style="styles(item)"
      v-for="item in columns"
      :key="item.key"
      v-html="item.render?item.render(row[item.key]):row[item.key]"
    ></li>
  </ul>
</div>

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

export default {
  props: {
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    styles(item) {
      let { width, textAlign } = item
      return {
        width: (width || 100) + 'px',
        textAlign: textAlign || 'left'
      }
    }
  }
}

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

.table {
  overflow: auto;
  font-size: 0;

  .tr {
    display: inline-flex;
    min-width: 100%;
    border-bottom: 1px solid #a7bfda;

    &:nth-child(2n) {
      background-color: #d1dfec;
    }

    .th {
      font-weight: bold;
    }

    .th,
    .td {
      display: inline-block;
      padding: 10px 15px;
      box-sizing: border-box;
      flex-grow: 1;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

使用方式

1

<my-table :columns="tableColumns" :data="tableData"></my-table>

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

import MyTable from '../components/table'
export default {
  components: {
    MyTable
  },
  data() {
    return {
      tableColumns: [
        {
          title: 'Name',
          key: 'name',
          width: 120
        },
        {
          title: 'Age',
          key: 'age',
          textAlign: 'right',
          render(val) {
            if (val >= 18) {
              return "<span style='color:green'>" + val + '</span>'
            } else {
              return "<span style='color:red'>" + val + '</span>'
            }
          }
        },
        {
          title: 'Address',
          key: 'address',
          width: 250
        }
      ],
      tableData: [
        {
          name: 'John Brown',
          age: 14,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 17,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ]
    }
  }
}

仅仅一句命令

1

echo "username:password" | chpasswd

例如

1

echo "root:123456" | chpasswd

成功以后不会有任何反应，但是实际上已经成功了。

申请免费 SSL 证书

打开这个链接，品牌选择 Symantec，保护类型选择 1 个域名，证书类型选择免费型 DV SSL，域名个数选择 1 个，然后你就会发现费用只需要 0 元了 💪。

立即购买后需要选择补全信息，然后等待审批结果即可。

证书订单的流程如下：

注意：该证书的有效期只有一年

配置 nginx

找到已签发的订单，选择下载后会跳到教程页面，这里我再说明一下，以 nginx 为例

将证书下载下来，解压后里面有俩文件，不要修改里面的任何东西，
在 nginx 的安装目录下创建 cert 目录，将下载的证书丢进去，
然后修改配置文件内容，以我的配置为例：

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

server {
    listen                     443;
    server_name                xiaojun1994.top;
    ssl                        on;
    root                       /srv/www/blog;
    index                      index.html;
    ssl_certificate            cert/215019006850496.pem;
    ssl_certificate_key        cert/215019006850496.key;
    ssl_session_timeout        5m;
    ssl_ciphers                ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols              TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers  on;
    location / {
    }
}

以上属性中 ssl 开头的属性与证书配置有直接关系，其它属性请结合自己的实际情况复制或调整

最后，开启重定向功能，自动将 http 请求重定向到 https，有多种方式，这里说两种

1.

1

rewrite ^(.*)$  https://$host$1 permanent;

2.

1
2
3

if ($scheme = http ) {
  return 301 https://$host$request_uri;
}

推荐使用第 2 种方式，因为我在使用百度站长平台 https 认证的时候它需要你把 http 重定向到 https，并返回 301 状态码。
但经过我测试以后发现 chrome 返回的是 307 状态码，原因未知，就不深追究了，应该是 chrome 为了安全做的措施吧

👻 别忘了重启 nginx

1

nginx -s reload

查看 nginx 配置文件路径

1

nginx -t

修改配置文件

1
2

# 路径为第一步获取的那个
vim /etc/nginx/nginx.conf

在 http 区域中新增 gzip 配置

1
2
3
4
5
6

gzip              on;
gzip_min_length   1k;
gzip_comp_level   1;
gzip_types        text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
gzip_disable      "MSIE [1-6]\.";
gzip_vary         on;

逐行解释一下

• 开启 Gzip
• 大于 1K 的才压缩，一般不用改
• 压缩级别，1-9，数字越大，压缩率越高，cpu 占用的也更多，我服务器比较渣，这里设置了 1
• 进行压缩的文件类型
• ie6 对 gzip 不怎么友好，就不给它压缩了
• 添加 vary 响应头，给代理服务器用的

最后重启 nginx

1

nginx -s reload

安装 Git

将可能已安装的 Git 卸掉

1

yum remove -y git

安装依赖

1
2

yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc
yum install -y gcc perl-ExtUtils-MakeMaker

从这里选择一个 Git 版本，我选择的是 2.9.5
https://mirrors.edge.kernel.org/pub/software/scm/git/

1
2
3
4
5
6
7
8
9
10

cd /usr/local/src/
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
tar -vxf git-2.9.5.tar.gz
cd git-2.9.5
make prefix=/usr/local/git all
make prefix=/usr/local/git install
echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/profile
source /etc/profile
# 验证是否安装成功
git --version

创建 Git 用户

1
2

adduser git
passwd git

创建 Git 仓库

为了方便管理，所有的 git 仓库都置于同一目录下，假设为 /srv/gitLibrary

1
2
3
4

mkdir /srv/gitLibrary
# 创建一个名字为sample.git的裸库
git init --bare /srv/gitLibrary/sample.git，
chown -R git:git /srv/gitLibrary

配置 SSH

配置 ssh 的目的是为了能免密码访问。

创建 authorized_keys 文件

1
2
3
4
5
6

cd /home/git
mkdir .ssh
chmod 755 .ssh
touch .ssh/authorized_keys
chmod 644 .ssh/authorized_keys
chown -R git:git /home/git

在客户端上生成密钥

1

ssh-keygen -t rsa -C "your_email"

一路回车后会产生两个文件: id_rsa 和 id_rsa.pub，控制台会打印这俩文件的路径，先找到它们，等下要用到。

编辑 authorized_keys 文件

1

vim /home/git/.ssh/authorized_keys

然后把 id_rsa.pub 文件中的内容拷贝进去，
你也可以上传多个密钥，比如，家里一个电脑，公司一个电脑，每个密钥占一行即可。

至此，远程仓库算是搭建完成了，接下来用客户端测试一下能否将这个仓库拉到本地

1

git clone ssh://[email protected]:x/srv/gitLibrary/sample.git

买一个国外的 vps

推荐两个厂商

• 搬瓦工
• vultr

安装 Shadowsocks

1
2
3
4
5

# yum -y remove epel-release
yum -y install epel-release
yum -y install python-pip
# python -m pip install --upgrade pip
pip install shadowsocks

我注释掉的命令最好也敲上，因为我在那里失败了好久，不过网上的教程一般都没敲，失败的可以敲上试试

创建 Shadowsocks 配置文件

1
2

# yum -y install vim*
vim /etc/shadowsocks.json

写入配置

1
2
3
4
5
6
7
8
9

{
  "server": "185.199.111.153",
  "server_port": 6666,
  "password": "123456",
  "local_address": "127.0.0.1",
  "local_port": 1080,
  "timeout": 300,
  "method": "aes-256-cfb"
}

• server 设置成你服务器 ip 地址
• server_port 设置端口号
• password 设置密码
• 其它的默认即可

请牢记 server、server_port、password、method 里面的值，等下客户端连接时候要用到

配置开机启动服务

1

vim /etc/systemd/system/shadowsocks.service

先按一下 i 键，然后输入以下内容

1
2
3
4
5
6
7
8

Description=Shadowsocks

[Service]
TimeoutStartSec=0
ExecStart=/usr/bin/ssserver -c /etc/shadowsocks.json

[Install]
WantedBy=multi-user.target

然后按一下 esc 键，最后输入 :wq 保存

使服务生效 & 启动服务

1
2

systemctl enable shadowsocks
systemctl start shadowsocks

如果失败的话，请检测一下防火墙是否打开，这里不放教程了，因为我的防火墙默认是关闭的，没去学习怎么关闭防火墙

配置客户端

• 首先去下载一个客户端，这里只放 windows 版的，其它系统的可以自己找一下
  https://github.com/shadowsocks/shadowsocks-windows/releases
• 然后配置一下服务器地址、服务器端口、密码、加密就 OK 了，
  对应上面配置文件里的 server、server_port、password、method

npx 是 npm5.2.0 版本上出现的一个新命令，主要是为了解决之前的一些痛点。

举例来说：
webpack 可能我们之前一般都是这么用

1
2

npm install -g webpack
webpack -v

这么做的坏处就是会将该包安装到全局环境，可能有些人不希望它安装到全局，那么就需要这样

1
2

npm install webpack
./node_modules/.bin/webpack -v

显而易见，这样做也有一个缺点，因为局部安装不会把命令注册到全局环境，所以我们使用它的时候需要手动指定命令路径

npx 便是为了解决这一痛点而生

1

npx webpack -v

首先它会检测全局是否安装了 webpack 这个包，如果有便会直接用全局的，
如果没有，它便会在本地 node_modules 文件夹中安装这个包，然后调用 ./node_modules/.bin 里面的命令，
值得一提的是它并不会在 package.json 文件的 dependencies 和 devDependencies 字段中写入任何信息