Write the Code. Change the World.

9月 10
精选文章

该后台使用 vite + ts + pnpm + vue3 + element-plus + tailwindcss 等技术栈构成。没有添加任意可视化图标等插件。以最小功能,最基础功能展现。用户可以额外添加可使用的插件逻辑。

该后台后端使用 php8.2 + laravel 10 + mysql

该后台后端 go 语言版本开发中。将使用 gframe2.5.2

源码: https://github.com/vini123/simpleAdmin

在线体验: https://www.zeipan.com/admin

权限以及密码一键复位: https://v3test.yuepaibao.com/admin/api/reset

测试账号以及密码: zhoulin@xiangrong.pro、 111111 (如果发现登录不了,可一键复位谢谢)

阅读全文 >>

3月 26

docker 备份数据库

  1. 创建 /user/local/src/backup/mysql-backup.sh 文件。
#!/bin/bash

CONTAINER_NAME="mysql8.2"                 # MySQL容器名称
MYSQL_PWD="xxxxxx"                        # 数据库密码
MYSQL_DATABASE="xxxxxx"                   # 数据库名称
BACKUP_DIR="/user/local/src/backup/mysql" # 备份存储目录
LOG_DIR="/user/local/src/backup/logs"     # 备份存储目录
DATE=$(date +"%Y%m%d")

# 确保备份目录存在
mkdir -p "$BACKUP_DIR"
mkdir -p "$LOG_DIR"

# 每周日进行全量备份
if [[ $(date +%u) -eq 7 ]]; then
    echo "开始备份..."
    BACKUP_FILE="$BACKUP_DIR/mysql_full_$DATE.sql"
    docker exec $CONTAINER_NAME sh -c "mysqldump -uroot -p'$MYSQL_PWD' $MYSQL_DATABASE" >"$BACKUP_FILE"
    gzip "$BACKUP_FILE"
    echo "备份完成并压缩,存储路径:$BACKUP_FILE.gz"
else
    echo "今天不是周天,不备份"
fi

如果备份所有数据库。mysqldump --all-databases -uroot -p'$MYSQL_PWD'

  1. 设置权限
chmod +x /user/local/src/backup/mysql-backup.sh
  1. 添加定时任务\
crontab -e

#每天凌晨 2 点启动定时任务
0 2 * * * bash /user/local/src/backup/mysql-backup.sh >> /user/local/src/backup/logs/backup_$(date +\%Y\%m\%d).log 2>&1

阅读全文 >>

3月 18

win10怎么查看连接过的wifi的密码,win11怎么查看连接过的wifi的密码。

操作

  1. win + s 搜索 终端, 打开终端。
  2. 输入 netsh wlan show profiles 回车,显示曾经连接过的 wifi 列表。
  3. 输入 netsh wlan show profile name="大疆无人机" key=clear 回车,显示某个 wifi 的具体信息。大疆无人机 为某个 wifi 名,展示的具体信息的安全设置的关键内容对应的就是该 wifi 密码。

阅读全文 >>

3月 07

https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/overview/#%E6%A6%82%E8%BF%B0

基于xr-frame实现微信小程序的图片扫描识别AR功能,通过编写节点就能完成。这里使用 uniapp 构建。

基本操作

  1. 使用 uniapp 创建一个默认项目。 文件->创建->项目

  1. 在项目根目录下创建 wxcomponents 目录。在该目录下创建 xrtracker 目录,这个目录用来存放微信小程序的代码。在这个目录中创建。 index.json,index.wxml,index.js 文件。

index.json

{
    "component": true,
    "renderer": "xr-frame",
    "usingComponents": {}
}

index.wxml

<xr-scene>
    <xr-camera id="camera" clear-color="0.2 0.4 0.6 1" camera-orbit-control/>
</xr-scene>

index.js

Component({
    properties: {
    },
    data:{
    },
    lifetimes: {

    },
    methods: {

    }
})
  1. 这里直接在默认的 pages/index/index.vue 中修改。内容如下。

    <template>
    <xr-tracker></xr-tracker>
    </template>
  2. 修改 pages.json,将微信小程序组件引入进来。

            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                // #ifdef MP-WEIXIN
                "usingComponents": {
                    "xr-tracker": "/wxcomponents/xrtracker/index"
                }
                // #endif
            }
  3. 还得打开 manifest.json 文件,在 mp-weixin 节点增加以下配置。

    "mp-weixin" : {
        "appid" : "xxxx",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "postcss" : false,
            "minified" : true
        },
        "usingComponents" : true,
        "lazyCodeLoading" : "requiredComponents"
    },

做好上边几步,可以开始运行起来。如下图所示 。到此,一个基本的 xr-frame 调用就完成了。

下边来调整样式,使得显示好看一些 。修改 pages/index/index.vue 如下:

<template>
    <xr-tracker disable-scroll :width="renderWidth" :height="renderHeight" :style="style"></xr-tracker>
</template>

<script setup>
    import { ref, computed } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'

    const width = ref(300)
    const height = ref(300)
    const renderWidth = ref(300)
    const renderHeight = ref(300)

    const style = computed(() => {
        return `width:${width.value}px;height:${height.value}px;`
    })

    onLoad(() => {
        const windowInfo = uni.getWindowInfo()
        width.value = windowInfo.windowWidth
        height.value = windowInfo.windowHeight
        renderWidth.value = windowInfo.windowWidth * windowInfo.pixelRatio
        renderHeight.value = windowInfo.windowHeight * windowInfo.pixelRatio
    })
</script>

识图

https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/ar/tracker.html#%E4%BA%8C%E7%BB%B4Marker

https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/ar/#%E4%B8%8D%E5%90%8CAR%E8%BF%BD%E8%B8%AA%E5%99%A8%E7%9A%84%E5%9D%90%E6%A0%87%E7%B3%BB%E5%B7%AE%E5%BC%82

要实现识图过程,得用到 ar 追踪器。使用到的标签有根标签 xr-scene,有资源标签 xr-assets,节点标签 xr-node,还有追踪器标签 xr-ar-tracker。以及 xr-camera 和 xr-light 等。

这里至少需要一张图片url(识别对象),一个模型文件(通常是模型。其他也是可以)。如果涉及到声音,还需要音频文件。为了方便,这里定义三个属性给到外部。

部分代码如下。

<xr-scene ar-system="modes:Marker" bind:ready="handleReady" bind:ar-ready="handleARReady">
    <!-- 资源加载 -->
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="gltf-model" src="{{modelUrl}}" />
  </xr-assets>

  <xr-env env-data="xr-frame-team-workspace-day" />

  <xr-node wx:if="{{arReady}}">
    <xr-ar-tracker mode="Marker" src="{{markerImgUrl}}" bind:ar-tracker-switch="handleTrackerSwitch">
      <xr-gltf position="0 0 0" scale="1 1 1" rotation="-108 -90 90" anim-autoplay model="gltf-model" bind:gltf-loaded="handleGLTFLoaded" />
    </xr-ar-tracker>

    <xr-camera id="camera" node-id="camera" clear-color="0 0 0 0" position="1 1 2" background="ar" is-ar-camera camera-orbit-control/>
  </xr-node>

  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="3" />
  </xr-node>
</xr-scene>

然后修改 index.js 文件,来适配 wxml 文件。比如在识别成功后播放音频。

        handleTrackerSwitch({ detail }) {
            const { value } = detail;
            if (value) {
                console.log("识别成功,展示模型");

                if (this.audioContext) {
                    this.audioContext.play()
                }
            } else {
                console.log("识别失败或 Marker 失去跟踪");
            }
        },

阅读全文 >>

2月 06

https://www.kylinos.cn/

离线安装

  1. 查看系统架构

    uname -p

    根据输出结果(如 x86_64 或 aarch64),方便选择对应的 Docker 离线安装包。

  2. 访问 docker 官网,下载对应的包。 https://download.docker.com/linux/static/stable/
    当前最新版本是 27.5.1。完整下载地址是。https://download.docker.com/linux/static/stable/aarch64/docker-27.5.1.tgz

  3. 将下载好的包先解压到某个目录。比如 /opt 目录下。

    tar -zxvf docker-27.5.1.tgz -C /opt
  4. 将解压好的 Docker 二进制文件移动到 /usr/local/bin 目录下。

    mv /opt/docker/* /usr/local/bin
  5. 配置 Docker 服务。创建并编辑/usr/lib/systemd/system/docker.service文件。

[Unit]
Description=Docker Application Container Engine
Documentation=https://docs.docker.com
After=network-online.target firewalld.service
Wants=network-online.target

[Service]
Type=notify
ExecStart=/usr/local/bin/dockerd
ExecReload=/bin/kill -s HUP $MAINPID
LimitNOFILE=infinity
LimitNPROC=infinity
TimeoutStartSec=0
Delegate=yes
KillMode=process
Restart=on-failure
StartLimitBurst=3
StartLimitInterval=60s

[Install]
WantedBy=multi-user.target
  1. 设置 docker.service 权限,启动,并设置自启动。
chmod +x /usr/lib/systemd/system/docker.service

systemctl daemon-reload
systemctl start docker
systemctl enable docker
  1. 查看 docker 版本
    docker -v

只安装 docker 还不够,还得安装个 docker-compose

安装 docker-compose

  1. 打开下载地址: https://github.com/docker/compose/tags ,根据系统选择对应的版本,下载到 /opt 目录下。
wget wget https://github.com/docker/compose/releases/download/v2.32.4/docker-compose-linux-aarch64
  1. 移动到 /usr/local/bin 下,并设置权限。
v docker-compose-linux-aarch64 /usr/local/bin/docker-compose

chmod +x /usr/local/bin/docker-compose

docker-compose --version

配置镜像源

如果不配置镜像源,国内很难下载到想要的镜像。配置镜像源是很必须的。

mkdir /etc/docker

vim /etc/docker/daemon.json
#内容如下
{
  "registry-mirrors": [
    "https://docker.1ms.run",
    "https://docker.xuanyuan.me"
    ]
}

systemctl daemon-reload
systemctl restart docker

参考:https://cloud.tencent.com/developer/article/2485043

阅读全文 >>

1月 22

The left-hand side of an assignment expression may not be an optional property access.t ts 中,这个报错通常是在给可能为空或undefined的对象赋值引起的。

使用可选链操作符 ?. 来给一个可能为 undefined 的对象赋值也会引起上边这个错误。如:

obj?.name = '123'

?.链式操作符仅用于读取属性或调用方法,而不能用于赋值。

解决方法

  1. 使用 if 判断
if (obj) {
    obj.name = '123'
}
  1. 使用逻辑与操作符 &&

    obj && (obj.name = '123')
  2. 使用非空断言操作符
    如果你确定对象不会是 undefined 或 null,可以使用非空断言操作符(!)

    obj!.name = value

    但这种方法比较危险,因为如果 obj 确实是 undefined 或 null,运行时会抛出错误

阅读全文 >>

1月 10

前端 html 页面中,选择上传视频文件,获取视频文件的长度以及截取封面是个很常见的功能。前端 js 也能实现这个功能。

流程: file -> loadedmetadata(获取视频元信息)->currentTime(定格到视频的位置)->绘制到 canvas->转换成图片

  1. 通过 input(file) 选择文件。
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file

    <div>
    <label class="upload-btn" for="video">
        <span class="text">上传</span>
    </label>
    <input class="hidden" id="video" name="video" type="file" accept="video/mp4" @change="changeVideo" />
    </div>
  2. 获取视频元信息。
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

使用 createObjectURL 创建的URL是一个blob:开头的临时路径,这个路径可以在浏览器中直接访问,访问到的内容就是上传的视频文件。当页面关闭后,此路径也随之失效。

function changeVideo() {
    const fileInput: HTMLInputElement = document.getElementById('video') as HTMLInputElement
    const files: FileList = fileInput?.files as FileList
    const file = files[0]

    const video = document.createElement('video')
    video.src = URL.createObjectURL(file)
    video.addEventListener('loadedmetadata', function () {
        console.log(video.duration)
    })
}
  1. 定格到视频位置

    // 设置视频自动播放
    video.autoplay = true
    // 设置视频播放的时间(方便截图)
    video.currentTime = 1
  2. 绘制 canvas

    const canvas = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext("2d");
    if (ctx) {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // document.body.appendChild(canvas);
    }
  3. 将 canvas 转换成图片

    canvas.toBlob((blob) => {
    if (blob) {
    const url = URL.createObjectURL(blob);
    }
    });

完整的 ts。


interface VideoInfo {
    name: string
    width: number
    height: number
    thumbnail?: string
    duration?: number
}

function getVideoInfo(file: File, maxWidth = 320) {
    return new Promise<VideoInfo>((resolve) => {
        const index = file.name.lastIndexOf('.')
        const name = index > 0 ? file.name.substring(0, index) : ''
        const videoMedia: VideoInfo = {
            name,
            width: 0,
            height: 0
        }

        const video = document.createElement('video')
        video.src = URL.createObjectURL(file)
        video.addEventListener('loadedmetadata', function () {
            videoMedia.width = video.videoWidth
            videoMedia.height = video.videoHeight
            videoMedia.duration = video.duration
        })

        // 监听视频跳转完成事件
        video.addEventListener('seeked', function () {
            // 创建画布并绘制视频帧
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            if (video.videoWidth > maxWidth) {
                canvas.width = maxWidth
                canvas.height = Math.round((maxWidth / video.videoWidth) * this.videoHeight)
            } else {
                canvas.width = video.videoWidth
                canvas.height = video.videoHeight
            }

            if (ctx) {
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
                canvas.toBlob((blob) => {
                    if (blob) {
                        videoMedia.thumbnail = URL.createObjectURL(blob)
                        resolve(videoMedia)
                    } else {
                        resolve(videoMedia)
                    }
                })
            } else {
                resolve(videoMedia)
            }
            // 释放创建的临时URL
            // URL.revokeObjectURL(video.src)
        })

        // 设置视频自动播放
        video.autoplay = true
        // 设置视频播放的时间(方便截图)
        video.currentTime = 1
    })
}

阅读全文 >>

1月 02

局域网内,即使不配置 stun/turn, webrtc 也是能音视频通话。如果在广域网环境,必须得有 turn 服务。那么自己构建一个 turn 服务就很有必要。不过广域网的 webrtc 对带宽的消耗也是很大。

STUN
STUN(Session Traversal Utilities for NAT,NAT 会话穿越应用程序)是一种网络协议,它允许位于NAT(或多重NAT)后的客户端找出自己的公网地址,查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的 Internet 端端口。这些信息被用来在两个同时处于 NAT 路由器之后的主机之间创建 UDP 通信。该协议由 RFC 5389 定义。(提供客户端检测自己的公共 IP 地址和端口)

STUN 并不是每次都能成功的为需要 NAT 通话设备分配 IP 地址的,P2P 在传输媒体流时,使用的本地带宽,在多人视频通话的过程中,通话质量的好坏往往需要根据使用者本地的带宽确定。

TURN
TURN 的全称为 Traversal Using Relays around NAT,是 STUN/RFC5389 的一个拓展,主要添加了 Relay 功能。如果终端在 NAT 之后, 那么在特定的情景下,有可能使得终端无法和其对等端(peer)进行直接的通信,这时就需要公网的服务器作为一个中继, 对来往的数据进行转发。这个转发的协议就被定义为 TURN。

在 STUN 分配公网 IP 失败后,可以通过 TURN 服务器请求公网 IP 地址作为中继地址。这种方式的带宽由服务器端承担,在多人视频聊天的时候,本地带宽压力较小,并且,根据 Google 的说明,TURN 协议可以使用在所有的环境中。(中继流量,当点对点连接不可用时,Coturn 会接管通信。)

ICE 跟 STUN 和 TURN 不一样,ICE 不是一种协议,而是一个框架(Framework),它整合了 STUN 和 TURN。coturn 开源项目集成了 STUN 和 TURN 的功能。

阅读全文 >>

12月 23

要实现前端 js 通过 url 给 unity webgl 传参,可以通过两步来实现。第一步是 unity 调用 js 脚本。第二步是将参数给到 url。

unity webgl 和 js 交互 https://docs.unity3d.com/cn/2018.4/Manual/webgl-interactingwithbrowserscripting.html

这个是从 Unity 5.6 开始,5.6 和以后的版本可以这样使用。

步骤

  1. unity 端在 Assets 文件夹中的 Plugins 文件夹下新建 default.jslib 文件,填入一下代码。
mergeInto(LibraryManager.library, {
  GetURLParam: function(key) {
    var params = new URLSearchParams(window.location.search)
    var returnStr = params.get(key)
    if (returnStr) {
      var bufferSize = lengthBytesUTF8(returnStr) + 1
      var buffer = _malloc(bufferSize)
      stringToUTF8(returnStr, buffer, bufferSize)
      return buffer
    }
    return null
  }
});

如果要返回字符串给 unity 用,必须要经过

      var bufferSize = lengthBytesUTF8(returnStr) + 1
      var buffer = _malloc(bufferSize)
      stringToUTF8(returnStr, buffer, bufferSize)

处理。

  1. unity 调用。
    
    using UnityEngine;
    using System.Runtime.InteropServices;

public class NewBehaviourScript : MonoBehaviour {
[DllImport("__Internal")]
private static extern string GetURLParam(string key);

void Start() {
    string step = GetURLParam("step");
    Debug.Log(step);
}

}

阅读全文 >>