JavaScript API：深入了解 FileReader 对象：使用示例、属性、方法和事件详解

简介FileReader 对象提供了读取文件内容的，它允许网页通过异步方式读取用户计算机上的文件内容。属性error在读取文件的过程中发生错误时，该属性包含一个错误对象。readyState表示 FileReader 状态的数字，表示以下值之一：0 (EMPTY)：尚未初始化。1 (LOADING)：正在读取。2 (DONE)：已完成读取。result返回读取文件的 ArrayBuffer、Blob、DataURL 或 Text 格式。方法abort()取消读取操作。在返回时，readyState 属性为 DONE。readAsArrayBuffer(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中就包含一个 ArrayBuffer 对象。readAsBinaryString(blob) 【已弃用】开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据。readAsDataURL(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串

nestjs安装@nestx-log4js/core时报错

报错信息：npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: nest-app@0.0.1 npm ERR! Found: @nestjs/common@10.3.3 npm ERR! node_modules/@nestjs/common npm ERR! @nestjs/common@"^10.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @nestjs/common@"^7.0.0" from @nestx-log4js/core@1.5.1 npm ERR! node_modules/@nestx-log4js/core npm ERR! @nestx-log4js/core@"*" from the root pr

vue3实现对textarea组件光标聚焦

在写个人小demo时需要使用到一种效果就是一开始为 input 框，当用户点击时变化为 textarea 并光标能够进行聚焦。通过 ref 来获取 textarea 组件，并使用 focus() 事件来对文本框进行光标的聚焦。<template> <NInput v-model:value="desc" v-if="!isFocusDesc" @focus="handleFocusDesc"/> <NInput v-model:value="desc" type="textarea" v-else ref="textarea" @blur="isFocusDesc = false"/> </template> <script setup> import {ref, nextTick} from 'vue' import {NInput} from 'naive-ui' let d

css 属性：inset

作用inset 属性结合了 top, right, bottom, left 四个方向上的值，使得设置元素位置更为简洁和方便。使用inset 属性可以接受一个至四个值，分别代表 top, right, bottom, left 四个方向上的偏移量，顺序为顺时针顺序。例如：.element { inset: 10px; /* 上右下左均偏移 10 像素 */ } .element { inset: 10px 20px; /* 上下偏移 10 像素，左右偏移 20 像素 */ } .element { inset: 10px 20px 30px; /* 上偏移 10 像素，左右偏移 20 像素，下偏移 30 像素 */ } .element { inset: 10px 20px 30px 40px; /* 上偏移 10 働素，右偏移 20 像素，下偏移 30 働素，左偏移 40 働素 */ }注意事项如果只提供一个值，将应用到所有四个方向，相当于 top, right, bottom, left 均设置为这个值。如果提供两个值，第一个值应用于 top 和 bottom

磁盘爆满导致网站访问缓慢和数据库停止工作的解决方法

在访问自己的站点时发现访问速度缓慢，刚开始以为是网络问题，当再次访问时发现连数据库都无法进行访问了，还以为是受到攻击了。当我急忙的登录宝塔查看时才知道是磁盘爆满了，由于磁盘爆满导致数据库被停止了。通过 df -h 查看磁盘使用情况，这里是已经清理过之后的了，在没清理前 /dev/vda1 使用率已经达到百分之九十多。 我们可以通过 du -sh * 命令查看当前目录下的文件磁盘使用情况。这里可以看到 /www 目录的使用量是最大的，我们进入 /www 目录下查看具体情况。（这也是清理后的，在没清理前为百分之四五十）这里可以看到主要是 /www/backup/panel 目录里面占用情况是最大的。那么 /www/backup/panel 目录里存放的文件是做什么的呢？/www/backup/panel 目录下的文件存放的都是宝塔面板的备份文件，宝塔面板每天会自动生成备份文件将其存放在 /www/backup/panel 目录下并以时间进行命令。知道了 /www/backup/panel 目录是干什么的了之后，就知道了，只要将 /www/backup/panel 目录下的文件删除就可以了

python 在宝塔控制面板中部署定时任务

在项目下创建虚拟环境$ pip -m vevn venv在虚拟环境中安装依赖，如上目录：$ /home/messageGrab/venv/bin/pip install -r requirements.txt如果使用python项目管理器来设置，由于python项目管理器在2.0版本之后搭建的 md5_venv 虚拟环境中不会生成 activate 文件了，所以需要手动创建一个虚拟环境安装好后，在计划任务中设置cd /home/messageGrab source venv/bin/activate python3 main.pycd /home/messageGrab source venv/bin/activate venv/bin/python main.pypython3 main.py 是运行 py 文件，不一定大家的都是 python3，py 文件也要按实际情况来 参考文件：https://blog.csdn.net/weixin_43575792/article/details/124838204https://blog.csdn.net/sincala/article/

python 创建虚拟环境

在 Python 开发中，虚拟环境（Virtual Environment）是一个非常重要的工具。它可以创建独立的 Python 运行环境，避免不同项目之间的依赖冲突。什么是 Python 虚拟环境？Python 虚拟环境是一个独立的目录，其中包含特定版本的 Python 解释器以及项目所需的第三方库。通过虚拟环境，开发者可以为每个项目创建一个隔离的环境，确保项目的依赖不会与其他项目冲突。例如，项目 A 需要 Django 3.2，而项目 B 需要 Django 4.0。如果没有虚拟环境，这两个项目将无法在同一台机器上共存。而使用虚拟环境，可以为每个项目单独安装所需的依赖，互不干扰。为什么需要虚拟环境？依赖隔离不同项目可能需要不同版本的库，虚拟环境可以避免全局安装的库产生冲突。环境一致性虚拟环境可以确保开发环境与生产环境一致，避免“在我机器上能运行”的问题。便于协作通过虚拟环境，可以轻松地分享项目的依赖列表，确保团队成员使用相同的开发环境。避免污染全局环境直接在系统全局安装 Python 库可能会导致系统 Python 环境混乱，虚拟环境可以避免这一问题。使用 Python 虚拟环境P

pip：Python 包管理工具的基础知识与使用方法

简介pip 是 Python 官方推荐的包管理工具，它为开发者提供了一种方便、快捷的方式来安装、升级和管理 Python 包。pip 可以从 Python Package Index（PyPI）上搜索并获取众多开源的 Python 包，大大简化了依赖包的管理问题。pip 的基本操作安装 pip在大多数现代的 Python 发行版中，pip 已经默认安装，你可以通过以下命令来检查它是否已安装：$ pip --version如果能成功输出版本号，表示 pip 已经安装并且准备就绪。如果 pip 未安装，你可以使用以下命令来安装它（根据你的操作系统可能会有所不同）：# 在 Linux/macOS 上 $ sudo apt-get install python3-pip # 在 Windows 上 $ py -m ensurepip --upgrade --default-pip搜索包使用 pip 可以轻松地搜索 Python 包。你可以使用以下命令来搜索特定的包：$ pip search [package_name]这将返回与包名称相关的列表，并显示一些基本信息，如包的名称、描述和最新版本

Fiddler教程：学习如何使用这款功能强大的网络调试工具

介绍fiddler 是一款 HTTP 协议调试代理工具，它能够抓取记录本机所有 HTTP(S) 请求。其运行机制其实就是本机 127.0.0.1 上监听 8888 端口库的 HTTP 代理。fiddler 无论对开发人员或者测试人员来说，都是非常有用的工具。工作原理Fiddler 工作原理_fiddler的实现原理-CSDN博客Fiddler 工作原理及界面简介_fidder的工作原理-CSDN博客fiddler 基本配置fiddler 在没有配置之前是不可以抓取 HTTPS 的包的。按照以下进行配置Tools -> HTTPS -> Decrypt HTTPS traffic。勾选后会弹出安装证书提示，根据提示进行安装即可。Tools -> Telerik Fiddler Options -> Connections。重启 fiddlerfiddler 抓取 IE 浏览器 fiddler 都可以进行数据抓取，但是使用其他的浏览器 fiddler 可能会抓取不到数据，需要而外设置代理。设置过滤右侧窗口拥有一个 filters，勾上 Use Filters 进行启

创建响应式网页：使用JavaScript进行设备检测和跳转

在当前移动互联网时代，用户访问网站已经成为了多平台多设备混合的环境。因此，为了提供更好的用户体验，许多网站会根据用户设备和屏幕尺寸的不同，在 PC 端和移动端之间进行自动跳转。本文将介绍如何使用 JavaScript 来检测用户设备和尺寸，并根据检测结果进行相应的跳转。1.使用 navigator.userAgent 检测用户设备类型：使用 navigator.userAgent 属性可以获取用户浏览器提供的标识字符串，从而判断用户设备类型。例如，可以检测是否包含 “Mobile” 字符串来判断是否是移动设备。示例代码：function isMobileDevice() { return /Mobile/.test(navigator.userAgent); }2.使用 window.innerWidth 和 window.innerHeight 检测屏幕尺寸：使用 window.innerWidth 和 window.innerHeight 属性可以获取用户屏幕的可见宽度和高度，从而判断屏幕尺寸。例如，可以判断可见宽度是否小于某个阈值来判断是否是移动设备。示例代码：functio

探索HTML链接关系：理解rel属性的作用

当我们在浏览网页时，经常会遇到一些链接，它们不仅仅是普通的超链接，还会带有一些指定特殊关系的属性。这些属性被称为“链接关系”或“rel属性”，通过它们可以实现不同网页之间的联系和交互。在这里，我们就来学习一下常见的链接关系及其作用。rel="canonical"首先来介绍一种非常常见的链接关系——rel="canonical"。顾名思义，它表示当前页面的规范链接。具体来讲，当网站上有多个页面的内容非常相似或重复时，rel="canonical" 可以标明哪个页面是原始版本，其他页面应该被认为是这个页面的副本或覆盖版本，从而避免搜索引擎将它们都当成独立的页面收录，影响网站的SEO效果。rel="alternate"除了规范链接外，我们还会遇到另一种链接关系——rel="alternate"。它表示当前页面的替代链接，根据不同的目的可以分为多个类型。2.1 rel="alternate" 其中之一是 rel="alternate" , 它表示与当前页面内容相同，但是提供了更好的适应性的链接，以适用于不同的媒体设备或不同的显示器尺寸。在这种情况下，属性值应该包含类似"media"的媒体查询，

TailwindCss 使用 important 提高权重

在使用 TailwindCss 开发时会在已经封装好的UI组件中进行使用，但是由于权重问题可能会导致添加的 TailwindCss 样式无法生效，这个时候就要对 tailwindcss.config.js 文件进行 important 配置，将我们的样式权重提高。进入 tailwindcss.config.js 文件添加 important: truemodule.exports = { important: true, }就会自动生效在标签中，无须二次引入。<div class="mx-2"></div>但是这种方式有一个弊端，他会将全部样式都添加 important 提高权重，使得想通过 style 进行添加样式时就会出现样式无法显示问题，具体还是我们 style 方式添加的样式权重问题。所以谨慎使用 important 配置，并优先使用 style 方式来解决样式权重问题

Node.js文件上传教程：使用multer实现高效资源上传

在现代的Web应用程序中，文件上传是一个非常常见且重要的功能。无论是社交媒体应用、电子商务平台还是云存储服务，用户都需要能够上传各种类型的文件，如图片、音频、视频等。Node.js作为一种快速且高效的服务器端运行环境，提供了许多工具和库来实现文件资源上传功能。本文将介绍如何使用Node.js和multer库来实现文件资源上传功能。准备工作在开始之前，请确保你已经安装了Node.js和npm（Node.js的包管理工具）。如果尚未安装，你可以从官方网站 https://nodejs.org/ 下载安装。使用multer库处理文件上传multer是一个流行的Node.js库，用于处理文件上传。它允许你轻松地处理通过HTTP POST请求上传的文件。以下是一个基本的示例，展示了如何使用multer库来实现文件资源上传功能。const express = require('express'); const multer = require('multer'); const path = require('path'); const cors = require('cors'); const

node发送qq邮箱

通过 nodemailer 模块来实现发送邮箱安装:npm install nodemailer创建SMTP客户端配置const nodemailer = require("nodemailer") const config = { host: "smtp.qq.com", // QQ邮箱 // smtp.163.com // 163邮箱 port: 465, // 端口 auth: { // 发件人邮箱账号 user: "xxxxx@qq.com", // 发件人邮箱授权码，需要去QQ邮箱中申请 pass: "xxxxx" } } const transporter = nodemailer.createTransport(config)发送邮箱const mail = { // 发件人邮箱，格式："昵称<发件人邮箱>" from: "mmm<xxxxx@qq.com>",

chatgpt-web 项目部署到服务器无打字机效果

nginx配置proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade";systemctl restart nginx 解决了，核心原因是nginx默认没有开websockets参考

github chatgpt-web项目添加预设

button 配合 document.execCommand() 实现文字加粗效果

button 配合 document.execCommand() 实现文字加粗效果。在实现富文本编辑器的点击按钮给文本文字加粗的时候遇到了一个问题，那就是当选中文字是点击加粗按钮会取消文字的选中。想要的效果为：想要实现此效果，只要将按钮换成 button 就可以了。完整代码：<style> * { padding: 0; margin: 0; } html, body { padding: 20px; background-color: #000000; } li { list-style-type: none; } #editor { width: 800px; height: 360px; border-radius: 6px; background-color: #ffffff; border: 1px solid #cccccc;

python pip 国内源

1.清华大学https://pypi.tuna.tsinghua.edu.cn/simple2.阿里云https://mirrors.aliyun.com/pypi/simple/3.网易https://mirrors.163.com/pypi/simple/ 4.豆瓣https://pypi.douban.com/simple/5.百度云https://mirror.baidu.com/pypi/simple/6.中科大https://pypi.mirrors.ustc.edu.cn/simple/7.华为云https://mirrors.huaweicloud.com/repository/pypi/simple/8.腾讯云https://mirrors.cloud.tencent.com/pypi/simple/参考链接：https://zhuanlan.zhihu.com/p/623325525?utm_id=0

python 安装 cv2 时报错 ERROR: Could not find a version that satisfies the requirement cv2

python安装cv2 时报错：ERROR: Could not find a version that satisfies the requirement cv2 (from versions: none) ERROR: No matching distribution found for cv2解决方法：cv2库是OpenCV的Python绑定库，它通常通过以下方式安装：pip install opencv-python

css 使用 background-attachment 实现滚动页面背景图片固定效果

偶然间看到一个效果，觉得挺有意思就看了下是如何实现的，以下是效果展示。效果地址查看css，其主要是通过 background-attachment 属性来实现滚顶页面背景背景图片固定效果的。实现代码：<div style="height: 600px;"></div> <div style="height: 600px;"></div> <div class="box"></div> <div style="height: 600px;"></div> <div style="height: 600px;"></div> <style> .box { width: 1200px; height: 460px; margin: 0 auto; background-image: url(https://www.nicetheme.cn/wp-

vite 启动项目报错：error when starting dev server: Error

在使用 vite 搭建 vue3 项目时启动报错：解决方案：主要是 IP Helper服务未正常启动，只要重新启动IP Helper服务就可以了。通过 net stop winnat 停止 windows网络地址转换（NAT）服务，而net start winnat命令可以启动该服务。这些命令会间接地启动IP Helper服务，从而解决“Error: listen EACCES: permission denied ::1:5173”报错。net stop winnat net start winnat

typecho nginx伪静态规则

if (-f $request_filename/index.html){ rewrite (.*) $1/index.html break; } if (-f $request_filename/index.php){ rewrite (.*) $1/index.php; } if (!-e $request_filename){ rewrite (.*) /index.php; }

显示手机布局边界

1.开启手机开发者模式2.进入开发者选项 -> 显示布局边界

git commit 时报错：husky - pre-commit hook exited with code 1 (error)

在使用 git 进行 commit 时出现错误：husky - pre-commit hook exited with code 1 (error)。方式一chatgpt 的回答是：报错信息 “husky - pre-commit hook exited with code 1 (error)” 表示在执行 Git 提交操作时，pre-commit 钩子脚本返回了非零的退出码，表示出现了错误。这种情况下，通常是由于 pre-commit 钩子脚本中的某些检查或校验操作失败导致的。这些操作可能包括代码风格检查、静态代码分析、单元测试等。当脚本返回非零退出码时，Git 就会拒绝提交并报错。处理这个问题的步骤如下：了解错误信息：查看报错信息中的详细信息，可能会给出有关导致错误的具体原因。检查钩子脚本：查看项目中的 pre-commit 钩子脚本，并确认其中的检查或校验操作是否有问题。可以尝试运行钩子脚本来单独测试和调试。修复问题：根据钩子脚本的具体错误信息，修复其中的问题。可能需要修改代码、调整配置或安装必要的依赖项。绕过钩子脚本：如果在紧急情况下需要提交代码，可以使用 git commit