FungLeo's Blog

本文介绍了如何在Ubuntu服务器上配置虚拟内存(SWAP)以解决内存不足导致系统卡死的问题。作者通过检查发现服务器仅有2G物理内存且未配置虚拟内存，导致编译任务失败。文章详细说明了创建4G大小SWAP文件的步骤，包括创建文件、设置权限、格式化为交换空间并启用；同时介绍了如何设置开机自动挂载SWAP文件，以及如何调整SWAP文件大小的方法。最后建议虚拟内存大小应为物理内存的1-2倍，若内存过小应考虑升级服务器配置。该教程同样适用于其他Linux发行版。

本文介绍了基于Koa的两种会话管理方案：JWT和传统存储型Session。JWT方案使用jsonwebtoken库实现，包含创建和验证Token的核心代码，通过计算复杂度取代存储复杂性。传统Session方案采用内存存储方式，详细展示了Token的创建、存储、验证和更新逻辑，适用于需要存储型会话管理的场景。文章提供了GitHub项目地址（https://github.com/fengcms/session-study-demo）供参考，并强调概念理解的重要性，建议开发者结合前文《NodeJS Koa 后端用

摘要 本文详细讲解了基于JWT和Session混合的"长短Token"会话管理方案的核心实现。代码演示了如何生成15分钟有效的JWT长Token和7天有效的存储型短Token对，并提供了严格的验证逻辑。长Token用于日常业务请求，短Token用于刷新长Token。文中还包含了Token清理机制和完整的接口示例，展示了从生成、验证到刷新Token的全流程。这种方案结合了两种技术的优势，但也存在复杂度增加的缺点，作者建议谨慎评估使用场景。

本文深入讲解Web用户会话管理的核心概念，包括Session、Token、Cookies和JWT等技术的原理与区别。通过对比传统存储方案和JWT方案的优缺点，分析长短Token的混合实现策略，帮助开发者根据项目需求选择合适的会话管理方案。文章通俗易懂地解释了这些常令初学者困惑的技术概念，并给出实际项目选型建议。

摘要：本文介绍了终端复用工具tmux的核心功能与基本操作。tmux作为SSH管理的利器，主要解决了会话持久化（网络中断不影响进程）、多窗口/面板管理等痛点。文章详细讲解了安装方法、会话命名、Tab切换、窗口分割（垂直/水平）、区域跳转等高频操作，并提供了常用快捷键速查表。作者建议掌握基础功能即可，无需过度配置，强调tmux的核心价值在于保持工作环境持久化，提升服务器管理效率。全文以实用为导向，适合开发者快速上手这一终端效率工具。

本文介绍了PM2进程管理工具的核心功能。PM2作为Node.js生态主流工具，提供进程守护、集群模式、日志管理和系统集成等功能，能有效解决传统nohup或tmux方案的局限性。文章演示了PM2安装方法（npm install pm2 -g）和实际项目部署步骤，包括目录权限调整和进程启动命令。最后提供了常用命令速查表，涵盖进程管理、日志监控等高频操作，帮助开发者快速掌握生产环境下的NodeJS服务管理技巧。

本文介绍了如何在Ubuntu服务器上安装和配置Nginx与MySQL服务。首先通过apt命令安装Nginx并设置开机启动，详细讲解了Nginx的常用配置，包括工作进程、日志格式、反向代理等。随后安装MySQL服务并配置自启动。文章重点解析了Nginx的配置文件结构，提供了多站点配置示例，涵盖域名绑定、静态文件服务、反向代理和SPA应用支持等常见场景。适用于开发环境搭建，但建议生产环境由专业运维人员管理。

本文主要介绍了在Ubuntu Server服务器上安装和配置NodeJS环境。首先推荐使用nvm作为Node版本管理器，详细说明了nvm的安装步骤和常见命令。接着演示了安装NodeJS 22版本的过程，并建议将npm源设置为阿里源以提高下载速度。文章还对比了npm和pnpm的核心功能差异，推荐安装pnpm作为包管理工具，并给出具体安装命令。最后作者表示将在后续文章中继续讲解Nginx等工具的安装配置。本文是Ubuntu Server服务器配置系列教程的第五篇，为前端开发者提供了服务器环境搭建的实用指南。

本文介绍了如何在Ubuntu Server服务器上优化终端环境。首先将默认的bash终端替换为功能更强的zsh，并安装Oh My Zsh配置管理框架提升使用体验。接着配置Vim编辑器，通过作者的GitHub配置文件简化设置过程，使Vim具备更美观的界面和实用插件。文章还提供了完整的终端解释器对比和Vim配置步骤。该教程是Ubuntu Server服务器配置系列中的第四篇，后续将涵盖NodeJS、Nginx、MySQL等环境搭建。适合希望提升Linux服务器终端使用体验的开发者参考。

本文介绍了Ubuntu Server系统的后续配置步骤，包括更新系统和安装常用软件。首先指导将软件源替换为阿里源以提升下载速度，然后通过apt命令更新系统软件包。接着详细介绍了7个服务器常用工具的安装与基本用法：git版本控制、vim文本编辑、wget下载工具、curl网络请求、tmux终端复用、htop进程监控和jq JSON处理。这些工具涵盖了版本管理、文件编辑、网络操作、系统监控等服务器日常使用场景。文章还预告了后续将发布的服务器配置系列教程，包括NodeJS环境搭建、Nginx配置等内容。所有操作均

本文详细介绍了如何远程连接PVE虚拟化平台上的Ubuntu服务器，并配置SSH密钥登录。主要内容包括： 在Mac和Windows上通过SSH密码连接服务器的步骤 使用Ed25519算法生成SSH密钥对的方法 通过ssh-copy-id命令或手动方式将公钥上传至服务器 配置SSH别名简化登录 关闭密码登录增强安全性 文章对比了Mac和Windows的操作差异，指出Windows终端功能已大幅改进。最终实现免密、安全的SSH远程登录，为后续服务器管理打下基础。

本文详细记录了在PVE虚拟环境中安装Ubuntu 24.04 LTS服务器版的全过程，包括系统镜像下载、虚拟机配置、系统安装步骤等关键环节。重点强调了国内用户应更换为阿里云镜像源以提升安装速度，并提供了完整的网络配置、分区设置和SSH安装指南。文章特别针对新手用户，详细说明了每个安装步骤的操作方法，包括如何使用Tab键切换焦点等实用技巧，是一份完整的Ubuntu服务器部署教程。

本文记录了将基于webpack+vue2的老项目升级到vite+vue3的全过程。作者采用create-vue脚手架构建新项目框架，整体迁移src目录后逐一解决问题：替换node-sass为sass、补全文件后缀、更新加密算法等核心代码、转换webpack特性到vite方案、调整env变量命名方式。最终使用Biome替代eslint实现代码格式化，通过配置biome.json和添加格式化命令完成升级。文章详细记录了每个关键步骤，包括版本信息(节点v22.14.0/pnpm10.4.1)、具体命令和配置代码，

这篇文章介绍了在MacOS终端中快速调整光标的解决方案。作者指出，在未设置的情况下，使用option + b/f会输入特殊字符。文章提供了VSCode等编辑器中的解决方案：在设置中勾选macOptionIsMeta选项即可恢复快捷键功能。此外，文章还补充了终端操作的常用快捷键表格，包括通用快捷键、文本编辑类、窗口管理类以及MacOS特有适配等各类操作说明，为读者提供了全面的终端使用参考。

本文介绍了如何使用浏览器原生Fetch API实现文件下载功能。通过封装核心请求函数，支持GET/POST请求和文件下载处理。下载文件时从响应头获取文件名，创建Blob对象和临时URL完成下载。相比Axios方案代码更简洁，作者预测Fetch将逐渐取代Axios。主要步骤包括：设置认证头、处理响应Blob、提取文件名、生成下载链接等。该方法适用于需要鉴权的接口文件下载场景。

本文介绍了如何使用axios实现需要鉴权的文件下载功能。作者通过配置axios返回blob对象，在后处理器中处理文件下载请求，然后在前端创建临时下载链接来实现文件下载。核心代码包括：1)在axios拦截器中判断responseType为blob时直接返回响应；2)在调用接口时指定responseType为blob，并使用Blob对象和a标签实现下载。该方法解决了需要鉴权的文件下载问题，适合基于axios的项目使用。

本文是《Nodejs实现Mysql数据库备份》的续篇，主要解决备份文件的安全下载问题。作者通过Koa框架实现三个核心功能：1)获取.sql备份文件列表（含文件名、大小和创建时间）；2)安全下载接口，避免直接暴露静态目录；3)清理过期备份功能。文中重点演示了fs模块的文件操作技巧和HTTP响应头设置方法，并强调不可使用koa-static直接暴露备份目录的安全隐患。通过代码示例和效果图，展示了Node.js文件系统在Web服务中的实际应用。

本文介绍了如何通过Node.js实现MySQL数据库备份功能。作者原本计划使用mysqldump命令，但因数据库服务器与应用服务器分离，改为通过SQL实现备份。文章提供了完整的Node.js代码实现，包括连接数据库、获取表结构、导出数据为SQL文件等功能。代码通过处理特殊字符和日期格式确保了备份数据的准确性，但作者指出该方案仅适用于数据量较小的项目，大数据量建议使用专业备份工具。文章还分享了借助AI调试代码的实践经验，并邀请读者对实现方案提出优化建议。

摘要：Next.js 15.1.8 项目编译成功后启动时出现错误，提示Webpack与Turbopack绑定冲突。尝试用AI工具分析未果，最终通过搜索发现是Next.js底层可能存在的随机性编译问题。解决方案是重新执行pnpm run build，再次启动后问题消失。该问题可能与框架内部BUG相关，建议遇到类似错误的开发者尝试重新编译解决。文章旨在为同类问题提供快速参考，节省调试时间。（150字）

本文分享了作者在升级Web系统用户密码管理流程中遇到的RSA加密问题及其解决方案。作者在Node.js v22环境下，发现原有的pkcs1格式和1024位密钥不再安全，且前端常用的JSEncrypt库已过时。经过多次尝试，作者最终选择使用node-forge库处理后端加密，并采用现代浏览器支持的Web Crypto API替代JSEncrypt进行前端加密。关键点包括生成2048位密钥、处理公钥格式转换，以及解决SHA-256加密时的密钥长度限制问题。最终，作者成功实现了安全且兼容的加密流程。

怎么设计一个安全的 web 系统的用户密码管理流程呢？我觉得"前端不知明文，后端不知原密"是非常重要的，看看我是如何设计的吧！

next.js 配置接口代理 proxy最近有一个小项目，打算使用 next.js 框架来做。这是我第一次使用该框架，没有太多的经验。按照官方的方法，初始化好项目，然后就能跑起来了。但是，我需要配置一下代理，用以请求数据，百度了一下，搞不起来，可能是因为资料版本比较老旧的原因。在 google 上搜索了一下，顺利解决了这个问题。因此撰文记录一下。安装所需依赖npm install express http-proxy-middleware -D有 nodejs 基础的话，可以看到，这两个依赖是非

react-typescript-sass-standard-template项目简介由于 Create React App 脚手架创建的项目过于简陋，没有集成诸如 eslint 等工具，致使每次在开发 react 项目的时候，就要颇费一番周折。针对这种不便，我搞了这个模板仓库。仓库地址：https://github.com/fengcms/react-typescript-sass-standard-template我的构建思想css 和 js 分离。我很不喜欢在 js 中写 css。所以，我

CentOS 8 配置 authorized_keys 后，登录失败的排查以及最终的解决安装好系统后，照例新增了 /root/.ssh/authorized_keys 文件，并将我的公钥粘贴进去，然后就准备免密登录了。但是，告诉我，要输入密码-_-|||我嘞个娘亲哎，这么多年，第一次遇到这种情况。于是开始排查。首先根据网上的说法，排查了文件的权限，然后发现，木有问题。。没办法了，我重新配置 /etc/ssh/sshd_config 文件，将日志调整为 DEBUG 模式LogLevel DEBUG

CentOS8 安装时，如何配置安装源今天临时需要跑 CentOS 系统，于是在 http://mirrors.163.com/centos/8.3.2011/isos/x86_64/CentOS-8.3.2011-x86_64-boot.iso 地址，下载了一个基础镜像文件，然后在虚拟机软件中进行安装。安装过程中，发现不少问题。如下图首先，我们点击网络和主机名，进去打开网络。再点击左上角的完成，退出来可以看到，网络问题已经解决了。然后点击 安装目的地直接点击右上角完成，回到配置页面，可

一个超简单的接口 Mock 工具升级版介绍，各位前端同学记得收藏哦！这是一个我自己发起的项目，Github 地址是 https://github.com/fengcms/simple-mock ，其完整支持 RESTFul 接口的 Mock 服务。当然，支持非 RESTFul 风格接口也不在话下，关键是使用十分简便。我在接口演示文件里面，演示了 RESTFul 标准写法、分页列表、上传文件、登录接口等等多种。通过简单配置，还可以支持校验登录状态。此外，还支持将其它的接口代理过来使用。我本着最不需要额

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化在我讲 vue 3.0 的普通组件的内容里，我提到了具名插槽发生了变化，我当时不清楚新的如何使用。今天查看了一些资料，终于搞明白了。搞一个带具名插槽的子组件直接撸代码：<template> <table> <tr> <th>默认插槽：</th> <td><slot /></td&g

vue3.0 Composition API 上手初体验 用路由循环，做个导航菜单通过前文的讲述，我已经基本讲清楚了 vue 3.0 的新特性，以及开发使用方法。只是演示 Demo 搞了好几个页面，只能输入地址进行跳转让我不爽，于是，我给我的 Demo 代码搞了个菜单，这里，我把这部分内容讲述一下。重构 src/router/index.js 文件在原来编写的代码中，我给单条路由只写了 path 和 component 两个参数，这里，我们加上 meta 参数，并为其设置 title 属性。相关代码如

vue3.0 Composition API 上手初体验 函数组件的开发与使用在上一节中，我们讨论了普通组件的开发与使用，其实相比较 vue 2.0 来说，差别并不大。vue 3.0 的 Composition API 带来的最大的特性，就是函数组件。通过函数组件，我们可以体会到 类似 react 编程的愉悦。这个章节，我们就来讨论一下。在 vue 2.0 中，当多个页面或组件使用到相同逻辑的时候，我们会使用 mixin 来编写逻辑。其实我个人在使用 mixin 时，感觉还是很方便的，但是当项目组的其

vue3.0 Composition API 上手初体验 普通组件的开发与使用通过前面的章节的讲解，我相信大家对于 vue 3.0 的新特性的基本使用，已经没有问题了。但是新的问题来了，组件是怎么玩的呢？这一讲，我们就来讨论一下，组件的开发与使用。写一个 button 组件首先，我们来创建一个按钮组件的文件# 进入项目文件夹cd ~/Sites/myWork/demo/vue3-demo# 创建组件文件夹mkdir -p src/components# 创建按钮组件touch src/c

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed上一讲中，我们讲解了 vue 3.0 的生命周期，我相信大家已经了然了。在 vue 中，计算属性 computed 是非常常用的。那么，在 vue 3.0 中，计算属性是如何使用的呢？这一讲我们来着重讨论，。上代码！首先，我们新建 src/views/Computed.vue 文件，并在路由中设定路由为 computed。不会操作的看上一讲的演示。然后编写如下代码：<temp

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (三) 生命周期函数通过前面两讲，我相信大家对于 vue 3.0 双向绑定数据，已经有了一些了解了。但是，对于生命周期函数，还是一脸懵逼的。这一讲，我们来讲解生命周期函数。vue 2.0 生命周期对比 3.0 生命周期2.0 周期名称3.0 周期名称说明beforeCreatesetup组件创建之前createdsetup组件创建完成beforeMountonBeforeM

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (二) 响应对象数据的绑定上文中，我们已经了解普通响应数据的绑定了。但是，那只是普通数据，我们在实际开发中，用到的对象数据是最多的。这一讲，我们就来讲讲响应对象数据的绑定。开干。编辑 src/views/About.vue 文件编写代码如下：<template> <router-link to="/">点这里去首页</router-link> <hr> &

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定从网上大家对于 vue 3.0 的最大的变化，就是 Vue Composition API 的看法来说，两极分化比较严重。一种是认为这种写法实在太优秀了，很好，很喜欢。另外一种则认为变得没有以前那么清晰了，增加了学习成本。那么我是怎么认为的呢？当然是第一种想法啊！你可知道，曾经我一度感觉到 vue 的语法实在是太过于变态，进而放弃使用 react 开发一年有余。后来因为来上海，入职的公司都是 vue

vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用前两讲，我们已经顺利的使用 vue3.0 将项目跑起来了。但是实在是过于简陋，目前我们几乎不可能开发只有一个页面的应用。因此，vue-router 是必不可少的。这一讲，我们就来讲讲最新的 vue-router 配合 vue3.0 是如何玩的。首先，我们进入我们的项目目录，安装依赖。我的 demo 目录为 ~/Sites/myWork/demo/vue3-demo。本人为 MacOS 环境， Wind

vue3.0 Composition API 上手初体验 构建 vue 基础代码上一讲中，我们通过配置 webpack 构建了一个基础的开发环境。但是并没有涉及到 vue3.0 的内容，这一讲中，我们来构建一些基础代码。首先，在终端中进入到我们的项目目录，我的 demo 目录为 ~/Sites/myWork/demo/vue3-demo。本人为 MacOS 环境， Windows 环境请自行将一些命令转换成你习惯的操作。比如在文件夹中操作，或在 vscode 等编辑器中操作。创建基础文件# 进

vue3.0 Composition API 上手初体验 构建基本项目开发环境目前，vue3.0 已经进入了 beta 版本了。众多的特性已经定下来了，相信有不少朋友都已经开始阅读相关的资料或源码了。虽然我现在工作比较劳累，但是对于这样的前端行业的盛事，我也不能袖手旁观哪！所以，我决定写一个系列的文章，来带大家上手一下全新的 vue3.0。首先，从目前公开信息来看，vue3.0 是完全兼容 2.0 版本的所有写法的。因此，即便不了解 3.0 的内容，用原有的知识储备，也是完全可以使用 3.0 版本的。

mac 下使用 iTerm 终端工具无法使用 alt+b 和 alt+f 快捷键的解决方法对于常在终端下工作的人来说，输入命令是家常便饭。但是当我们的命令输入错误的时候，需要调整就比较麻烦了。一般来说，不经过学习都知道，使用左右方向键可以在输入的字母上进行跳转。但是问题是，这样操作效率太低。因此，我们常用的命令有下面几个： 命令 解释 ctrl+a 跳转到命令最前面 ctrl+e

ES6 解构赋值的详细说明，建议给为前端收藏！相较于常规的赋值方式,解构赋值最主要的是’解构’两个字,在赋值的过程中要清晰的知道等号右边的结构.先简单地看一下原来的赋值方式.var a=[1,2]　　分析一下这句代码的几个点:(1)变量申明和赋值/* 你可以理解这两个操作是分开的,虽然是一句代码. 声明变量都会出现变量名的提升(也就是是声明变量的这句代码会被提升到生效作用域的...

linux 或 mac 命令行更优雅的使用 curl 命令，以及命令行常用的快捷键说明最近看了一下我的博客的访问统计，作为一个前端博主，没有想到我阅读量最高的一篇博文居然是介绍如何在命令行使用 curl 命令的文章《curl 模拟 GET\POST 请求，以及 curl post 上传文件》。这实在是太让我惊讶了，看来大家对于命令行的使用还是有很多需求的。因此，我这里这篇文章，如果能让各位看官...