m0_68716504的博客

原创 Vue项目，前端如何来做登录密码加密传输？

在 Vue 3 前端实现登录密码加密传输，核心目标是（避免被中间人窃听，尽管 HTTPS 是基础，但在高安全要求场景下通常需要应用层二次加密）。。通常采用非对称加密算法或。以下是基于的完整实现方案。

原创 响应式设计：一套代码适配多端

现在的互联网世界，用户可能用各种设备访问你的网站：有人用折叠屏手机，有人用iPad Pro，还有人用带鱼屏显示器。作为前端开发者，我们不能为每种设备单独开发一个网站（那得累死）。响应式设计就是来解决这个问题的——它让同一个页面在不同屏幕尺寸下自动调整布局，始终提供良好的阅读体验。流式布局、弹性图片、媒体查询。掌握了这三板斧，你就能让页面像水一样，装进任何形状的容器。响应式设计不是一项单独的技术，而是多种技术的组合拳。流式布局：使用相对单位（%、flex、grid）让容器自适应。弹性图片防止图片溢出。

原创 Input 类型大全

最常用的单行文本输入框。

原创 Windi CSS

什么？预设的数值不够你用？方括号一包，想写什么写什么。这就是口诀里说的"想不起来用方扩"。

原创 vue3项目优化方案

减少 DOM 元素数量：虚拟列表、分页加载是核心手段；减轻渲染压力：懒加载、拆分组件、v-once 标记静态内容；避免不必要的操作：markRaw 精简响应式、简化 CSS 选择器、requestAnimationFrame 优化滚动。

原创 Day.js基本使用

在 Vue3 项目开发中，时间处理是绕不开的高频需求——比如格式化接口返回的时间戳、计算两个日期的差值、转换时区、展示相对时间（如“3分钟前”）。提到时间处理，很多开发者会先想到 Moment.js，但它体积偏大（约200KB+），在追求轻量的 Vue3 项目中显得有些“笨重”。而Day.js作为 Moment.js 的轻量替代方案，体积仅10KB左右（压缩后），API 与 Moment.js 高度兼容，无需额外学习成本，完美适配 Vue3 的开发场景。

原创 vue3-signature实现电子签名

在数字化办公的当下，电子合同签署、公务在线办理、审批流程签字…… 手写签名的电子化需求随处可见。但如果从零开始用 Canvas 开发手写签名功能，既要处理鼠标 / 触摸事件，又要做兼容适配，费时又费力。今天给大家安利一款 Vue3 专属的手写签名神器 ——组件，底层基于 Canvas 封装，核心功能一键调用，5 分钟就能集成到项目中，不用再写复杂的原生 Canvas 代码，新手也能轻松拿捏！

原创 Electron生命周期

【代码】Electron生命周期。

原创 Electron

窗口透明 无边框设置后生效 frame:false,二.渲染进程向主进程通信解决（比较推荐）一.渲染进程添加样式解决。

原创 Electron 项目结构简介

原创 Electron渲染进程向主进程通信

/ 渲染进程向主进程发送需要用到invokewindow.electron.ipcRenderer.invoke('名称', 向主进程传递的参数)

原创 在Vue3中如何防止用户重复提交？

用户重复提交是一个常见问题。用户点击按钮后没有立即看到反馈，会再次点击。这导致重复请求，增加服务器压力，可能产生重复数据。

原创 TypeScript

function sum(n1:number,n2:string):string{ //括号内表示输入类型 ,括号后面表示输出类型(返回类型)return n1+n2 //返回stringsum(1,'2'):string):Array<string|number>{ //表示返回一个数组必须是string和number类型 n2可传可不传sum(1,'2')function sum1(n1:number,n2:string):void{ //没有返回值用void定义if(n1>n2){

原创 JavaScript中的常见内存泄漏场景

内存泄漏指程序中分配的内存没有被及时释放，导致内存占用不断增加。这会影响应用性能，甚至导致应用崩溃。JavaScript中，需要特别注意避免内存泄漏。

原创 使用vue-cropperjs实现图片裁剪

【代码】使用vue-cropperjs实现图片裁剪。

原创 2025 Vue 最全的生态工具组合推荐指南

虽然 Vue2 很多项目在用，但是官方已经宣布不在维护 Vue2，所以新项目肯定首选 Vue3 来进行开发，组合式 API 开发起来比选项式 API 方便多了，而且 Vue3 的响应式实现也更加合理，对 typescript 的支持也更好，打包体积也更小，模板编译加入了静态节点提升的优化。Axios 无疑是当今 Http 请求库的王者，无论是 Node 还是浏览器端，它都能很好地支持，且配置起来比较灵活，拓展性非常强，难怪下载量一直居高不下。老牌表格组件库了，功能超级多，没有做不到的，只有你想不到的。

原创 事件循环机制

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

原创 nrm管理npm源

无论你是在Windows、Linux还是macOS上，通常都可以通过npm（Node Package Manager）来全局安装nrm。首先，确保你已经安装了Node.js，因为npm是Node.js的包管理器，会随Node.js一起安装。

原创 uniapp

在开发uniapp Vue3版本的时候，不能像vue2的选项式API一样，可以直接使用onLoad、onShow等，在组合式API中需要先从“@dcloudio/uni-app”模块中导入才可以。uniapp页面生命周期函数与 Vue.js 的生命周期函数有所不同，因为 uni-app 是基于 Vue.js 的跨平台应用框架，因此它具有自己特定的生命周期函数。可以在这些生命周期函数中编写相应的逻辑代码，以便在不同阶段对页面进行初始化、展示、隐藏和卸载时执行特定的操作。

原创 css3 变量 和 计算calc

【代码】css3 变量 和 计算calc。

原创 ​​抛弃 forEach，让数组遍历更高效

多年来，forEach方法因其简洁易读的语法成为了我们处理数组的首选。然而，随着性能要求的提高和更多数组方法的出现，是时候重新评估我们的数组遍历策略了。

原创 vue3封装el-dialog

vue3封装dialog

原创 vue3实现分片上传

【代码】vue3实现分片上传。

原创 css - 滤镜

backdrop-filter 是css中的图像滤镜属性，主要用于对元素背后的区域(即"配合使用，能实现类似 "毛玻璃" 的视觉效果。

原创 vue3 - 封装Echarts

config文件夹下新建index.ts 用来按需引入echarts。Echarts下新建config文件夹 index.vue文件。

原创 Eacherts封装按需引入

【代码】Eacherts封装按需引入。

原创 vue - 使用canvas绘制验证码

摘要：本文实现了一个基于Vue3的验证码组件verify-code.vue，包含随机字符生成、画布绘制和点击刷新功能。组件支持自定义宽度、高度和验证码长度，通过canvas绘制带干扰线和噪点的验证码图片，并暴露刷新方法。使用示例展示了如何集成该组件，包括验证码比对和错误处理逻辑。组件特点包括：随机字符生成、动态变形文字、干扰线/噪点增强安全性，以及点击刷新交互功能。

原创 Node.js - 创建 Express 项目

本文介绍了如何创建Express后端项目。首先需全局安装express-generator，在Windows系统可能需以管理员身份修改执行策略。创建项目时使用express --no-view clwy-api命令避免视图模板，专注于API开发。安装依赖后启动服务访问localhost:3000。将路由响应改为JSON格式输出，并强调需删除默认的index.html文件。最后推荐安装nodemon实现代码修改自动重启，提升开发效率。整个流程包括：项目创建、JSON接口开发、nodemon配置等关键步骤

原创 React 中使用immer修改state摆脱“不可变”

总结：Immer 是一个非常强大的库，它让我们可以以可变的方式编写代码，而最终得到的是不可变的数据。在 React 中使用 Immer 可以简化状态更新逻辑，提高代码的简洁性、减少错误、提高开发效率和代码的可维护性。无论是处理简单的状态还是复杂的嵌套状态，Immer 都能帮助我们轻松应对。

原创 React -自定义hooks - 封装双向数据绑定

主要是单向数据流，所以双向绑定不像Vue那样直接有v-model。那在React里通常是怎么做的呢？

原创 React - 封装懒加载函数

【代码】React - 封装懒加载函数。

原创 React - 根据路由生成菜单

递归转换 menuList 为 Ant Design Menu 的 items 格式。

原创 React动态路由

【代码】react动态路由。

原创 React - css 模块化(modules)

因为 React 没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样式冲突问题，也就是把每个组件的样式做成单独的作用域，实现样式隔离，而css modules就是一种解决方案，但是我们需要借助一些工具来实现，比如webpack，postcss，css-loader，vite等。

原创 React - createPortal

注意这是一个API，不是组件，他的作用是：将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。

原创 React - Suspense异步渲染

Suspense 是一种异步渲染机制，其核心理念是在组件加载或数据获取过程中，先展示一个占位符（loading state），从而实现更自然用户界面更新体验。

原创 React-ts

根据初始值自动推断类型 比较适合明确的初始值。

原创 React状态管理库 - zustand

zustand 是一个轻量级、快速且可扩展的 React 状态管理库，旨在提供一种简单直接的方式来管理应用状态，而无需其他解决方案通常伴随的繁琐代码。根据官方 Zustand 文档，Zustand 是“一个使用简化 flux 原理的小型、快速且可扩展的精简状态管理解决方案”。它允许开发者创建包含状态和操作的 store，这些 store 可以通过 React hooks 进行访问和更新。

原创 React-forwardRef-useImperativeHandle

作用：使用ref暴露DOM节点给父组件。

原创 React-React.memo-props比较机制

作用：允许组件在Props没有改变的情况下跳过渲染react组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染如果子组件本身不需要做重新渲染，就会存在浪费，memo就可以实现。