乐闻
TA的文章
Node 进程守护工具 pm2
Node进程守护工具pm2一个node，本身就用几行代码，就可以启动个server进程，监听个端口，为大家提供web服务Pm2启动进程的多种方式pm2startjs文件路径.jspm2startjson描述文件路径.jsonpm2startpython文件路径.py--interpreterpythonpm2startsh文件路径.sh--interpreterbashpm2start./node
Koa 快速搭建 Web 服务
Koa快速搭建Web服务创建项目文件夹，并系统终端切到文件夹npminit-ynpminstallkoa写一个最简单的web项目```javascript//引入koaconstKoa=require('koa');//初始化一个koa实例constapp=newKoa();//处理接口请求app.use(async(ctx,next)={ctx.body='levenx`sworld'})app
优化React应用性能：使用React.lazy和Suspense实现代码分割
当我们构建大型React应用时，随着功能的增加，打包后的JavaScript文件往往会变得非常庞大。这将导致用户在初次访问应用时需要等待长时间的页面加载。幸运的是，React提供了一种简洁的解决方案来优化这一问题：React.lazy和Suspense。本文将深入介绍它们的用法，并通过实际案例来演示如何应用这两个强大的特性。React.lazy简介React.lazy是React官方提供的一个内置
vscode node开发调试断点配置 launch.json
对于开发者来讲，怎么科学合理的进行程序调试是至关重要的。调试工具可以协助开发者清晰的看到程序的走向以及程序每一步执行的详细信息。开发前端项目，比如React,vue等，开发者可以直接在代码中插入debugger进行调试。Node程序调试，我们可以借助开发工具vscode提供的能力进行操作。调试配置选择调试选项，createalunch.jsonfile选择需要调试的环境，以Node程序调试系统
sequelize 关联关系（一对一、一对多、多对多）
准备工作为了演示sequelize的多表间关联关系，首先我先准备两个实体：user、role。1.初始化sequelize连接const{Sequelize,DataTypes}=require('sequelize');constsequelize=newSequelize({host:'127.0.0.1',port:3306,username:'roo
「自己动手丰衣足食」搭建React脚手架
前言刚开始学习React的朋友基本都是从Facebook官方提供create-react-app脚手架开始，别人的脚手架开箱即用固然爽，但是有的时候想要进行一些功能的拓展（集成less等)就需要去百度谷歌。因为脚手架把整个项目的编译构建过程高度集成了，我们想通过脚手架生成的代码学习项目工程化，刚开始肯定是大难度的。伟人曾道：自己动手，丰衣足食。为了更深层次的去学习react，去尝试理解react项
微信小程序 自定义组件
一、组件间传值定义组件//modal.wxmlbuttonbindtap='clickEvent'测试/button//modal.jsmethods:{clickEvent:function(e){varmyEventDetail={a:1,b:2,3:2};//提供给事件的监听函数varmyEventOption={};//触发事件的选项debuggerthis.triggerEvent(&#
PM2，node项目不可或缺的部署工具
PM2一个node，本身就用几行代码，就可以启动个server进程，监听个端口，为大家提供Web服务工具安装npminstallpm2-g一、命令行启动普通执行启动pm2startjs文件路径.js携带参数启动pm2start某种方式----param_nameparam_valuenpm脚本启动pm2startnpm--runpm2startyarn--run🌰举个例子项目结构普通启动npm脚
npm 工具集汇总
NPM工具集汇总Node包名说明KoaKoa-routerKoa-statickoa-static-cachekoa-bodyparserkoa-bodykoa-sendKoa-viewkoa-compress压缩koa-etag协商缓存koa-conditional-get协商缓存koa-helmet头盔；防护帽,加强服务端防御koa-csrfCsrfKoa-corsCorskoa-sessio
React 科学合理使用 Icon
React如何科学合理的使用Icon一、React使用IconParkIconparkIcon列表依赖包安装npminstall@icon-park/reactIcon组件使用importReact,{Component}from'react';import{Shield}from'@icon-park/react';exportdefaultclassIconex
React 使用 React Dnd 实现列表拖拽排序
拖拽排序功能在现代的网页应用中非常常见，它提供了一种直观、灵活的方式来让用户自定义内容的顺序。ReactDnd是基于HTML5的拖放API构建的，它能够让你轻松地在React应用中添加拖拽功能。本文介绍如何利用ReactDnd（DragandDrop）这个强大的库来实现一个简易的列表拖拽排序功能。实现步骤一、安装ReactDnd首先，我们需要在项目中安装ReactDnd及其HTML5后端库：np
前端快速入门Koa.js
插件机制是目前非常流行的拓展能力的设计方式，Koa框架是基于插件机制封装出来的一个Node HTTP框架，我将简单记录一下Koa的插件机制以及丰富的插件。
React 内置 Hook 之 useCallback 深度解析与使用案例
ReactHooks引入了一种全新的方式来处理state和其他React特性，让我们可以以更加声明式的风格去编写代码，从而使代码更加易读和可维护。其中，useCallback是一个常被提及但可能被大家误解或未能充分利用的hook。useCallback为我们提供了避免不必要渲染以及记住函数实例的能力，从而在性能优化上给我们开发者带来了新的手段。什么是useCallback简单来说，useCallb
React 内置 Hook 之 useState 深度解析与使用案例
我们都知道React从16.8版本开始引入了Hooks特性，这对于函数式组件来说是一次质的飞跃。它使得我们可以在不必写成class形式的情况下，使用state和其他特性，使代码更简洁，易读和易于测试。在所有的Hooks中，useState 可谓是基础而且非常关键的一个。我们可通过它在功能组件中声明和操作state，这对于传统只能在class组件中操作state的思维是一次重大改变。这次，
React 内置 Hook 之 useRef 深度解析与使用案例
ReactHooks已经成为了现代React开发中不可或缺的一部分，今天我们来深入研究一个特别有用的Hook——useRef。在这篇文章中，我们将引导你了解useRef的运用，并通过一些实例穿插其中，让你对这个Hook有更深入的理解。什么是useRefuseRef 是React的一个内置Hook，它可以返回一个可改变的ref对象，非常适合用于管理不会触发组件渲染的变量。用官方的话来说，一
React 内置 Hook 之 useReducer 优雅管理状态
在开发React应用程序时，状态管理一直是一个需我们重点关注的主题。而在React16.8的版本中，新引入的HooksAPI使得我们可以更加方便的在函数式组件中使用状态和其他React特性而无需写class。本文就详细的为你介绍一个非常强大的Hook：useReducer，它为复杂状态的管理提供了出色的解决方案。什么是useReduceruseReducer就如同它的名字暗示的那样，它是一个允许你
React Query 如何实现请求防抖
在前端开发中，优化用户体验和应用性能至关重要。ReactQuery是一个强大的数据同步库，它可以帮助开发者轻松管理服务器状态，而Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。本文将介绍如何结合ReactQuery和Lodash中的debounce函数实现请求防抖，优化频繁发起请求的场景。防抖（Debounce）基础在深入了解如何结合ReactQuery和Lodash之前
JavaScript 实现快速排序算法
快速排序，一种被广泛认可和使用的排序算法，因为其高效率和优秀的平均案例性能而闻名。它的核心理念是“分而治之”，通过递归的方式将大问题化成小问题解决。本篇文章将介绍如何使用JavaScript来实现这个算法，让你的数组排列得井井有条。基本思想快速排序的基本思想非常简单：选择基准值（Pivot）：从数组中选择一个元素作为基准值，通常选择第一个元素或最后一个元素。分区操作（Partitioning）：
Git 如何删除本地分支与删除远程分支
Git允许我们创建、合并甚至删除分支。本文将学习如何在Git中删除本地分支和远程分支。删除本地分支在删除一个本地分支之前，确保你没有切换到该分支上。如果你正处在要删除的分支上，请先切换到一个不同的分支：gitcheckoutmaster现在，你可以使用以下命令删除分支：gitbranch-d<branch_name>如果该分支有尚未合并的更改，Git会给你一个警告。如果你确定要删除这个
XSS防御:内容安全策略 CSP 使用实战与配置
公司部门安全合规改造计划，要求所有的Web站点统一添加CSP规则。对于CSP机制我只是之前在应付面试的时候背过相关的概念，并没有真正在项目中实践过。所以希望借助本次改造任务好好理解并实践CSP机制。CSP的全称是ContentSecurityPolicy，翻译成中文就是内容安全策略。CSP 通过告诉浏览器一系列规则，严格规定页面中哪些资源允许有哪些来源，不在指定范围内的通通拒绝。
TA的教程专栏
Agent Skills 精选资源库
系统收集和整理当前流行的 Agent Skills，围绕技能定位、适用场景、安装使用、工作流设计、最佳实践和案例实践展开。后续将根据指定 skill 清单逐篇补充内容。
AI Agent 实战教程：从原理到工程落地
系统学习 AI Agent 的核心概念与工程实践，覆盖 Agent 架构、Tool Calling、RAG、Memory、多 Agent 协作、MCP、安全授权与真实任务助手案例。
TailwindCSS 使用指南
Tailwind CSS 是一个流行的 CSS 工具库，它提供了一系列预定义的 CSS 类，可以帮助您轻松地创建漂亮的用户界面。本教程将帮助您深入了解 Tailwind CSS 的高级功能和技术，以帮助您更好地利用这个强大的工具库。 在本教程中，您将学习到： 如何使用 Tailwind CSS 的主题和变量来自定义外观和样式； 如何在 Tailwind CSS 中配置和使用插件来扩展其功能； 如何在 Tailwind CSS 中使用 JS 钩子和样式函数来创建动态样式； 如何在 Tailwind CSS 中创建响应式布局和样式； 如何在 Tailwind CSS 中使用 PurgeCSS 来优化和精简 CSS。 本教程适合那些已经有一定 Tailwind CSS 开发经验，并想要深入了解其高级功能和技术的开发人员。无论您是初学者还是有一定经验的 Tailwind CSS 开发人员，本教程都将为您提供宝贵的学习资源和实践经验。 让我们开始您的 Tailwind CSS 进阶之旅吧！
Typeorm 使用指南
TypeORM 是一个流行的 TypeScript ORM（对象关系映射）库，它可以帮助您轻松地将 TypeScript 类映射到关系型数据库表。本教程将帮助您深入了解 TypeORM 的高级功能和技术，以帮助您更好地利用这个强大的库。 在本教程中，您将学习到： 如何使用 TypeORM 中的高级查询和过滤功能来查询和操作数据库； 如何使用 TypeORM 中的实体继承和关系映射来创建复杂的数据模型； 如何使用 TypeORM 中的迁移和数据填充来管理数据库模式和数据； 如何在 TypeORM 中使用存储过程和触发器来扩展数据库功能； 如何在 TypeORM 中使用多数据库和分布式事务来管理复杂的应用程序。 本教程适合那些已经有一定 TypeORM 开发经验，并想要深入了解其高级功能和技术的开发人员。无论您是初学者还是有一定经验的 TypeORM 开发人员，本教程都将为您提供宝贵的学习资源和实践经验。 让我们开始您的 TypeORM 进阶之旅吧！
如何打造属于自己的React组件库
随着组件化开发成为前端开发的主流，拥有一套定制化的React组件库变得极其重要。本系列教程将指导你如何设计、开发和维护一个React组件库，不仅满足项目需求，而且易于共享和复用。我们将从React组件的基础知识开始，逐步讲解如何构建可复用组件、如何管理组件状态和生命周期、以及如何通过Prop Types和TypeScript进行类型检查。此外，你还将学习到如何利用Storybook来展示组件、使用Jest和Enzyme进行单元测试，以及如何将你的组件库发布到npm。 通过本系列教程的学习，你将获得创建自己React组件库的全部技能，为你的开发工作带来前所未有的效率和乐趣。
Mongoose 使用指南
在本教程中，我们将逐步探索Mongoose——一个在Node.js环境下与MongoDB数据库协同工作的强大库。从基本概念的铺垫到实用技巧的深度剖析，本系列覆盖了Schema设计、数据类型定义、模型创建、查询优化、插件扩展等核心主题。你将学习如何利用Mongoose的Schema来定义数据结构，实现数据验证和类型转换，以及如何通过模型进行数据的增删改查操作。 此外，教程将深入Mongoose的高级特性，包括但不限于索引管理、聚合框架、事务处理和数据迁移。我们将通过丰富的示例和练习，教你如何运用Mongoose来处理复杂查询、关联数据以及性能调优。 随后，本系列教程将深入讨论更高级的特性，如中间件（pre和post hooks）、数据校验、虚拟属性和实例方法，以及如何使用聚合管道进行复杂查询。此外，我们将详细介绍如何处理关系型数据，在Mongoose中实现文档的嵌入和引用，以及如何优雅地处理这些关系。 为了将理论与实践相结合，每一部分内容都包含了逐步的代码示例和实战小项目，帮助你更好地理解和运用Mongoose的功能。我们还会讨论性能调优、错误处理和最佳实践，以确保你能够构建既健壮又高效的Node.js应用。
CSS 入门指南
CSS 是一种用于描述文档样式和布局的样式表语言，它是 Web 开发中不可或缺的一部分。本教程将帮助您从零开始学习 CSS，了解其基本概念和语法，并逐步深入学习其高级特性和实践技巧。 在本教程中，您将学习到： CSS 基础知识，如选择器、盒模型、布局等； CSS 颜色、字体、背景和边框等样式属性的使用； CSS 媒体查询和响应式设计的实现； CSS 动画和过渡的实现技巧； CSS 预处理器，如 Sass、Less 的使用； CSS 框架，如 Bootstrap、Tailwind CSS 的使用。 本教程适合那些想要从零开始学习 CSS 的初学者。无论您是 Web 开发新手还是有一定经验的开发人员，本教程都将为您提供宝贵的学习资源和实践经验。 让我们开始您的 CSS 入门之旅吧！
React 入门宝典
React 是一个流行的 JavaScript 库，用于构建大规模、高性能的 Web 应用程序。本教程将帮助您从 React 的基础知识入门开始，逐步深入掌握 React 的高级概念和技术，以成为一名优秀的 React 开发人员。 在本教程中，您将学习到： React 的基础概念和核心原则，如组件、Props、State、生命周期等； 如何使用 JSX 语法编写 React 组件和模板； 如何使用 React 的事件处理、表单处理、样式管理等功能； 如何使用 React Router 实现单页应用程序； 如何使用 Redux 进行状态管理和数据流控制； 如何使用 React 的高级技术，如 Hooks、Context、Portal 等。 本教程适合那些已经有一定 JavaScript 编程经验，并希望进一步学习 React 技术的开发人员。无论您是初学者还是有一定经验的 React 开发人员，本教程都将为您提供宝贵的学习资源和实践经验。 让我们开始您的 React 之旅吧！
Web项目国际化通关手册
React 国际化是指将应用程序适配到不同的语言和地区的过程。在全球化时代，为您的应用程序提供多语言支持将为您的用户提供更好的用户体验，并帮助您扩大全球市场。本教程将帮助您学习如何在 React 应用程序中实现国际化。 在本教程中，您将学习到： React 国际化的基本概念和原则； 如何使用 React Intl 库来实现国际化； 如何在 React 中处理多语言文本、日期、时间和货币等； 如何在 React 中实现动态文本替换； 如何在 React 中切换不同的语言版本； 如何测试和调试国际化应用程序。 本教程适合那些已经有一定 React 开发经验，并想要扩展其应用程序的全球化能力的开发人员。通过本教程，您将学习如何使用 React Intl 库和其他现有工具来实现国际化，从而为您的应用程序提供更广泛的用户群和更好的用户体验。 让我们开始您的 React 国际化之旅吧！
Nodejs 学习指南
这是一套全面的Node.js学习指南，覆盖了从基础知识到高级应用的全部必备技能。本教程系列将带领你进入Node.js的世界，一个强大而灵活的JavaScript运行时环境，它让JavaScript不仅仅能在浏览器中运行。你将了解到如何设置Node.js环境、利用npm管理包，以及如何构建第一个应用程序。随着课程的深入，我们会探讨异步编程模型、中间件、RESTful API设计、数据库集成、安全性、测试以及性能优化等进阶主题。 无论你是初学者还是有志于成为全栈开发者，本教程都将为你提供一个扎实的Node.js学习基础和实践路径。
TA的问题
TA的面试题
- APT、DNF/YUM 和 Pacman 常见操作有哪些？Linux 下装软件，最怕的不是命令记不住，而是把不同发行版的包管理器混着用：Ubuntu 上找 `yum`，Arch 上只跑 `pacman -Sy`，RHEL 新版本里还在把 `yum` 当主角。结果轻则装不上包，重则依赖版本被搞乱。 这篇按日常运维最常见的场景整理 APT、DNF/YUM、Pacman 的用法：安装、升级、删除、查询、仓库管理、PPA/EPEL/AUR，以及遇到锁、依赖损坏、数据库异常时怎么处理。 ## 先分清它们分别用在哪些系统 | 包管理工具 | 常见发行版 | 底层包格式 | 说明 | |---|---|---|---| | APT | Debian、U...
- Linux 系统日志怎么查看、分析与轮转？## Linux 日志通常放在哪里？ Linux 排查问题，第一步往往不是重启服务，而是看日志。不同发行版路径略有差异，但大多数传统日志都在 `/var/log` 下。 常见路径：Debian/Ubuntu 系统综合日志是 `/var/log/syslog`，认证日志是 `/var/log/auth.log`；RHEL/CentOS/Rocky 常见 `/var/log/messages` 和 `/var/log/secure`。Web 服务日志常见 `/var/log/nginx/`、`/var/log/apache2/` 或 `/var/log/httpd/`。 很多新系统同时...
- Linux cron 时间格式怎么写？常用命令和最佳实践有哪些？## cron 是什么，适合解决什么问题？ cron 是 Linux/Unix 系统里最常见的定时任务工具，适合做周期性、可重复、对秒级精度要求不高的任务，比如清理日志、备份文件、同步数据、定时拉取接口、跑统计脚本。 它的特点是简单、稳定、系统内置；缺点是默认环境变量很少、日志不集中、任务错过后通常不会自动补跑。所以写 cron 任务时，不只要会写时间表达式，还要处理路径、日志、锁、时区和失败通知。 ## cron 时间格式怎么写？ 普通用户的 crontab 通常是 5 个时间字段加一条命令： ```bash * * * * * command # 分 时 日 月 周 命令 ...
- KVM、Docker、Kubernetes 有什么区别？适合哪些使用场景？KVM 是 Linux 上的全虚拟化方案，Docker 是容器运行与镜像分发方案，Kubernetes 严格来说不是虚拟化技术，而是容器编排平台。三者常被放在一起比较，是因为它们都能解决“如何把应用隔离、部署和迁移”的问题，但隔离层级完全不同：KVM 隔离到操作系统内核，Docker 容器共享宿主机内核，Kubernetes 负责把大量容器调度到多台机器上运行。 ## KVM 适合什么场景？ KVM 把 Linux 内核变成 Hypervisor，通过 CPU 的 VT-x、AMD-V 等硬件虚拟化能力运行完整虚拟机。每个虚拟机都有自己的内核、磁盘、网卡和系统环境，隔离性强，适合多租...
- Linux 内核参数调优常用网络内存参数有哪些？## Linux 内核参数调优先看什么？ Linux 内核参数调优常见入口是 `sysctl`，参数主要分布在网络、内存、文件系统、进程资源和安全几个方向。它不是把网上的配置复制一遍就完事，而是要结合业务负载、机器规格、连接量、磁盘类型和监控数据逐项验证。 最稳妥的做法是：先记录当前值，再小步修改，观察指标，最后写入 `/etc/sysctl.d/*.conf` 持久化。 ```bash sysctl net.core.somaxconn sysctl -w net.core.somaxconn=4096 sysctl -a | grep tcp ``` 持久化示例： ```b...
- Linux ulimit 如何配置资源限制并排查常见问题？Linux 里的 `ulimit` 用来限制一个 shell 以及它启动的子进程能使用多少系统资源。它最常见的用途，是防止某个程序打开太多文件、创建太多进程、占用过多栈空间，或者在崩溃时不生成 core 文件。 不过 `ulimit` 容易被误解：你在命令行里执行 `ulimit -n 65535`，只影响当前 shell 和它后面启动的进程；已经运行的服务不会自动改变；由 systemd 管理的服务，也不会因为你改了 `/etc/security/limits.conf` 就一定生效。 ## ulimit 到底限制什么？ `ulimit` 本质上是 shell 内置命令，用来查看...
- Tailwind CSS 是什么？它和传统 CSS 框架有什么区别？如果你第一次看到 Tailwind CSS 写出来的 HTML，大概率会愣一下：一个按钮上怎么塞了这么多 class？ ```html <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">保存</button> ``` 这就是 Tailwind CSS 的核心思路：不先写一个 `.btn-primary`，而是直接用一组小颗粒度的工具类把样式拼出来。它不是 Bootstrap 那种“拿来就有按钮、卡片、导航栏”的组件框架，而是一套 utili...
- tailwind.config.js 常用配置项有哪些？v3/v4 怎么选？在 Tailwind CSS v3 项目里，`tailwind.config.js` 通常用来控制三件事：扫描哪些源码、设计系统怎么定义、哪些框架行为需要调整。常见配置项包括 `content`、`theme`、`extend`、`plugins`、`presets`、`darkMode`、`corePlugins`、`important`、`prefix`、`separator` 和 `safelist`。 到了 Tailwind CSS v4，官方更推荐 CSS-first 配置，很多主题值、扫描路径和工具类扩展会写在 CSS 里，例如 `@theme`、`@source`、`@u...
- Tailwind CSS 响应式断点怎么用？常用类有哪些？Tailwind CSS 做响应式设计，核心不是写很多媒体查询，而是在工具类前面加断点前缀。无前缀的类先作为移动端默认样式，`md:`、`lg:` 这类前缀再从指定宽度开始覆盖它。 一句话记法：**默认写手机样式，屏幕变大后再逐步加前缀调整布局、字号、间距、显示隐藏和宽度。** ## Tailwind CSS 默认断点有哪些？ Tailwind CSS 默认断点是移动优先的 `min-width` 断点：`sm` 640px，`md` 768px，`lg` 1024px，`xl` 1280px，`2xl` 1536px。 ```html <div class="text-sm m...
- Tailwind CSS 深色模式怎么实现，常用 dark 类有哪些？Tailwind CSS 做深色模式，核心不是写两套 CSS，而是选好触发方式，然后在需要变化的地方加 `dark:` 变体。常见写法大概分两类：跟随系统的 `media`，以及由页面上的 `.dark` 或自定义选择器控制的 `class/selector`。前者省事，后者更适合带主题切换按钮的产品。 ## 先选深色模式触发方式 `media` 使用浏览器的 `prefers-color-scheme`，用户系统是深色，页面就走深色样式。 ```js export default { darkMode: 'media' } ``` 适合页面不需要主题切换按钮、希望完全尊重系统设...
- 获得 0 次点赞
- 内容获得 0 次评论
- 获得 0 次收藏