2024年12月

ElMessage不显示的问题

作者: 编程我只用CPP
时间: 2024-12-22
分类: 未分类
评论

问题：使用element-plus的ElMessage插件，触发消息事件页面没有显示。

通过F12发现消息其实是有触发出来的，可以看到消息的element被插入了，并且z-index也正常：

<div id="message_10" class="el-message el-message--error" role="alert" style="top: 16px; z-index: 2012;">
    <p class="el-message__content">消息内容</p>
</div>

问题原因

没有引入element-plus的样式文件导致。样式内容缺失，因此看不到弹窗。

解决方案

在入口处引入样式文件：

import 'element-plus/dist/index.css'

使用Lodash防抖

作者: 编程我只用CPP
时间: 2024-12-21
分类: 编程语言
评论

一、防抖技术

防抖是一种编程技术，用于限制某个函数在短时间内被频繁调用的次数。具体来说，当一个函数被触发时，防抖会确保该函数在指定的延迟时间内只执行一次。如果在延迟时间内再次触发该函数，计时器会被重置，重新开始计算延迟时间。

这在处理高频率事件（如窗口调整大小、输入框输入、拖动操作等）时非常有用，可以避免因频繁触发事件而导致的性能问题。

Lodash

Lodash 是一个流行的 JavaScript 工具库，提供了许多实用的函数，包括 debounce。以下是如何使用 Lodash 的 debounce 来优化你的前端代码。

二、使用Lodash

2.1 安装 Lodash

如果你的项目中还没有安装 Lodash，可以使用 npm 或 yarn 进行安装：

npm install lodash
pnpm install lodash

或者

yarn add lodash

2.2 引入debounce

在需要使用防抖功能的组件中引入 debounce：

import { debounce } from 'lodash';

2.3 创建防抖函数

使用 debounce 包装你需要限制执行频率的函数。例如，在你的 CanvasComponent 中：

const saveGraphicsData = debounce((data) => {
  // 这里执行保存图形数据的逻辑
  console.log('Saving graphics data:', data);
  // 例如：调用API保存数据
}, 200); // 200毫秒的延迟

解释：

saveGraphicsData 是经过防抖处理的函数。
当 saveGraphicsData 被调用时，它不会立即执行，而是等待 200 毫秒。
如果在这 200 毫秒内再次调用 saveGraphicsData，计时器会被重置，重新开始等待 200 毫秒。
只有当 200 毫秒内没有新的调用时，saveGraphicsData 才会真正执行。

2.4 绑定事件处理

在你的事件处理函数中调用防抖函数：

const handleChange = (event) => {
  const data = event.target.value; // 根据实际情况获取数据
  saveGraphicsData(data);
};

解释：

每当 onChange 事件被触发时，handleChange 函数会被调用。
handleChange 调用 saveGraphicsData，但由于 saveGraphicsData 是防抖函数，实际的保存操作会被延迟执行。

2.5 清理防抖函数

为了避免内存泄漏，需要在组件卸载时取消防抖函数的计时器：

useEffect(() => {
  return () => {
    saveGraphicsData.cancel();
  };
}, []);

解释：

useEffect 的返回函数会在组件卸载时执行。
saveGraphicsData.cancel() 会取消任何未执行的防抖计时器，确保不会有残留的回调函数在组件卸载后执行。

2.6 完整示例

import { useEffect, useRef } from 'react';
import { debounce } from 'lodash';

const CanvasComponent = () => {
  const canvasRef = useRef(null);
  const saveGraphicsData = useRef(null);

  // 创建防抖函数
  saveGraphicsData.current = debounce((data) => {
    console.log('Saving graphics data:', data);
    // 实际保存数据的逻辑
  }, 200);

  const handleChange = (event) => {
    const data = event.target.value; // 根据实际情况获取数据
    saveGraphicsData.current(data);
  };

  useEffect(() => {
    return () => {
      // 清理防抖函数
      saveGraphicsData.current.cancel();
    };
  }, []);

  return (
    <canvas ref={canvasRef} onChange={handleChange}>
      {/* Canvas 内容 */}
    </canvas>
  );
};

export default CanvasComponent;

三、ES语法问题

Lodash是一个比较古早的开源库，当时的代码规范和当前已经有所不同，因此在使用了es的项目中引入lodash会报错。

解决方案：使用lodash-es

pnpm install lodash-es @types/lodash-es

Code Server服务部署

作者: 编程我只用CPP
时间: 2024-12-04
分类: 编程语言
评论

安装

脚本一键安装

境外的服务器可以使用脚本一键安装：

curl -L https://coder.com/install.sh | sh

手动安装

官方的安装脚本下载太慢了，直接手动下载rpm安装：

wget https://file.outman.icu/software/code-server-4.22.1-amd64.rpm  --no-check-certificate
sudo rpm -ivh code-server-4.22.1-amd64.rpm

启动服务

启动服务：

sudo systemctl enable --now code-server@$USER

启动后默认监听localhost:8080，初始密码以及配置默认放在cat ~/.config/code-server/config.yaml：

bind-addr: 127.0.0.1:8080
auth: password
password: *********************
cert: false

配置

nginx反向代理

反响代理的配置需要注意添加web socket转发以及host头部的转发：

proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;

登录页隐藏配置文件路径

在默认的登录页，会把密码所在的配置文件打印出来：

存在安全风险，需要去掉。修改/usr/lib/code-server/src/browser/pages/login.html文件，找到：

<div class="sub">{{I18N_LOGIN_BELOW}} {{PASSWORD_MSG}}</div>

删除其中的{{PASSWORD_MSG}}。