Fork me on GitHub
Xiaojun's Blog

  • Home

  • Tags

  • Archives

使用ul简单模拟一个在移动端上使用的Vue表格组件

发表于 2018-09-27
| 字数: 3.2k

感觉手动设置 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'
}
]
}
}
}

Linux非交互式修改用户密码

发表于 2018-09-23
| 字数: 102

仅仅一句命令

1
echo "username:password" | chpasswd

例如

1
echo "root:123456" | chpasswd

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

Nginx配置阿里云免费SSL证书,咱也能用上HTTPS了

发表于 2018-09-22
| 字数: 1.3k

申请免费 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开启gzip

发表于 2018-09-21
| 字数: 492

查看 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

在CentOS7上搭建自己的Git服务器

发表于 2018-09-20
| 字数: 1.3k

安装 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

在CentOS7上搭建SS

发表于 2018-09-19
| 字数: 1.2k

买一个国外的 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
123
xiaojun1994

xiaojun1994

26 posts
19 tags
GitHub
友链
  • 赖同学
  • John Stark
  • 胡雨
  • mghio
© 2021 xiaojun1994