该后台使用 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 （如果发现登录不了，可一键复位谢谢）
房间传送门2： https://www.mlxiu.com/room/70188
https://github.com/link1st/go-stress-testing
如果没有环境可以去下作者编译好的： https://github.com/link1st/go-stress-testing/releases
go clone https://github.com/link1st/go-stress-testing.git
cd go-stress-testing
go build执行测试：
.\go-stress-testing.exe -c 10 -n 10 -u https://www.baidu.com返回结果：
https://cloud.tencent.com/developer/article/1509809
https://github.com/adjust/go-wrk
自身系统有 go 环境。
git clone https://github.com/adjust/go-wrk.git
cd go-wrk
go mod init go-wrk
go build执行测试。
./go-wrk [flags] url例子：
./go-wrk -c=400 -t=8 -n=100000 http://localhost:8080/index.html -H="User-Agent: go-wrk 0.1 bechmark\nContent-Type: text/html;": the http headers sent separated by '\n'
-c=100: the max numbers of connections used
-k=true: if keep-alives are disabled
-i=false: if TLS security checks are disabled
-m="GET": the http request method
-n=1000: the total number of calls processed
-t=1: the numbers of threads used
-b="" the http request body
-s="" if specified, it counts how often the searched string s is contained in the responses长期维护，国内镜像。请访问 https://cloud.tencent.com/developer/article/2485043
# 打开或新建 daemon.json
vim /etc/docker/daemon.json
# 加入一下配置
{
"registry-mirrors": [
"https://docker.1ms.run",
"https://docker.xuanyuan.me"
]
}
# 重启
sudo systemctl daemon-reload
sudo systemctl restart dockerdocker 备份数据库
/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'
chmod +x /user/local/src/backup/mysql-backup.shcrontab -e
#每天凌晨 2 点启动定时任务
0 2 * * * bash /user/local/src/backup/mysql-backup.sh >> /user/local/src/backup/logs/backup_$(date +\%Y\%m\%d).log 2>&1win10怎么查看连接过的wifi的密码，win11怎么查看连接过的wifi的密码。
netsh wlan show profiles 回车，显示曾经连接过的 wifi 列表。netsh wlan show profile name="大疆无人机" key=clear 回车，显示某个 wifi 的具体信息。大疆无人机 为某个 wifi 名，展示的具体信息的安全设置的关键内容对应的就是该 wifi 密码。https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/overview/#%E6%A6%82%E8%BF%B0
基于xr-frame实现微信小程序的图片扫描识别AR功能，通过编写节点就能完成。这里使用 uniapp 构建。
{
"component": true,
"renderer": "xr-frame",
"usingComponents": {}
}<xr-scene>
<xr-camera id="camera" clear-color="0.2 0.4 0.6 1" camera-orbit-control/>
</xr-scene>Component({
properties: {
},
data:{
},
lifetimes: {
},
methods: {
}
})这里直接在默认的 pages/index/index.vue 中修改。内容如下。
<template>
<xr-tracker></xr-tracker>
</template>修改 pages.json,将微信小程序组件引入进来。
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
// #ifdef MP-WEIXIN
"usingComponents": {
"xr-tracker": "/wxcomponents/xrtracker/index"
}
// #endif
}还得打开 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>要实现识图过程，得用到 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 失去跟踪");
}
},查看系统架构
uname -p根据输出结果（如 x86_64 或 aarch64），方便选择对应的 Docker 离线安装包。
访问 docker 官网，下载对应的包。 https://download.docker.com/linux/static/stable/
当前最新版本是 27.5.1。完整下载地址是。https://download.docker.com/linux/static/stable/aarch64/docker-27.5.1.tgz
将下载好的包先解压到某个目录。比如 /opt 目录下。
tar -zxvf docker-27.5.1.tgz -C /opt将解压好的 Docker 二进制文件移动到 /usr/local/bin 目录下。
mv /opt/docker/* /usr/local/bin配置 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.targetchmod +x /usr/lib/systemd/system/docker.service
systemctl daemon-reload
systemctl start docker
systemctl enable dockerdocker -v只安装 docker 还不够，还得安装个 docker-compose
wget wget https://github.com/docker/compose/releases/download/v2.32.4/docker-compose-linux-aarch64v 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 dockerThe left-hand side of an assignment expression may not be an optional property access.t 报错处理
The left-hand side of an assignment expression may not be an optional property access.t ts 中，这个报错通常是在给可能为空或undefined的对象赋值引起的。
使用可选链操作符 ?. 来给一个可能为 undefined 的对象赋值也会引起上边这个错误。如：
obj?.name = '123'?.链式操作符仅用于读取属性或调用方法，而不能用于赋值。
if (obj) {
obj.name = '123'
}使用逻辑与操作符 &&
obj && (obj.name = '123')使用非空断言操作符
如果你确定对象不会是 undefined 或 null，可以使用非空断言操作符（!）
obj!.name = value但这种方法比较危险，因为如果 obj 确实是 undefined 或 null，运行时会抛出错误
前端 html 页面中，选择上传视频文件，获取视频文件的长度以及截取封面是个很常见的功能。前端 js 也能实现这个功能。
流程： file -> loadedmetadata(获取视频元信息)->currentTime(定格到视频的位置)->绘制到 canvas->转换成图片
通过 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>获取视频元信息。
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)
})
}定格到视频位置
// 设置视频自动播放
video.autoplay = true
// 设置视频播放的时间(方便截图)
video.currentTime = 1绘制 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);
}将 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
})
}局域网内，即使不配置 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 的功能。