青花鱼の小栈

背景：在前端开发中，UI 设计师的需求往往与 ElementUI、Ant Design 等第三方组件库的默认样式存在冲突。为了还原设计稿，我们经常需要对组件样式进行“魔改”。 很多新手在修改样式时，常遇到样式不生效或造成全局污染的问题。本文总结了在 Vue 项目中定制第三方 UI 样式的几种最佳实践，帮助大家优雅地解决由 scoped 带来的样式隔离难题。 方法总结：方案一：全局样式覆盖（Global Override）适用场景： 需要修改整个项目中某类组件的通用样式（如：统一修改所有按钮的圆角、统一 Input 输入框的高度）。 实现方式： 在项目样式目录下新建一个专门的重置文件（例如 styles/element-reset.scss），编写覆盖代码后，在入口文件引入。 创建重置文件 src/styles/element-reset.scss： 12345678/* 覆盖 element 全局样式 */ .el-button { border-radius: 2px; /* 比如将圆角改小 */ } /* 修改所有弹窗的头部背景 ...

背景使用hexo框架写文章时，需要为文章生成永久链接，以保证即使文章的文件名更改后，文章的链接也不会变化。之前我使用了hexo-abbrlink插件来完成这一工作，但其存在一个问题——当我没有在本地没有使用hexo generate或者hexo server命令时，文章的abbrlink不会生成，此时我提交代码到github上，触发CI/CD流程，文章的abbrlink不会被记录到远程仓库中。 思路文章的abbrlink应该在hexo new命令执行时生成！查看hexo官网API文档，发现可以监听new事件，于是想到可以在事件的回调中，为文件添加上abbrlink属性 解决在根目录下新建一个script目录 ，创建一个文件：auto-abbrlink.js，将下面的代码粘贴进去： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657const fs = require("fs")const path ...

📝 背景在视频监控、直播等场景中，RTSP (Real Time Streaming Protocol) 是一种广泛使用的视频流传输协议。然而，痛点在于：**浏览器原生并不支持 RTSP 协议 **，传统的 <video> 标签无法直接播放 RTSP 流。 为了在 Web 前端实现 RTSP 视频播放，我们需要“曲线救国”：将 RTSP 流转换为浏览器原生支持的 WebRTC 协议。 本文将手把手教你如何使用 MediaMTX 作为流媒体服务器，在 Vue3 前端项目中实现丝滑的 RTSP 视频流播放。 🛠️ 解决方案我们需要两个核心工具： MediaMTX: 一个轻量级的开源流媒体服务器，核心能力是支持 RTSP 转 WebRTC。 FFmpeg: 强大的音视频处理瑞士军刀，用于模拟 RTSP 视频流进行开发测试。 技术架构图: 1RTSP源流 --> MediaMTX服务器 --> WebRTC协议 --> 浏览器播放 💻 实操演练1. 视频流模拟首先，下载并启动 MediaMTX。 然后，下载 FFmpeg 工具，在FFmpe ...

在当今快速迭代的开发环境中，如何高效部署项目是每个开发者必须掌握的技能。宝塔面板作为一款强大的服务器管理工具，能够极大简化部署流程。本文将以Vue前端+SpringBoot后端项目为例，手把手带你完成从零到一的完整部署过程。 1.环境安装1.1 安装nginx在应用商店搜索nginx，点击安装即可 1.2 安装数据库同样在应用商店搜索，根据你使用的数据库，安装对应的即可，这里以mysql为例： 1.3 安装java环境这个稍微有点区别，在左侧菜单栏选择网站，然后再顶部二级菜单栏选择java项目，点击Java环境管理，选择你java项目依赖的版本安装： 2.数据库迁移2.1 创建数据库：点击数据库>选择你使用的数据库>点击添加数据库>点击确定创建： 2.2 迁移数据和表结构上传生成的数据库迁移sql文件，点击导入即可 3.后端部署3.1 上传jar包点击文件，在www/wwwroot目录下，新建一个文件夹，作为后端项目的文件目录： 然后将jar包传到该目录下： 3.2 添加java项目选择网站>Java项目>添加项目，在项目路径一项， ...

在数字时代，我们每天都会接触到大量的图片和视频。无论是手机、电脑屏幕，还是电视、相机，都离不开一些关键的技术术语，例如：像素、分辨率、码率、PPI和DPI。这些概念虽然常见，但很多人对它们的具体含义和区别不甚了解。本文将用通俗易懂的方式，带你一次性搞懂这些令人困惑的术语。 1. 像素 (Pixel) - 构成图像的基石像素（Pixel，简称px）是“Picture Element”（图像元素）的缩写。你可以把它想象成构成一幅数字图像的最小单位，就像是用无数个微小的、单一颜色的“马赛克”方块拼凑出一幅完整的图画。 核心特点： 它是数字图像的最小组成部分。 每个像素只能显示一种颜色。 一张图片由成千上万甚至数百万个像素组成，像素越多，图像的细节就越丰富。 当你把一张图片放大到极致时，你看到的那些小方格就是一个个的像素。 2. 分辨率 (Resolution) - 图像的尺寸与清晰度分辨率（Resolution）通常用来描述一幅图像所包含的像素数量，是衡量图像细节表现能力的重要指标。它通常表示为“宽度像素数 × 高度像素数”。 常见表示： **1080p (Full HD)**： ...

bug描述在cesium+vue3项目开发时，安装依赖后跑不起来，报错提示如下： 排错过程：根据错误提示知道：Cesium引用了@zip.js/zip.js中的zip-no-worker.js文件，推测可能是@zip.js/zip.js的版本不正确，导致cesium拿不到这个引用的文件。 于是到node_modules中查看了@zip.js/zip.js依赖的文件夹： 果然没有，验证了我的推测，于是又查看了cesium中依赖的zip包版本，和实际安装的zip包版本，进一步确认了两者的版本不一致： 问题解决1.先用了npm，把@zip.js/zip.js包删了以后，想用npm i命令指定版本安装一下，发现npm报错，很离谱。 2.直接放弃npm，选择了pnpm安装依赖，在package.json中添加一项配置，强制项目中所有对@zip.js/zip.js的依赖使用该版本： 12345"pnpm": { "overrides": { "@cesium ...

问题背景与描述为了跟上时代的步伐，最近在开发一个vue3+vite+pinia的新项目开发过程中，体验了下vscode的copilot生成代码，不得不说效率真的牛逼！但同时，也会有一些小缺点小问题，需要我们去微调代码，就比如我今天遇到的坑。 我在某个页面组件中使用了useStore中的方法，为store中的某个状态初始化了数据，但跳转到另一个页面时，发现store中的状态被清空了。 解决方法使用router.push方法替代原来的window.location.href做页面跳转即可解决 12345// 跳转到评分页面const jumpToGrade = (item: Contestant) => { // window.location.href = `/grade?id=${item.id}` router.push({ path: '/grade', query: { id: item.id } })} 问题排查过程拷问了deepseek，豆包等AI，都说要对stor ...

问题描述：启动vue项目时，报如下错误： 问题解决：查阅资料后发现，可能是文件路径中有括号导致 1D:\work\17_ym(vue3)\szgc-gcym-server\yj_ym_tdp_ui //路径中含有英文括号 尝试重命名路径（删除路径中的括号）后重新启动，出现了新的报错： 点进node_modules里点了一下依赖，发现无法跳转，推测可能是重命名路径后导致pnpm依赖链接失效，尝试执行命令重新安装依赖： 1pnpm install 安装成功后运行项目： 1npm run serve 问题解决，成功启动项目：

✨ 前言：作为一名从零开始学习Nginx配置的开发者，我在初次部署静态网站时，面对Nginx复杂的配置文件结构感到十分困惑。nginx.conf、sites-available、sites-enabled等目录和文件各自承担着什么职责？它们之间又是如何协同工作的？经过深入研究和实践验证，我整理出了一些初学nginx时的常见问题，以问题的形式为新手建立对nginx的整体认识，希望能帮助初学者快速掌握Nginx的核心配置逻辑。 🛠️环境：操作系统：Ubuntu 22.04 LTS🐧 nginx版本：nginx/1.18.0 (Ubuntu) ❓常见问题解答：Q1：nginx配置文件有哪些 ?📂Nginx 配置文件结构总览 配置文件/目录 路径示例 主要作用 核心配置项/内容 使用说明 nginx.conf (主配置文件) /etc/nginx/nginx.conf 全局配置入口，定义Nginx运行的基础参数 - user, worker_processes - events块 - http块 - include指令 相当于程序的 main 函数 ...

✨ 前言作为一名前端开发者，我们通常只需要将打包好的文件交给后端或运维同学即可完成部署。但在某些场景下，我们也需要亲自将前端资源部署到服务器上。本文将以最直观的方式，带你一步步完成前端项目的完整部署流程，并解释其中涉及的关键概念！🎯 📚 核心概念解析在开始实操前，先了解几个基础概念，这将帮助你更好地理解整个部署过程： 1. 什么是 Nginx？🌐Nginx（发音为”engine-x”）是一款高性能的开源Web服务器，同时具备反向代理、负载均衡和HTTP缓存等强大功能。它最初是为了解决C10K问题（即单服务器处理万级并发连接）而设计。 以下是Nginx的核心功能概览： 功能类别 核心能力 典型应用场景 Web服务器 高效处理静态资源（HTML、CSS、JS、图片等） 托管静态网站、作为前端资源服务器 反向代理 接收客户端请求并转发给后端服务器，隐藏真实服务器信息 作为后端应用的统一入口和安全屏障 负载均衡 将请求分发到多个后端服务器 分散高并发流量，提高应用可用性 HTTP缓存 缓存静态内容及后端响应，加速访问速度 提升用户体验，减少服务器负载 SSL& ...

前言我之前已经写过一篇certbot申请ssl证书的文章，为什么这次还要再写一遍呢? 原因在于，certbot 虽能实现服务器内部的 SSL 证书申请与自动更新，但在使用 CDN 的场景下，无法自动将证书上传并配置到腾讯云 CDN（或许有方法但我未曾深入研究）。相比之下，acme.sh 在这一场景下表现更为出色，不仅灵活性强，还能满足我的定制化需求。 acme.sh与certbot的横向对比 特性维度 acme.sh certbot 核心设计 纯 Shell 脚本编写 由 Let’s Encrypt 官方推荐，使用 Python 编写 安装与复杂度 安装简单，配置相对复杂，尤其在使用 DNS API 时 安装与配置较为简单，但对复杂或特殊环境的支持较弱 自动化与续期 自动设置定时任务，自动化程度高 更新证书需要手动设置 cron 任务 验证方式 支持多种验证方式（如 DNS、HTTP），尤其擅长通过 DNS API 进行验证，适合通配符证书 支持 HTTP 和 DNS 验证 灵活性 非常灵活，支持众多 DNS 服务商 API，可指定证书存放路径 与主流 Web ...

背景Docker——容器化技术，作为现代化运维技术的一环，其重要性不言而喻。最近我在优化个人网站的过程中，发现之前使用twikoo云函数部署的方式不太能满足我对网站的性能要求，每次发送获取twikoo云函数的请求时，耗时都在一秒多甚至两秒以上。于是考虑使用docker来进行私有化部署twikoo，另外，我的腾讯云服务器快到期了，到时候续费如果涨价太厉害，我也考虑迁移服务器，届时如果把我的nginx服务也托管到docker，到时候服务器迁移起来应该会比较轻松（仅是我的想象）； 系统环境系统版本：Ubuntu 22.04 LTS 过程记录1.首先打开Docker官方文档，找到了docker安装部分的教程：https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository 2.遵照教程，卸载可能冲突的包123456789101112131415161718192021222324252627282930313233343536ubuntu@VM-16-3-ubuntu:~$ for pkg in docker ...