安陌乐轩

服务器安装宝塔面板后SSH连接失败

Wed, 15 Oct 2025 00:00:00 GMT

问题原因

SSH服务依赖的OpenSSL库版本与编译时使用的版本不一致，这通常发生在系统更新后。

解决方案

方案1：重新安装SSH服务（推荐）

# 备份当前SSH配置
cp -r /etc/ssh /etc/ssh_backup

# 重新安装OpenSSH服务端
# 对于CentOS/RHEL：
yum remove openssh-server -y && yum install openssh-server -y

# 对于Ubuntu/Debian：
apt remove openssh-server -y && apt install openssh-server -y

方案2：重新配置并重建SSH

# 重新生成SSH主机密钥
rm -f /etc/ssh/ssh_host_*
ssh-keygen -A

# 重启SSH服务
systemctl restart sshd

方案3：检查OpenSSL版本并修复

# 检查当前OpenSSL版本
openssl version

# 检查SSH依赖的OpenSSL库
ldd /usr/sbin/sshd | grep ssl

# 重新安装OpenSSL（谨慎操作）
# CentOS/RHEL：
yum reinstall openssl openssl-libs -y

# Ubuntu/Debian：
apt reinstall openssl libssl-dev -y

完整修复步骤

# 1. 停止SSH服务
systemctl stop sshd

# 2. 重新安装SSH服务（选择适合你系统的命令）
# CentOS/RHEL:
yum remove openssh-server -y
yum install openssh-server -y

# Ubuntu/Debian:
apt remove openssh-server -y
apt install openssh-server -y

# 3. 恢复配置文件（使用你之前修改的配置）
# 将之前备份的配置复制回来，或者重新配置关键参数
cp /etc/ssh_backup/sshd_config /etc/ssh/sshd_config

# 4. 确保关键配置正确（参考之前的修改）
# Port 26508
# PermitRootLogin yes
# PasswordAuthentication yes
# PubkeyAuthentication yes
# UsePAM yes

# 5. 重新生成主机密钥
ssh-keygen -A

# 6. 启动SSH服务
systemctl start sshd
systemctl enable sshd

# 7. 检查状态
systemctl status sshd

如果上述方法都不行

方案4：使用包管理器修复依赖

# 对于yum系系统
yum clean all
yum update
yum reinstall openssh-server openssh-clients

# 对于apt系系统
apt update
apt --fix-broken install
apt reinstall openssh-server openssh-client

方案5：编译安装最新版本（最后手段）

# 下载最新OpenSSH源码编译
cd /tmp
wget https://cdn.openbsd.org/pub/OpenBSD/OpenSSH/portable/openssh-9.5p1.tar.gz
tar -xzf openssh-9.5p1.tar.gz
cd openssh-9.5p1
./configure
make && make install

验证修复

修复后检查：

# 检查SSH服务状态
systemctl status sshd

# 检查端口监听
netstat -tlnp | grep 26508

# 测试本地连接
ssh -p 26508 localhost

重要提醒

操作前确保宝塔终端可用，因为重新安装SSH会暂时中断服务
备份现有配置，避免丢失自定义设置
修复后测试连接：ssh -p 26508 root@你的服务器IP

uniapp中在app端获取视频第一帧作为封面

Sun, 05 Oct 2025 00:00:00 GMT

类似微信视频消息

需要在播放视频之前展示缩略图，因为app端没有dom，这里需要用到renderjs，通过创建video标签，然后通过canvas绘制图片的方式。传入的url最好是base64格式，因为在浏览器中，由于安全限制，JavaScript无法直接访问本地文件系统路径（如file:///或_doc/...这样的路径），如果是网络格式的url则可以直接传入，下面是完整代码示例。

使用:

<VideoGetPoster :videoUrl="content" @change="changeGetPoster"></VideoGetPoster>

组件内部：

<template>
    <view v-if="base64" :src="base64" :change:src="video.setPoster"></view>
</template>

<script>
    export default {
        name:"video-get-poster",
        props: {
            videoUrl: {
            type: String,
            require: true
        }
    },
    data() {
        return {
            base64: ''
        };
    },
    mounted() {
        this.$tools.pathToBase64App(this.videoUrl, (base64) => {
            this.base64 = base64
        })
    },
    methods: {
        getPoster(poster) {
            this.$emit('change', poster)
        }
    }
}
</script>

<script lang="renderjs" module="video">
    export default {
    methods: {
    setPoster(newV, oldV, ownerInstance) {
    let video = document.createElement("video");
    video.muted = true
    // 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图  
    video.autoplay = true;
    //允许跨域访问  
    video.crossOrigin = 'anonymous';
    // 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源  
    video.innerHTML = '<source src=' + newV + ' type="video/mp4">'
    // loadeddata 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。
    video.addEventListener('loadeddata', function() {
    let canvas = document.createElement("canvas"),
    width = video.videoWidth, //canvas的尺寸和图片一样
    height = video.videoHeight;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
    let poster = canvas.toDataURL('image/jpeg'); //转换为base64
    ownerInstance.callMethod('getPoster', poster)
});
}
}
}
</script>

本地文件路径转base64：

/**  
 * 文件转成base64字符串
 * @param {String} path // 文件地址
 * @param {Object} callback  // 返回base64字符串
 */
export function pathToBase64App(path, callback) {
	// 通过URL参数获取目录对象或文件对象
	 plus.io.resolveLocalFileSystemURL(path, function(entry) {
		 entry.file(function(file) {
			 var fileReader = new plus.io.FileReader()
			 fileReader.onload = function(evt) {
				 callback(evt.target.result)
			 }
			 fileReader.onerror = function(error) {
				console.log('failed: ', error);
			 }
			 fileReader.readAsDataURL(file)
		 }, function(error) {
			 console.log('failed: ', error);
		 })
	 }, function(error) {
		console.log('failed: ', error);
	 })
}

vue3富文本编辑组件

Tue, 23 Sep 2025 00:00:00 GMT

下载：

npm install @wangeditor/editor @wangeditor/editor-for-vue@next

使用：

<template>
    <div class="tool-bar">
        <!-- 工具栏 -->
        <Toolbar
            class="tool-style"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
            class="content"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            @onCreated="handleCreated"
        />
    </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef} from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const editorRef = shallowRef()
const toolbarConfig= ref()
// 内容 HTML
const valueHtml = ref('<p></p>')
 
// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: { /* 菜单配置，下文解释 */ }
}
 
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
 
// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>

vite+vue3+electron项目搭建教程

Fri, 02 May 2025 00:00:00 GMT

一、使用vite创建vue项目

在自己的项目文件夹下打开终端，输入以下命令创建vue项目

npm create vite@latest

是否需要使用TS看自己的需求，为了方便我这里就选用JS了

# 进入文件夹
cd <你的项目名称>

# 安装依赖
npm install

二、安装electron

在项目中下载electron下载命令：

# 如果安装失败建议使用cnpm，至于cnpm怎么安装使用，请自行搜索
npm install electron -D

定义入口文件

因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。
手动在vue项目中的根目录创建文件
然后在 <span style="color:red">package.json</span> 中修改人口文件

{
  "main": "electron/main/main.js"
}

因为vue项目默认采用的是ES6的模块化，而electron基于nodejs，nodejs的模块化又是使用的commonjs，所以我们在 <span style="color:red">package.json</span> 中的type标签，修改为：

{
  "type": "commonjs"
}

三、运行electron项目

在自己创建的electron文件夹下的main.js文件里写入这段代码

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })

    win.loadURL('http://localhost:5173')
    // win.loadFile('index.html')

}
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

这段代码的大概意思就是创建了一个窗口，然后窗口里展示的内容就是一个网页，这里写的URL可以是本地地址也可以是线上地址，比如你写个http://www.baidu.com这样运行过后就是百度的客户端了，聪明的小伙伴应该知道我这里写http://localhost:5173的含义了吧

运行项目

在终端中依次执行以下命令

# 启动vue项目
npm run dev

# 启动electron，这里的命令是electron官方指定的
npx electron .

到这里就能看到vue项目成功的启动在一个桌面端应用程序了

四、完善必备的工具

以上集成方案是很原始的，在真实的项目开发中肯定是不可取的

缺点：

第一：没有热刷新
第二：每次启动都需要执行两个命令
第三：打包后页面丢失
下面的步骤就是来解决这几个问题的

热更新工具

安装：

npm install nodemon -D

重新更改scripts标签的启动命令，监控文件改变，代码如下：

{
  "scripts": {
     "electron": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
  }
}

这个参数的含义是：用nodemon启动electron，并监控js、html、css、vue等文件的变动。

命令行合并工具现在开发环境，每次都需要执行“npm run dev”和“npx electron .”两个命令才能启动项目。所以我们希望能够有一个命令可以同时执行vue和electron。

安装：

npm install npm-run-all -D

这个工具只需要在package.json中scripts标签增加命令：

{
  "scripts": {
    "electron:dev": "npm-run-all --parallel dev electron"
  }
}

这时候运行

npm run electron:dev

打包工具

安装：

npm install electron-builder -D

配置electron-builder：
在scriptes标签里面增加命令：

{
  "scripts": {
    "electron:build": "vite build && electron-builder"
  }
}

打包配置

打包配置 package.json文件中增加配置

{
  "build": {
    "productName": "electron-vue",
    "appId": "electron-vue",
    "asar": true,
    "directories": {
      "output": "dist_electron/${version}"
    },
    "files": [
      "dist",
      "electron"
    ],
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "mac": {
      "category": "your.app.category.type"
    },
    "win": {
      "icon": "./electron/log.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {}
  }
}

这是打包的一个最基础的配置，简单讲解：

productName：// 项目名，也是生成的安装文件名
appId：软件的ID，用来上架各平台。
nsis：软件安装包的交互行为，配置稍多，请自行查询。
win.icon：// 应用图标
win.target.arch：建议设置ia32，适配windows大部分版本。

更详细的说明可以查阅官方文档

这时候就可以运行新加的命令打包了，但是打包过后还是发现页面是空白的，这是因为之前我们在main.js里面填写的是本地址http://localhost:5173，打包过后就没有这个地址了，所以我们要把地址换成 ../dist/index.html，这样就可以了

最后还需要配置以下vite，让vite打包后的静态资源能够以本地file协议访问。vite配置属于前端知识点了，有兴趣的同学可以自行了解下。
vite.config.js的配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

export default defineConfig({
  plugins: [vue()],
  base:'./',
  manifest:true,  //配置后才能让编译后的vue路径被正确识别
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  optimizeDeps: {
    exclude: ['electron'], // 告诉 Vite 排除预构建 electron，不然会出现 __diranme is not defined
  }
})

补充说明：

每次打包前都需要手动更改页面路径会显得很麻烦，所以可以利用electron提供的一个属性判断当前是开发环境还是生产环境，以下是详细代码

const { app } = require('electron')
const {join} = require('path')

// 映射页面
const env = app.isPackaged ? 'production' : 'development'
const indexHtml = {
    development: 'http://localhost:5173', // 开发环境
    production: join(__dirname, '../dist/index.html') // 生产环境
}
win.loadURL(indexHtml[env])

ctrl + shift + i 打开控制台调试工具

使用fetch流式获取响应数据

Thu, 13 Mar 2025 00:00:00 GMT

前言简介：

流式获取一般在用于数据量比较大的情况，一次性返回会导致前端页面加载时间过长或者请求超时等问题，这时候我们就可以考虑使用流式的方式拿到部分数据并先展示，从而提升用户体验。我这里的场景是在对接chatGPT语言模型的时候采取的这种方案，因为目前的大语言的模型的结果都是需要一点点计算的，如果提出的问题比较复杂就导致响应的时间过长。

这里我们采用浏览器原生的fetchAP来实现

fetch('<请求地址>', {
    method: 'POST', // 请求方法
    headers: {
        "Content-Type": "application/json",  // 请求头
        Authorization: token // 校验令牌，根据自己的服务器需求传
    },
    body: JSON.stringify({  // 请求体
        prompt: [{role: 'user', content: data}],
        incremental: true
    })
}).then(async result => {
    const reader = result.body.getReader() // 创建读取器
    const textDecoder = new TextDecoder() // 创建解码器
    while(true){  // 循环读取内容
        /* 读取其中一部分内容 done 是否读取完成， value 读取到的内容 */
        const {done, value} = await reader.read()
        if(done){
            return
        }
        const str = textDecoder.decode(value) // 利用解码器把数据解析成字符串
        console.log(str) // 这时候str就是服务器返回的内容
    }
})

使用post请求建立长连接实现sse

Thu, 13 Mar 2025 00:00:00 GMT

最近遇到一个chatGPT的相关功能，需要做成文字一个个弹出的功能，如果使用普通的http请求会一次性得到结果，如果后台计算时间太长还可能会导致超时，影响用户体验。
所以使用长连接SSE(Server Sent Event)，直译为服务器发送事件，顾名思义，也就是客户端可以获取到服务器发送的事件。我们常见的 http 交互方式是客户端发起请求，服务端响应，然后一次请求完毕；但是在 sse 的场景下，客户端发起请求，连接一直保持，服务端有数据就可以返回数据给客户端，这个返回可以是多次间隔的方式。
但是问题是原生的EventSource 不能使用post方法，只能使用get方法，而且还不能自定义请求header，所以我们可以使用npm包：@microsoft/fetch-event-source

npm i @microsoft/fetch-event-source

import {fetchEventSource} from '@microsoft/fetch-event-source';

const controller = new AbortController()
const signal = controller.signal

fetchEventSource('请求的url', {
	method: 'POST',
	signal: signal,
	headers: {
        /* 请求头配置 */
    },
	body: JSON.stringify({
        /* 发送的内容 */
    }),
	onmessage(msg) {
        let result= JSON.parse(msg.data);  // 得到的数据
    },
	onerror(err){
        // 必须抛出错误才会停止
        throw err
    }
})

html中资源修饰符的用法及作用

Sat, 28 Dec 2024 00:00:00 GMT

async（script标签布尔属性）

异步加载js文件，不阻塞html解析，当js加载完毕后，停止解析html，立即执行js，执行完毕后继续解析html

<script async src="js/index.js"></script>

defer（script标签布尔属性）

html解析完成后在执行js，类似于DOMContentLoaded事件

<script defer src="js/index.js"></script>

reload（link标签rel属性）

预先加载资源（任意资源），不执行任何操作，一般用来缓存时用，其它地方使用这个资源的时候就不会再次发送请求了

<link rel="preload" href="css/index.css">
<link rel="preload" href="js/index.js">
<link rel="preload" href="img/home-bg.png">

prefetch（link标签rel属性）

跟preload类似，只是拿取的时机不一致，preload是页面加载时立即获取，而prefetch是当浏览器空闲的时候获取

<link rel="prefetch" href="css/index.css">
<link rel="prefetch" href="js/index.js">
<link rel="prefetch" href="img/home-bg.png">

WebSocket使用及优化（心跳机制与断线重连）

Fri, 22 Nov 2024 00:00:00 GMT

WebSocket在2008年被提出，其通信协议于2011被制定为标准与http不同，websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接然而，这么做无疑会对服务端造成资源消耗，因为HTTP请求包含较长的头文件，只传递了少许的有用信息，十分消耗资源。
于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。

const socketURL = 'ws://xxxx.com/' // 连接地址
let ws = null    // websocket实例
let lockReconnect = false; // websocket连接状态，避免重复连接
let reconnectTimer = 2000  // 断开后2s自动重连

function setWebsocket() {
  ws = new WebSocket(socketURL)
  ws.addEventListener('open', () => {
    alert('服务连接成功');
  })
  ws.addEventListener('close', () => {
    alert('服务已断开');
    reconnect()
  })
  ws.addEventListener('error', () => {
    alert('服务发生异常');
    reconnect()
  })
  ws.addEventListener('message', event => {
    alert('收到消息：', event.data)
  })
}

// 重连
function reconnect() {
  if (lockReconnect) return;
  lockReconnect = true;
  setTimeout(function () {
    setWebsocket();
    lockReconnect = false;
  }, reconnectTimer);
}

// 页面关闭断开socket连接
window.onbeforeunload = function() {
  ws.close()
  return;
}

// 向外暴露
export {
    ws
}

JS监听页面关闭

Thu, 05 Sep 2024 00:00:00 GMT

JS可以监听浏览器页面的关闭，主要使用了window对象的onbeforeunload方法

在以前（旧版本的浏览器中），可以自定义提示文案

window.onbeforeunload = function (e) {
    var message = 'some word';
    e = e || window.event;

    if (e) {
        e.returnValue = message;
    }

    return message;
}

但在新版本的浏览器中，为了安全性，已经不支持自定义弹窗
能做的，只是调用浏览器自带的提示确认窗格

 window.onbeforeunload = function(e) {
    console.log('beforeunload')

    /** 只有以下情况不会弹出确认窗格
      * 不return
      * return;
      * return undefined;
      * return null;
      */
    
    /** 其他任意值都会弹出
      * return '';
      * return false;
      * return 0;
      * return 1; 
      * .......
      */


    return 1;
 }

关于uniapp不同平台下100vh单位的区别

Mon, 15 Jan 2024 00:00:00 GMT

uni-app带来了诸多方便也带来各平台之间的差异。

在H5端css属性height: 100vh是相对于整个浏览器视口高度；
非H5平台则是减掉原生导航栏和原生tabbar的高度，因此会造成H5端出现垂直滚动条，非H5平台则正常显示的问题。解决方案: 利用uniapp提供的条件编译，H5端使用100vh - 44px(原生导航栏高度)- 50px(原生tabBar高度)，非H5平台端则直接使用100vh即可。

.page{
    // #ifndef APP-PLUS
	height: calc(100vh - 44px - 50px); // 非APP平台下生效
	// #endif
	// #ifdef APP-PLUS
	height: calc(100vh);    // APP平台下生效
	// #endif
	background-color: #ededed;
}