怪咖工作室之违背的青春
小咖之"怪咖工作室-违背的青春" 项目背景 为什么想要创建这个项目? 我原本是打算开发一个博客系统,但是想想之前已经通过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 日志工具 在 Node.js 项目中,日志记录是至关重要的一环,它能帮助开发者追踪系统运行状态、排查错误、分析用户行为等。下面将从日志的作用、常用工具、实现方式及最佳实践等方面,详细介绍 Node.js 项目的日志记录。 日志的作用 错误排查:当程序出现异常时,日志可以提供错误发生的上下文、堆栈信息等,帮助快速定位问题。 系统监控:通过记录系统的关键指标(如响应时间、内存占用等),可以实时监控系统运行状态,及时发现潜在风险。 行为分析:记录用户的操作行为(如登录、点击等),有助于分析用户习惯,为产品优化提供依据。 审计追踪:在一些对安全性要求较高的场景(如金融系统),日志可以用于审计用户操作,确保合规性。 常用的日志工具 winston 特点:功能强大、灵活,支持多种日志传输方式(如控制台、文件、数据库等),可以自定义日志格式和级别。 安装:npm install winston 1234567891011121314151617181920const winston = require("winston");// 创建日志器const ...
Linux 安装 Redis
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 打包工具
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 的区别
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实现拖拽流程图
前言 最近开发遇到一个需求,需要实现一个流程图编辑器,使用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机器人可视化
怪咖3D机器人可视化 前言 最近,我在学习Three.js,做了一个3D机器人可视化的项目,想到之前做过Echarts的可视化项目,于是想着把这两个项目结合起来,做一个更加炫酷的可视化项目。 介绍 怪咖3D机器人可视化,基于Vue3 + Echarts + three.js + Tailwind CSS 实现,主要功能有: 3D模型展示 轨迹跟踪 机器人控制 反馈数据统计 期望工作地址统计 工作经验统计 热门词云图 云端风险监控 演示 演示地址:https://www.wbdqc.top 效果图:
npm 淘宝镜像
最近安装依赖包的时候,出现报错 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类的静态方法
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 ...






