- 博客(122)
- 资源 (1)
- 收藏
- 关注
原创 小服务器的资源配置
sudo fallocate -l 2G /swapfilesudo chmod 600 /swapfilesudo mkswap /swapfilesudo swapon /swapfilefree -h
2025-10-16 14:11:37
203
原创 TypeScript的类型别名
你只能修改它们共同指向的那个对象的内部内容。TypeScript 中的类型别名(Type Alias) 是一个强大且实用的特性,它允许你使用 type 关键字为任何类型(无论是简单类型还是复杂类型)定义一个新的名称。• 只读对象:如果你使用 TypeScript 的 readonly 修饰符或 Readonly 工具类型,TypeScript 会在编译时阻止你修改对象属性,但这并不改变底层的传递行为,它只是一个编译时的约束。当传递原始类型的值(如数字、字符串、布尔值)给函数时,传递的是值的完整副本。
2025-09-03 16:46:19
809
原创 PM2的使用
PM2 是一个功能强大的 Node.js 进程管理器,专为生产环境设计,能帮助你轻松管理、监控和扩展 Node.js 应用以及其他类型的脚本或应用(如 Python、Bash)。• 设置日志文件权限:限制日志文件的访问权限,例如 chmod 600 /var/log/my-app/*.log。• 零秒重启/重载:在集群模式下,使用 reload 可以实现不中断服务的平滑重启,适用于版本更新。• 实时监控:pm2 monit 命令会打开一个仪表盘,实时显示每个应用的 CPU 和内存使用情况。
2025-09-03 14:00:40
472
原创 Docker Compose 和直接使用 `docker run`区别
功能定位与适用场景:◦ 主要用于单个容器的启动和运行。它适合快速测试一个镜像、运行一次性任务,或是学习 Docker 的基本命令。◦ Docker Compose 是一个编排工具,用于定义和运行多容器应用。它通过一个 文件来配置整个应用栈(如 Web 服务器、数据库、缓存等)的服务、网络、卷等信息,非常适合开发环境、测试以及基于微服务架构的复杂应用。配置方式:◦ 的所有配置(如端口映射 、卷挂载 、环境变量 )都需要通过冗长的命令行参数指定。这不仅难以记忆和书写,而且容易出错,更不利于
2025-09-03 13:52:56
1182
原创 docker build的proxy,容器的proxy ,image的Proxy 三个的区别
配置示例 Environment=“HTTP_PROXY=http://proxy.example.com:8080” docker run -e http_proxy=http://proxy.example.com:8080 image_name 或 ~/.docker/config.json docker build --build-arg http_proxy=http://proxy.example.com:8080 .◦ 检查防火墙规则是否允许 Docker 守护进程或容器访问代理服务器。
2025-09-02 23:33:44
1342
原创 nextjs使用pm2打包
PM2 启动应用 pm2 start npm --name “your-app-name” – run start 或使用配置文件 ecosystem.config.js 启动应用并为其命名,-- run start 指定执行 npm run start。• 集群模式 (Cluster Mode):对于多核服务器,使用 PM2 的集群模式 (exec_mode: ‘cluster’, instances: ‘max’) 可以启动多个应用实例,充分利用 CPU 资源,提高性能和稳定性。
2025-09-02 23:21:40
756
原创 nextJs使用docker打包
📝 核心配置文件在项目根目录创建 Dockerfile。这里提供一个多阶段构建的优化范例,有助于减小最终镜像体积:FROM node:20-alpine AS base # 或 node:18-alpineFROM base AS depsRUN apk add --no-cache libc6-compat # 某些依赖可能需要WORKDIR /appCOPY package.json package-lock.json* ./RUN npm ci --only=production # 或使用更
2025-09-02 22:57:54
1230
1
原创 RSS订阅在前端中的使用
RSS进阶版,PWA(Progressive Web App,渐进式 Web 应用)是一种通过现代 Web 技术构建的应用程序,它融合了 Web 应用和原生应用的核心优势,旨在任何设备上提供类原生应用体验,同时保留 Web 的跨平台性和可链接性。◦ 后端代理(更推荐):在自己的服务器上设置一个简单的代理接口,前端请求自己的服务器,由服务器去获取RSS源数据再返回给前端。解析XML数据:获取到原始的RSS XML字符串后,需要将其解析为前端JavaScript可以方便操作的对象。
2025-08-29 18:12:07
1066
原创 PostgreSQL的安装和使用
🛠️ PostgreSQL 核心特性特性 说明ACID 事务支持 确保数据操作的原子性、一致性、隔离性和持久性复杂数据类型 支持 JSON/JSONB、XML、数组、几何图形等高级索引 B-tree、Hash、GiST(通用搜索树)、GIN(通用倒排索引)等扩展性 可通过扩展(如 PostGIS、pgcrypto)增强功能高并发 多版本并发控制(MVCC)避免读写阻塞全文本搜索 内置支持高效的文本搜索跨平台 支持 Windows、Linux、macOS 等操作系统。
2025-08-27 17:23:21
1025
原创 SQLite的安装和使用
◦ 打开命令提示符,输入 sqlite3 --version 验证安装(若配置了环境变量,可直接输入 sqlite3 进入命令行界面)。• 资源清理: 在使用编程语言连接时,务必确保最后关闭数据库连接(如 conn.close()),以释放资源。Java 连接 使用 JDBC 驱动和连接字符串: jdbc:sqlite:数据库文件名.db。• 数据库文件位置: 确保提供的数据库文件路径正确。◦ DBeaver: 功能强大的通用数据库工具,支持多种数据库,包括 SQLite。
2025-08-27 15:27:59
1171
原创 3-3easyDemo里官方其他钩子使用
useContext 跨组件层级共享状态 无需组件嵌套即可订阅 React Context 的变化,读取全局值(如主题、用户信息)。useReducer 管理复杂状态逻辑 类似于 useState,但更适合处理包含多个子值或下一个状态依赖于之前状态的复杂状态逻辑。useCallback 缓存函数引用 缓存函数本身,防止子组件因父组件重新渲染而进行不必要的重渲染(除非依赖项改变)。useState 管理组件内部状态 用于在函数组件中添加状态变量,返回状态值和更新状态的函数。Hook 核心用途 简要说明。
2025-08-25 17:47:19
591
原创 React Hooks 和 Zustand区别
Zustand 的核心价值:在全局状态管理中,以接近 useState 的简单性,实现 Redux 级别的能力,同时规避 Context API 的性能缺陷。• 跨组件共享:依赖 useContext,需用 Provider 包裹组件树,状态变更会导致所有消费组件重渲染,即使未使用该状态。• 跨组件共享:通过 create 创建 Store,组件按需订阅状态片段(Selector),仅相关状态变化时触发重渲染。• 功能:管理组件内部状态或通过 useContext 实现简单跨组件状态共享。
2025-08-25 17:30:00
1085
原创 3-2NextJs添加一个easy页面通过钩子hook实现一些easy功能
📁 项目结构与路由规划├── app/│ ├── (home)/ # 路由组,URL中不显示(home)│ │ └── page.tsx # 默认入口页面,路径 /│ │ └── page.tsx # 自定义路由页面,路径 /test│ ├── globals.css # 全局样式│ └── layout.tsx # 根布局。
2025-08-25 16:55:26
886
原创 faker.js假数据使用方式
◦ 地理信息:地址、城市、国家(faker.location.streetAddress(), faker.location.country())。◦ 个人信息:姓名、性别、出生日期(faker.person.fullName(), faker.date.birthdate())。◦ 企业数据:公司名、口号、行业(faker.company.name(), faker.company.buzzPhrase())。
2025-08-23 07:00:00
1339
原创 Next.js服务端组件和客户端组件的区别
Next.js 中的服务端组件(RSC) 和客户端组件是两种核心渲染模式,通过分工协作优化性能与用户体验。
2025-08-22 18:00:00
1552
原创 Immer的使用
其核心是 写时复制(Copy-on-Write) 和 代理对象(Proxy) 机制,允许开发者以“可变”方式修改数据,同时自动生成不可变的新状态。通过 produce 函数和代理机制,Immer 在保持不可变数据优点的同时,提供了接近可变数据操作的开发体验,是现代化状态管理的利器。• 避免副作用:直接修改状态易引发不可预测的 Bug,不可变数据确保状态变更可追踪。• 修改记录:在 draft 上的操作被拦截并记录,原始数据不受影响。• 生成新状态:修改完成后,Immer 根据记录生成新的不可变对象。
2025-08-22 13:45:00
800
原创 Next.js 核心概念及应用
🧩 一、动态路由(Dynamic Routing)作用:根据 URL 参数动态生成页面,避免硬编码路径。实现方式:基础动态路由• 文件命名:app/blog/[slug]/page.js• 获取参数:return。
2025-08-22 13:30:00
567
原创 Next.js路由和命名
在 Next.js 中,将文件夹名称用圆括号 ( ) 包裹(例如 (marketing))是一种特殊的路由组(Route Group) 语法设计,其核心目的是在不影响实际 URL 路径的前提下,对路由进行逻辑分组和隔离,从而提升项目的组织性和可维护性。以下是其设计原理和典型应用场景的详细说明:🧩 1. 核心目的:逻辑分组不影响 URL 路径• URL 路径透明性括号内的名称(如 (marketing))不会成为 URL 的一部分。
2025-08-22 11:16:13
802
原创 格式化stylelint
Stylelint 是一个强大的 CSS(及预处理器、CSS-in-JS)代码检查工具,用于自动检测样式代码中的错误、规范代码风格并强制执行团队约定,从而提升代码质量和可维护性。“scss/at-import-partial-extension”: null // 允许省略。“stylelint-config-html/vue” // 支持 Vue 模板。“stylelint-config-recess-order” // 按类型分组排序属性。
2025-08-22 08:15:00
917
原创 Zustand监控
Zustand 通过极简 API 设计(create + set)和高性能更新机制(细粒度订阅 + shallow 优化),解决了 Redux 的冗杂和 Context API 的性能缺陷。Zustand 是一个轻量级、高性能的 React 状态管理库,其核心目标是简化全局状态管理,同时提供灵活的 API 和高效的性能优化。• 替代 Redux 的复杂模板代码(无需定义 action、reducer),通过 create 函数直接创建 store,包含状态和更新方法。
2025-08-22 08:15:00
1059
原创 antd组件库
设计语言与组件库antd 基于 Ant Design 设计体系,提供了一套完整的交互语言和视觉规范,包含开箱即用的高质量 React 组件,适用于企业级中后台系统开发。技术优势• TypeScript 支持:所有组件均通过 TypeScript 构建,提供完整的类型定义文件。• 主题定制:支持深度定制主题(如颜色、间距、字体),满足品牌化需求。• 国际化:内置 50+ 语言支持,通过 ConfigProvider 配置多语言环境。• 性能优化:支持按需加载,减少打包体积。
2025-08-21 17:46:51
1027
原创 react的钩子
Hooks是React 16.8引入的函数式API,用于在函数组件中管理状态、副作用和生命周期,替代类组件的this.setState、生命周期方法等。• 依赖声明:使用ESLint插件eslint-plugin-react-hooks强制检测依赖项(exhaustive-deps规则),避免闭包陷阱。• 顶层调用:只能在函数组件或自定义Hooks的顶层调用,不可在条件、循环或嵌套函数中使用(确保调用顺序一致)。• 避免滥用useMemo/useCallback:简单计算直接执行,避免不必要的内存开销。
2025-08-21 17:38:07
896
原创 3-1构建一个基于next的demo入门
Next.js是一个基于React的现代Web框架,支持服务器端渲染(SSR)、静态生成(SSG)和客户端渲染(CSR)。本文介绍了Next.js的核心特性,包括文件系统路由、API路由和内置优化功能,并提供了从项目创建到部署的完整Demo构建指南。通过7个步骤详细讲解了如何搭建基础应用,包括页面创建、动态路由、数据获取和API开发,同时介绍了样式管理、图片优化等进阶功能。最后还提供了Vercel部署和自托管两种部署方案,帮助开发者快速上手Next.js开发。
2025-08-21 16:00:00
901
原创 2-3.利用框架构建一个easy的web应用之断点调试
本文介绍了JavaScript断点调试的主要方法和技巧,包括浏览器开发者工具调试(基本断点、条件断点等)、debugger语句使用、Node.js调试(命令行、Chrome DevTools和VS Code三种方式)以及高级调试技巧。文章对比了不同调试工具的优缺点,并提供了常见问题的解决方案,帮助开发者更高效地定位和修复代码问题。内容涵盖前端和后端JavaScript调试,适合各级开发者参考。
2025-08-21 15:45:00
868
原创 2-2.利用框架构建一个easy的web应用之添加热更新
热更新(Hot Module Replacement, HMR)是开发过程中提高效率的重要功能,它允许在不刷新整个页面的情况下替换、添加或删除模块。通过以上配置,你可以为 Hono.js 项目添加高效的热更新功能,显著提升开发体验。根据你的具体需求(纯后端、全栈等),可以选择最适合的热更新方案。对于复杂应用,你可能需要在热更新时保持应用状态。├── nodemon.json # nodemon 配置。├── vite.config.ts # Vite 配置。
2025-08-21 15:15:00
887
原创 Tailwind CSS 与 Shadcn/ui的组合使用
Tailwind CSS与Shadcn/ui是现代前端开发的高效组合。Tailwind提供原子化CSS工具类,实现快速样式开发;Shadcn/ui则基于Tailwind和Radix UI,提供可完全定制的组件模板。两者协同工作,既保证了开发效率,又实现了设计自由度和性能优化,特别适合Next.js项目。与传统组件库相比,这套方案在定制性、SSR支持和打包体积方面更具优势,适合需要高度定制的现代Web应用开发。
2025-08-21 15:00:00
1640
原创 CSS Modules 的使用
CSS Modules是一种模块化CSS解决方案,通过构建工具将类名转换为唯一哈希值实现样式隔离。其核心功能包括局部/全局作用域、类名组合、变量使用等,支持React/Vue/Angular等框架。配置需在webpack中添加css-loader并启用modules选项。优点包括避免命名冲突、增强可维护性,但需依赖构建工具。使用时需注意文件路径、正确导入和类名引用。该方案特别适合大型项目,能有效提升团队协作效率和代码质量。
2025-08-21 14:00:00
822
原创 Turbopack打包工具的使用
Turbopack是一款基于Rust开发的极速JavaScript/TypeScript打包工具,由Webpack和Next.js原团队打造。其核心创新在于增量计算和函数级缓存机制,仅编译当前页面所需代码,测试显示其在大型项目中的启动和更新速度比Vite快5-10倍,比Webpack快700倍。目前主要集成于Next.js开发环境,提供原生TypeScript、CSS模块等支持,但生态系统和生产构建功能仍在完善中。相比Webpack的全量打包和Vite的ESM方案,Turbopack的增量架构在大型项目中优
2025-08-21 13:30:00
1385
原创 记一次pnpm start启动异常
编译后的文件之间出现在src目录下,没有形成dist文件,应该时target目标地址引用问题,追朔-----》检查tscconfig中的配置文件。已经build编译过 ,但是启动时。排查代码问题,逻辑正常。修改根目录和编译目录。
2025-08-20 21:45:00
266
原创 1-2前端撸码前的准备,包管理工具和环境搭建
本文介绍了Node.js环境的搭建与管理方法,主要包括:1) 通过官网或nvm/fnm安装Node.js和npm;2) 项目初始化、依赖管理和镜像加速配置;3) 开发工具推荐与环境变量管理;4) 调试优化与部署方案。重点对比了nvm和pnpm两种版本隔离方案:nvm适合长期多版本管理,支持.nvmrc自动切换;pnpm v10.14+可自动下载声明版本的Node.js/Bun/Deno,实现轻量级隔离。建议复杂项目使用nvm,轻量项目选择pnpm运行时管理,或采用混合方案实现最佳协作效率。
2025-08-20 15:22:08
1190
原创 1-1前端撸码前的准备,包管理工具和环境搭建
npm是Node.js的默认包管理器,用于管理JavaScript项目的依赖关系和工具。作为全球最大的开源软件注册中心,它提供依赖管理、版本控制、脚本自动化、包发布和安全审计等核心功能。npm通过语义化版本控制、依赖解析机制和缓存优化等技术特点,支持项目初始化、第三方库安装和环境统一。衍生工具如yarn(并行安装)、pnpm(节省空间)、npx(临时执行)和cnpm(镜像加速)针对不同场景优化。国内开发推荐cnpm或nrm切换镜像源,大型项目建议yarn或pnpm确保依赖一致性,临时工具使用npx避免全局污
2025-08-20 14:38:20
820
原创 SpringMvc的设计模式
不同处理器(如 Controller 接口、HttpRequestHandler)通过对应的适配器(如 RequestMappingHandlerAdapter)转换为统一的处理接口,使框架能够灵活支持多种处理器类型。用于统一不同处理器的调用方式,例如将基于注解的 @Controller 类、传统 Servlet 或其他框架(如 Struts)的处理器适配到 Spring MVC 的流程中。通过工厂模式管理控制器、服务层等 Bean 的生命周期,依赖注入(DI)进一步解耦组件间依赖。
2025-03-06 14:21:10
912
原创 spring中用到的设计模式
应用场景:Spring 事件机制(如 ApplicationEvent 和 ApplicationListener)实现解耦的事件发布与订阅,例如容器启动、Bean 初始化完成等事件的通知。应用场景:Spring AOP 基于代理模式实现,通过 JDK 动态代理或 CGLIB 生成代理类,在目标方法前后添加日志、事务等横切逻辑。应用场景:通过设置 Bean 的 scope=“prototype”,每次请求生成新实例,适用于需要状态隔离的场景。优势:减少重复代码,提升扩展性。
2025-03-06 14:16:20
582
原创 Java中用到的设计模式
java.util.AbstractList:定义 addAll() 等通用方法,子类实现 get()、size() 等抽象方法。java.util.Observable 与 java.util.Observer 接口:实现对象状态变化的监听。java.lang.StringBuilder 和 java.lang.StringBuffer:分步构建字符串。Java 动态代理(java.lang.reflect.Proxy):Spring AOP 基于此实现切面编程。
2025-03-06 14:13:11
1028
原创 mybaties中使用的设计模式
应用场景:动态 SQL 的 SqlNode 接口(如 IfSqlNode、TrimSqlNode)将 SQL 片段组合成树形结构,递归解析生成完整 SQL。应用场景:BaseExecutor 定义 SQL 执行流程(如查询、提交事务),子类 SimpleExecutor 实现具体步骤(如 doQuery())。应用场景:日志模块适配不同日志框架(如 Log4j、SLF4J),通过 Log 接口统一调用,屏蔽底层差异。扩展性:通过重写模板方法支持不同执行策略(如批量处理、复用 Statement)。
2025-03-06 14:08:30
560
原创 Java项目中ES作为时序库
倒排索引:对文本字段(如标签)的分词处理,支持快速多条件匹配(如tags like ‘%tag1%’ AND tags like ‘%tag2%’),避免全表扫描。分布式架构支持横向扩展,通过分片(Shard)和副本(Replica)机制保障高可用性,适合海量时序数据存储。InfluxDB:专为时序设计,存储效率更高(ES存储占用约为InfluxDB的30倍),但分布式版本闭源。通过Bulk API支持批量插入/更新,优化吞吐量,适合流式数据(如监控指标、IoT设备数据)的高频写入。
2025-03-05 15:00:00
1617
原创 3-6安卓中的Content Provider组件
继承与重写方法需继承ContentProvider类并实现以下核心方法:java@Overridepublic boolean onCreate() { /* 初始化数据库等操作/ }@Override查询逻辑 */ }// 重写insert、update、delete、getType方法getType():返回MIME类型(如vnd.android.cursor.dir/user表示多行数据)。注册Provider。
2025-03-05 10:30:00
1377
原创 3-5安卓中的Broadcast Receiver组件
在代码中通过registerReceiver()注册,生命周期与组件(如Activity)绑定,需在onDestroy()中调用unregisterReceiver()避免内存泄漏。使用sendOrderedBroadcast()发送,接收器按优先级顺序处理(优先级通过android:priority属性设置),高优先级接收器可中断广播或修改数据。在AndroidManifest.xml中声明,接收器常驻系统,应用未启动时也能响应(如监听开机事件)。实例短暂存活:方法执行完毕后实例销毁,不可保存状态。
2025-03-05 09:00:00
810
关于#企业微信#的问题,如何解决?
2023-04-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅