通过ZeroTier内网穿透连接软路由

想要在外面随时可以查看路由器,就需要启用软路由的 ZeroTier 功能,经过配置后就可以在任何安装了 ZeroTier 的设备上直接访问内网。

  • 路由器启用 ZeroTier
  • 登录 ZeroTier 网站,创建 Network,获取 NetworkId。

在任何安装 ZeroTier 的设备上通过 NetworkId 加入该网络,即形成了一个 ZeroTier 打造的局域网。

  • 软路由/电脑/移动设备 ZeroTier 界面通过输入 NetworkId 加入网络。
  • 登录 ZeroTier 网站,在 Members 下通过地址确认各设备并授予权限,ZeroTier 会自动分配一个 ip 地址,形成一个局域网。
  • 如果想要保持软路由的地址一致,在 ZeroTier 网站界面 Managed Routes 添加一个跳转,Destination 为目标软路由地址,via 为 ZeroTier 为软路由设备自动分配的地址。
2023.07.21 Fri

红米AX6000刷OpenWrt

网上给红米 AX6000 刷 OpenWrt 的内容多如牛毛,我也是参考了恩山论坛的帖子,期间也用小米路由器救砖工具重置过几次路由器,在此记录一下参考的网站和遇到的问题。

刷机步骤

红米 AX6000 闭源驱动 op下载作者编译的 ImmortalWrt 固件,参考红米 AX6000 X-WRT 固件刷机教程刷入 X-Wrt 底包,之后在 X-wrt web 界面刷入下载好的 ImmortalWrt。

遇到的问题

  • 按教程刷入 X-Wrt 或者 OpenWrt stack 底包重启后没有 Wifi 信号,导致无法连接路由器登陆后台。

    这是因为底包默认关闭了 Wifi 功能,将路由器通过网线连接电脑,在控制面板/网络和 Internet/查看网络信息,找到设备查看详细信息就可以看到电脑自动分配的 IP 地址了。如果自动分配的 IP 地址打不开,可以点击属性,在 IPv4 设置里手动设置 IPv4 地址。

    根据 Ip 地址登录之后可以在菜单栏无线里面打开 Wifi 功能。

  • 底包 Web 页面刷入 ImmortalWrt 有警告提示。

    不慌,大胆刷。

  • PassWall TCP 节点分流无效,指定单个节点却正常。

    先选择单个节点确保网络正常翻墙,选择规则管理,checkbox 勾选 geoip geosite 规则并且手动更新。

2023.07.09 Sun

更新.gitignore

如何应用.gitignore文件的更新。

1
2
3
4
5
git rm -r --cached .  #清除缓存
git add . #重新trace file
git commit -m "update .gitignore" #提交和注释
git push origin master #可选,如果需要同步到remote上的话

2023.06.14 Wed

n1盒子设置

记录一下 n1 盒子刷上 OpenWrt 之后的一些问题。

n1 盒子作旁路由

  • n1 盒子与主路由保持同一网段,譬如主路由是 192.168.0.1,则 n1 盒子 ip 是 192.168.0.x,x!=1。

  • 主路由
    打开 dhcp

  • n1 盒子
    设置网关为主路由的地址 192.168.0.1
    关闭 dhcp 服务

passwall

  • 如果想针对特定设备能够翻墙,则需要在对应设备设置网关和 dns 为 n1 盒子的 ip 地址

  • 如果想要不区分设备,则要在主路由 dhcp 设置网关和 dns 为 n1 盒子的 ip 地址,这样就相当于为每个设备自动下发了对应的网关和 dns 设置

这种方式旁路由和主路由都能够实现翻墙,所有的链接会经过 passwall 的分流处理交由主路由。

openClash

这种方式只要 openClash 配置好就能上网,无需操作主路由,而且连接主路由正常上网,链接 n1 盒子翻墙上网,分配明确。

2023.06.14 Wed

WSL打开VSCode出错

在WSL命令行中输入命令code .应该会呼出Windows的VSCode,但是却提示错误

1
Setting up server environment: Looking for /home/xxx/.vscode-server/server-env-setup. Not found.

可以手动删除/home/xxx/.vscode-server,此时运行code .会重新安装VSCode。

2023.06.14 Wed

HTML原生input标签实现调色板功能

使用 input 标签 type=‘color'属性调出浏览器的调色板,监听 input 事件实时获取取色值,将 input 标签隐藏以应用自定义样式。

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
<style>
.palette {
width: 30px;
height: 30px;
border-radius: 9999px;
background-color: #000;
}
input {
opacity: 0;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
}
</style>

<div class="palette">
<input
type="color"
onChange="handleChange(event)"
onInput="handleInput(event)"
/>
</div>

<script>
const handleChange = (e) => {
// 监听调色板展示/关闭
console.log(e.target.value)
}

const handleInput = (e) => {
// 监听颜色选择
const color = e.target.value
document
.querySelector('.palette')
.setAttribute('style', `background-color:${color}`)
}
</script>
2023.04.24 Mon

通过Chrome Devtool在PC端调试安卓设备网页

开发过程中需要使用移动设备测试页面,为了方便调试,可以通过 PC 连接移动设备(Android),使用 Chrome 浏览器 Devtool 像调试 PC 页面一样调试移动设备。

  • 电脑连接手机

    手机开发者模式打开 usb 调试;或者无线调试,使用 adb 命令连接设备。

  • 导航栏地址 chrome://inspect/#devices

    允许浏览器通过 usb 或者 network 查找连接的手机

以上操作完成后,会在 Remote Target 下看到自己的手机型号,此时在手机浏览器打开任意页面都会反映在当前页面,通过 inspect 调试相应页面即可。

2023.04.24 Mon

扁平化嵌套数组-flat方法

当需要把嵌套数组转成扁平数组时可以使用 flat 方法,arr.flat(depth) depth 指的是需要拍平的深度。

1
2
3
4
5
const arr = [1, 2, 3, [4, 5], [[6, 7], 8], 9]

arr.flat() // [ 1, 2, 3, 4, 5, [ 6, 7 ], 8, 9 ]
arr.flat(1) // [ 1, 2, 3, 4, 5, [ 6, 7 ], 8, 9 ]
arr.flat(2) // [ 1, 2, 3, 4, 5,6, 7, 8, 9]
2023.03.25 Sat

使用Object.entries循环对象

平时循环对象一直使用 Object.keys(),最近学到了用 Object.entries()感觉更方便。

1
2
3
4
5
6
7
8
9
const obj = [
{
name: 'wang',
age: 38,
},
]
for (const [name, age] of obj.entries(obj)) {
console.log(name, age)
}
2023.03.25 Sat

前端批量下载遇到的问题

在需要批量下载文件时,总是最后一个文件能够下载成功,在 Chrome Devtool 的网络请求里可以看到前面的文件请求状态是 canceled,代码如下。

1
2
3
4
5
6
7
8
9
10
const saveFile = (url, filename) => {
const link = document.createElement('a')
link.href = url
link.download = filename
link.click()
}

fileList.forEach((file) => {
saveFile(file.url, file.filename)
})
  • 原因:把 a 链接当成一次网页导航,当点击 a 链接跳转时又重复点击该链接,浏览器此时会重置之前的跳转并重新计算,这就导致了之前的网络请求都被 canceled。

  • 解决方法:使用 iframe 隐藏下载,但是缺点是会在 body 里面嵌入多个 iframe。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const saveFile = (url: string) => {
    const iframe = document.createElement('iframe')
    iframe.setAttribute('sandbox', 'allow-downloads allow-scripts')
    iframe.src = url
    iframe.setAttribute('style', 'display: none')
    document.body.appendChild(iframe)

    setTimeout(() => {
    iframe.remove()
    }, 1000)
    }

参考链接:Browser is cancelling multiple file download requests

2023.03.15 Wed

检测到页面内容有更新,是否刷新页面