怪咖`Blog

小咖之”怪咖工作室-违背的青春”项目背景为什么想要开发这个项目？ 我原本是打算开发一个博客系统，但是想想之前已经通过CSDN、Hexo、VuePress、VitePress等搭建过静态博客系统了。所以想做个其他类型的项目，把这些年学习、掌握的技术融合到一起开发一个完整的项目。 在信息爆炸的数字时代，个人成长轨迹常被碎片化信息淹没，学习与工作经历的沉淀往往散落在笔记软件、社交媒体、本地文档等多个载体中，难以形成系统化的成长脉络。传统的记录方式缺乏结构化梳理，既不利于自我复盘，也无法清晰展现个人能力的演进过程。 “怪咖工作室 - 违背的青春” 诞生于对这种现状的反思：标准化的成长路径虽被广泛认同，却往往束缚个体独特性的表达。许多有价值的探索、试错与突破，因不符合传统评价体系而被忽略或遗忘。同时，技术从业者需要一个既能沉淀专业成长，又能承载个性化思考的专属空间，既作为自我对话的媒介，也作为与同频者交流的窗口。 项目目标1.个人成长系统化沉淀构建统一的记录平台，将分散的学习笔记、项目经验、思维碎片整合为结构化的成长档案，形成可追溯、可复盘的个人知识体系。 2.独特成长轨迹可视化通过时间线、技能 ...

移动端无限适配 移动端无限适配，就是让移动端网页，在任意分辨率下，都能正常显示。 淘宝无限适配 12npm install lib-flexible --savenpm install amfe-flexible --save 区别： amfe-flexible 是由同一个作者（淘宝 AMFE 团队）在 lib-flexible 之后推出的另一个适配方案。它的目标是进一步优化和改进 lib-flexible 的一些不足，并提供更统一的解决方案。 gk-flexible 自己的 npm 包 gk-flexible 是一个基于 vw 单位的移动端适配方案，主要解决在宽屏上始终以 375px 宽度展示（具体宽度可根据需求调整），而在窄屏上根据屏幕宽度缩放，以保证内容的完整性。 1npm install gk-flexible --save

node 日志工具 在 Node.js 项目中，日志记录是至关重要的一环，它能帮助开发者追踪系统运行状态、排查错误、分析用户行为等。下面将从日志的作用、常用工具、实现方式及最佳实践等方面，详细介绍 Node.js 项目的日志记录。 日志的作用 错误排查：当程序出现异常时，日志可以提供错误发生的上下文、堆栈信息等，帮助快速定位问题。 系统监控：通过记录系统的关键指标（如响应时间、内存占用等），可以实时监控系统运行状态，及时发现潜在风险。 行为分析：记录用户的操作行为（如登录、点击等），有助于分析用户习惯，为产品优化提供依据。 审计追踪：在一些对安全性要求较高的场景（如金融系统），日志可以用于审计用户操作，确保合规性。 常用的日志工具 winston 特点：功能强大、灵活，支持多种日志传输方式（如控制台、文件、数据库等），可以自定义日志格式和级别。 安装：npm install winston 1234567891011121314151617181920const winston = require("winston");// 创建日志器const ...

Linux 安装 Redis 在 Linux 系统上安装 Redis 服务可以通过包管理器或源码编译两种方式，以下是详细步骤： 包管理器安装 适用于 Ubuntu/Debian 或 CentOS/RHEL 系统，简单快捷： Ubuntu/Debian 系统： 123456789101112131415# 更新包索引sudo apt update# 安装 Redis 服务器sudo apt install redis-server# 启动 Redis 服务sudo systemctl start redis-server# 设置开机自启动sudo systemctl enable redis-server# 检查服务状态sudo systemctl status redis-server CentOS/RHEL 系统： 12345678910111213141516# 安装 EPEL 仓库（如果未安装）# 也有可能是其他仓库，请自行检查sudo yum install epel-release# 小编已经安装过epel-aliyuncs-release，所以可以忽略这一步# 安装 Red ...

node 打包工具 痛点：源代码暴露在服务器上，如果服务器被入侵，源代码可能泄露 解决方案—打包工具 1.pkg 特点：简单易用，支持将 Node.js 应用打包为 Windows、Linux、macOS 平台的可执行文件，无需安装 Node.js 即可运行。 使用教程 安装：npm install -g pkg 打包： 12345# 打包当前平台（根据运行命令的系统自动识别）pkg index.js# 指定多平台打包（Windows、Linux、macOS）pkg -t node18-win-x64,node18-linux-x64,node18-macos-x64 index.js 注意：pkg 默认只会打包你的源码和相关依赖，node_modules 中的依赖默认不会被自动包含，尤其是需要动态加载的模块。如果需要包含依赖，可以使用 --include 参数指定依赖文件。 2. nexe 特点：与 pkg 类似，但更灵活，支持自定义 Node.js 版本和编译选项，适合需要深度定制的场景 安装：npm install -g nexe 打包： 12345# 打包当前平台n ...

Express、Koa、Egg、Nest.js 的区别 在 Node.js 后端开发中，Express、Koa、Egg.js、Nest.js 是常用框架，它们各有特点和适用场景，以下从核心特性、优缺点、适用场景等方面对比分析，并给出推荐建议： 1. Express：最经典的轻量框架 核心特性： 诞生于 2010 年，是 Node.js 生态中最老牌的 Web 框架之一，以 “极简主义” 为设计理念，仅提供路由、中间件、请求处理等核心功能，无过多内置约束，开发者可自由扩展。中间件机制为 “线性同步”（即按顺序执行，需手动调用next()）。 优点： 轻量灵活，学习成本低，文档丰富，社区成熟，第三方中间件生态极丰富（如cors、multer等）。 适合快速搭建小型项目或 API 服务，对项目结构无强制要求，自由度高。 缺点： 缺乏内置的规范和最佳实践，大型项目需手动设计架构（如分层、路由管理等），易导致代码混乱。 中间件嵌套过深时可能出现 “回调地狱”（虽可通过async/await缓解，但框架本身不解决）。 适用场景： 小型项目、快速原型开发、简单 API 服务，或需要高度定制化 ...

前言 最近开发遇到一个需求，需要实现一个流程图编辑器，使用vue+go.js实现。是依赖画布canvas相关技术实现的。需要花费大量时间去熟悉go.js相关技术，研究几天发现vue+go.js实现起来非常简单，而且vue的组件化思想也非常适合流程图编辑器的开发。 官方案例 vue+go.js实现流程图编辑器，可以参考官方的案例：https://gojs.net.cn/samples/flowchart.html 实现步骤 画布初始化 1234<!-- 左边流程图 --> <div class="palette-box" id="myPaletteDiv"></div> <!-- 流程图制作区域 --> <div class="chart-box" id="myDiagramDiv"></div> 初始化流程面板 12345678910111213//初始化流程图面板that.myDiagram = $( go.Diagram ...

怪咖3D机器人可视化 前言 最近，我在学习Three.js，做了一个3D机器人可视化的项目，想到之前做过Echarts的可视化项目，于是想着把这两个项目结合起来，做一个更加炫酷的可视化项目。 介绍 怪咖3D机器人可视化，基于Vue3 + Echarts + three.js + Tailwind CSS 实现，主要功能有： 3D模型展示 轨迹跟踪 机器人控制 反馈数据统计 期望工作地址统计 工作经验统计 热门词云图 云端风险监控 演示 演示地址：https://www.wbdqc.top 效果图：

最近安装依赖包的时候，出现报错 1npm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason: certificate has expired 原因： 查阅后发现，淘宝 npm 镜像的证书到期了，导致 npm 安装依赖包失败。 早在 2021 年，淘宝就发文称，npm 淘宝镜像已经从 http://registry.npm.taobao.org 切换到了 http://registry.npmmirror.com。旧域名也将于 2022 年 5 月 31 日停止服务（直到 HTTPS 证书到期才真正不能用了） 2024年1 月 22 日，淘宝原镜像域名（http://registry.npm.taobao.org）的 HTTPS 证书正式到期，导致旧的 npm 淘宝镜像在使用时出错了。 解决方案 清空 npm 缓存： 1npm cache clean --force 查看当前 npm 源： 1npm config get registry ...

Javascript中Object类的静态方法总结 Object类中有一些静态方法，这些方法可以直接通过类名来调用，而不需要实例化对象。 Object.assign(target,...sources)：将多个源对象复制到目标对象，并返回目标对象。 Object.create(proto, propertiesObject)：创建一个新对象，并设置其原型对象和属性。 Object.defineProperties(obj, props)：定义一个对象obj的属性，并返回obj。 Object.defineProperty(obj, prop, descriptor)：定义一个对象obj的属性，并返回obj。 Object.entries(obj)：返回一个数组，包含对象obj的所有可枚举的自身属性的键值对。 Object.freeze(obj)：冻结对象。 Object.fromEntries(iterable)：创建一个新对象，并将可迭代对象iterable中的键值对添加到新对象中。 Object.getOwnPropertyDescriptor(o ...