0%

一次对树状数据的简单处理,一位大佬提供的方法,让我对 JSON.stringify 方法有了新的认识,开始我仅仅将它当做一个数据格式化成字符串的方法。

需求

处理以下树状数据,优雅的替换其中的 childrenerzi

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
let defaultData = [
{
name: '活动名称一',
description: '这个活动真好玩',
type: 'string',
required: 'false',
isShown: 'false',
},
{
name: '活动名称二',
description: '这个活动真好玩',
type: 'number',
required: 'false',
isShown: 'true',
children: [
{
name: '活动名称123',
description: '这个活动真好玩',
type: 'integer',
required: 'false',
isShown: 'false',
children: [
{
name: '活动名称456',
description: '这个活动真好玩',
type: 'boolean',
required: 'false',
isShown: 'false',
children: [
{
name: '活动名称789',
description: '这个活动真好玩',
type: 'object',
required: 'false',
},
],
},
],
},
],
},
];
阅读全文 »

我服务器用的Oneinstack配置的环境,但是无法远程连接数据库,排查了一下是由于防火墙开启,3306端口不通导致的

防火墙开启3306端口

Centos

1
2
iptables -I INPUT 4 -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT
service iptables save #保存iptables规则

Ubuntu/Debian

1
2
iptables -I INPUT 4 -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT
iptables-save > /etc/iptables.up.rules #保存iptables规则

数据库授权

1
2
3
4
# mysql -uroot -p
MySQL [(none)]> grant all privileges on db_name.* to db_user@'%' identified by 'db_pass'; #授权语句,特别注意有分号
MySQL [(none)]> flush privileges;
MySQL [(none)]> exit; #退出数据库控制台,特别注意有分号

后记

参考文章 - 如何配置数据库远程连接

简易的 react table 组件

Github: simple-react-table

Antd 中的 Table 组件有固定头和固定列的功能,表格还有无限滚动,合并单元格。

我自己手写实现了一下其中的固定头和固定列。

运行效果

代码分析

表格的固定头固定列

Table 组件用了 position: sticky; 实现了固定头和固定列,可以看看简易下面的 demo,打开页面后用 F12 查看代码。

这是固定列部分的代码,更多的代码可以去上面的 Github 项目中查看

其中 style.position = 'sticky'; 设置了当前列固定,style.zIndex = '2'; 设置层级,这样在滚动的时候,这一列可以覆盖在上方,

1
2
3
4
5
if (fixed === 'left') {
style.left = index * 100 + 'px';
} else {
style.right = (columns.length - 1 - index) * 100 + 'px';
}

这一段代码判断列是在左边还是右边,如果是在左边,就加 css 的 left 属性,然后宽度是可以自定义的。

阅读全文 »

问题

Jenkins 收到 Github Webhooks 消息之后我要执行 Shell 脚本,但是遇到了报错,如下:

1
2
3
...
cd: /: Not a directory
...

我的脚本如下

1
2
cd /root/testjenk
mkdir 456

网上查了一下没查到原因,问网友,恶魔旋律 提到可能是权限不足导致的,我搜了一下 Jenkins 提权方面资料。

解决

编辑 /etc/sysconfig/jenkins 文件

将原来的 jenkins 用户修改为 root 用户。 $JENKINS_USER="root"

执行文件夹提权命令

1
2
3
chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins

重启 Jenkins

1
2
service jenkins restart
service jenkins status

然后再次提交 giuhub,查看日志,发现自动构建成功

Mark 一下 输出环境变量的。写脚本的时候需要附加上去需要看一下当前环境变量。

将本地服务器上的文件传到远程服务器上

1
echo $PATH

如果你用过Maga 网盘,那你可能发现它的文件下载方式不是直接用浏览器下载,而是先在网页中下载,下载完成后才调起浏览器的下载,比较酷。

原理就是它用了 blob 进行文件的下载之后再输出出来。我朋友 ZJINH 写了一个网盘软件中就实现了这个功能,他在群里讨论这个功能的同时也分享了代码,我的友链中有他的博客地址,欢迎大家访问(还能白嫖到他网盘客户端的源码)。

运行效果

代码如下

实现

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
function download(url, progress, callback, error) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.abort();
xhr.addEventListener(
'progress',
function (e) {
if (e.lengthComputable) {
progress && progress(e.total, e.loaded);
}
},
false
);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
callback(xhr.response);
}
};
xhr.onerror = (e) => {
error && error(e);
};
xhr.send();
return xhr;
}

代码很好看,这儿不多做分析,关键的地方是 xhr.responseType = 'blob'; 用 blob 的方式获取资源。

补充

他没有给出全部的代码,callback 返回的是一个 blob 对象,我这儿补充一下。让代码跑起来

1
2
3
4
5
6
7
8
9
10
function blobDownload(blob, fileName) {
let a = document.createElement('a');
a.style = 'display: none';
document.body.appendChild(a);
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}

运行

1
2
3
4
5
6
7
8
9
10
11
12
let url = 'https://files.itnote.me/Software/npp.7.8.5.Installer.exe';

download(
url,
(total, loaded) => {
console.log('total, loaded', total, loaded);
},
(callback) => {
console.log('callback', callback);
blobDownload(callback, 'npp.7.8.5.Installer.exe');
}
);

问题

安装 Jenkins 之后我要用 Jenkins 拉取 github 仓库,但是我碰到了个奇怪问题

就是以 git@github.com:mtrucc/ice-electron.git 这种格式拉取仓库,不选择凭据,或者凭据选择用户名密码,总是返回

1
2
3
4
5
6
7
无法连接仓库:Command "git ls-remote -h -- git@github.com:mtrucc/ice-electron.git HEAD" returned status code 128:
stdout:
stderr: git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

过程

在此之前我自己已经添加过 ssh-keygen 到 github ssh 配置中了。

网上的解决方法也有不少,但都没用

比如执行 sudo su jenkins 切换到 jenkins 用户拉一遍仓库。

或者在 /home/jenkins 文件夹生成密钥后提权 chown jenkins:jenkins id_rsa id_rsa.pub

后来我又试验了一下将链接换成 https://github.com/mtrucc/ice-electron.git 就不存在上面的问题了。

我对比了一下命令行执行

1
2
git ls-remote -h -- git@github.com:mtrucc/ice-electron.git HEAD
git ls-remote -h -- https://github.com/mtrucc/ice-electron.git HEAD

这两个命令的返回结果其实是一致的,但是jenkins

但这样解决的话,我实在是非常别扭,找不到原因。

解决方式

后来我又执行 cat ~/.ssh/id_rsa 将私钥提取出来,然后在Jenkins中添加了 SSH Username with private key 类型的凭据,username填的root,key是将刚刚提取出来的key粘贴上去,就可以用 git@github.com:mtrucc/ice-electron.git 了。

或者 Repository URL 填写为 https 类型的也可以。

本文介绍了如何使用 Nginx 反向代理谷歌服务,并且替换其中的内容。

我对谷歌字体进行了反代操作,具体见这篇文章:Nginx 反向代理 Google Font、Ajax 和 Gravatar 头像

这儿记一下研究过程中碰到的问题。

Nginx 反向代理配置文件参考

在 Nginx 文件夹下创建 conf 文件,用于反代。

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

server {
...
resolver 8.8.8.8;

location /css {
sub_filter 'fonts.gstatic.com' 'fonts.itnote.me';
sub_filter_once off;
sub_filter_types *;
proxy_pass $scheme://fonts.googleapis.com:$server_port;
proxy_set_header Host fonts.googleapis.com;
proxy_set_header Accept-Encoding '';
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
client_max_body_size 1m;
proxy_cache_key $scheme$host$request_uri;
proxy_cache proxy_cache_zone_of_site_fonts.itnote.me;
proxy_cache_valid 200 301 302 7d;
proxy_cache_valid any 7d;
proxy_cache_min_uses 1;
proxy_cache_methods GET HEAD;
proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
proxy_cache_revalidate on;
proxy_cache_lock on;
proxy_cache_lock_timeout 6s;
}
...
}

遇见的问题

页面 502 错误

阅读全文 »

我网站是 itnote.me,页面上有个链接,代码是这样的

1
<a href="https://files.itnote.me/XXX/xxx.mp3" target="_blank">下载文件</a>

结果通过页面跳转打开这个链接的时候,竟然 403 错误,我直接复制链接在浏览器中打开却能正常访问。

百思不得其解之下,我查了一下,可能和防盗链(跨域)有关,去看了一下 nginx 的配置

Nginx 反向代理配置文件参考

在 Nginx 文件夹下创建 conf 文件,用于反代。

1
2
3
4
5
6
location ~ .*\.(wma|wmv|asf|mp3|mmf|zip|rar|jpg|gif|png|swf|flv|mp4)$ {
valid_referers none blocked *.itnote.me files.itnote.me;
if ($invalid_referer) {
return 403;
}
}

这段代码很有意思哈,虽然表明了 *.itnote.me files.itnote.me 是可以访问的,但是注意一下,没有表明 itnote.me 是可以访问的,这就造成了 a 标签元素打不开链接

很低级的错误。但挺有意思的,没想到 a 标签打开的页面再某些情况下也会触发防盗链(跨域)问题。