- 博客(38)
- 收藏
- 关注
RSS订阅原创 MongoDB的基本操作（适配Node.js全栈项目）
Schema用于约束文档结构（字段类型、默认值、验证规则等），Model是 Schema 的实例化，对应 MongoDB 的 Collection。// 定义用户 Schematype: String, // 字段类型required: true, // 必传unique: true, // 唯一（不可重复）trim: true // 自动去除首尾空格},age: {min: 0, // 最小值验证default: 0 // 默认值},email: {
2025-11-13 15:55:02
916
原创 Redis缓存的应用（如接口数据缓存）
Redis 作为接口数据缓存的核心工具，通过合理的键设计过期时间更新策略可显著提升系统性能。实际应用中需重点解决缓存穿透击穿雪崩等问题，并保证 Redis 高可用。核心原则：“缓存高频读、低频写的数据，设置合理过期时间，保持缓存与数据库最终一致”。
2025-11-13 15:53:22
362
原创 Vue Router：动态路由、路由懒加载、导航守卫的实战应用
/ 打包后会生成 dashboard.[hash].js动态路由：解决路径参数变化场景，通过获取参数。路由懒加载：通过import()拆分代码，优化首屏性能，配合魔法注释自定义 chunk。导航守卫：全局/路由/组件级守卫分别用于全局控制、路由独享控制、组件内控制，核心是通过next()控制跳转流程。合理结合这三个特性，可构建高性能、高安全性的 Vue 路由系统。
2025-11-12 10:25:17
784
1
原创 Next.js与Nuxt3的SSR/SSG实现原理，各自的优势是什么？
Next.js更适合 React 技术栈的团队，尤其在需要利用 React Server Components、复杂路由控制或依赖成熟 ISR 功能的场景（如大型电商、内容平台）。Nuxt3更适合 Vue3 技术栈的团队，追求零配置快速开发、混合渲染模式或跨平台部署的场景（如企业官网、中台系统、多端应用）。两者在 SSR/SSG 的核心目标（优化首屏性能和 SEO）上一致，选择时主要取决于团队的技术栈熟悉度和项目的具体需求（如渲染模式灵活性、部署环境、生态依赖等）。
2025-11-10 13:43:56
1073
原创 状态管理：Pinia的核心特性（取代Vuex）、模块划分、持久化方案
Pinia 作为 Vuex 的替代方案，通过移除mutation、扁平化模块、增强类型支持等特性，大幅简化了状态管理逻辑。模块划分建议按业务域拆分独立store，跨模块逻辑通过组合式函数或直接调用实现；持久化推荐使用插件，兼顾灵活性和开发效率。对于 Vue3 项目，Pinia 是状态管理的首选方案。
2025-11-10 10:13:48
822
原创 React与Vue3的核心差异（响应式、虚拟DOM、组件设计），如何根据业务场景选型？
React 是“显式控制”的代表，通过 JSX 和 Hooks 提供极致灵活性，适合复杂场景但需开发者手动优化；Vue3 是“自动优化”的代表，通过模板和 Proxy 降低开发门槛，适合快速迭代和中小型项目。选型的核心是匹配业务需求和团队能力：复杂逻辑、跨平台、TypeScript 优先选 React；快速开发、UI 密集、新手友好优先选 Vue3。
2025-11-07 15:11:21
1161
原创 Vue Router：动态路由、路由懒加载、导航守卫的实战应用
/ 打包后会生成 dashboard.[hash].js动态路由：解决路径参数变化场景，通过获取参数。路由懒加载：通过import()拆分代码，优化首屏性能，配合魔法注释自定义 chunk。导航守卫：全局/路由/组件级守卫分别用于全局控制、路由独享控制、组件内控制，核心是通过next()控制跳转流程。合理结合这三个特性，可构建高性能、高安全性的 Vue 路由系统。
2025-11-07 09:27:38
588
原创 Vite：核心优势（原生ESM、按需编译、插件机制），与Webpack的差异及选型逻辑
这个问题抓得很准，核心结论是：Vite 主打“原生 ESM 驱动+按需编译”，开发体验更优；Webpack 生态更全、兼容性更强，生产构建更成熟，选型核心看项目规模、兼容性要求和开发效率优先级。
2025-11-06 14:27:26
339
原创 Vue3的Proxy实现
Vue3 利用Proxy的拦截能力，通过get收集依赖、set触发更新，实现了更强大、更灵活的响应式系统。相比 Vue2 的Proxy解决了诸多局限性（如新增属性监听、数组方法响应式等），是 Vue3 性能提升的重要基础。
2025-11-06 13:37:04
885
原创 `localStorage`/`sessionStorage`/`cookie`/IndexedDB的区别（容量、生命周期、读写性能）
小数据+需与服务器交互 → 用cookie；小数据+长期存储+跨标签共享 → 用；小数据+临时存储+仅当前页面 → 用；大量数据+复杂操作+离线需求 → 用IndexedDB。根据数据量、生命周期和交互需求选择合适的方案，可最大化性能和用户体验。
2025-11-05 14:09:17
485
原创 变量声明（`var`/`let`/`const`的作用域差异）
优先使用let和const：它们的块级作用域更符合直觉，能避免变量泄露和意外修改，代码更安全。尽量不用var：函数作用域容易导致变量污染（尤其是全局作用域），且变量提升特性可能引发bug。常量用const，变量用letconst明确表示“不可重新赋值”，提升代码可读性。
2025-11-04 10:47:15
348
原创 `ref`/`reactive`/`computed`/`watch`的使用场景
API核心用途适用数据类型注意点ref基本类型响应式 / 引用传递基本类型、对象/数组访问需用.value（模板除外）reactive复杂对象/数组的响应式对象/数组不能直接赋值整个对象，不支持基本类型computed衍生数据（带缓存）依赖响应式数据的计算默认只读，适合纯计算场景watch监听数据变化并执行副作用任意响应式数据适合有异步操作、复杂副作用的场景选择原则基本类型用ref，复杂对象用reactive；需计算衍生数据用computed；
2025-11-04 09:43:12
1166
原创 hoistStatic（静态提升）优化原理
的核心原理是通过编译时识别纯静态内容，将其提升到渲染函数外部复用，避免重复创建，从而减少组件渲染的性能开销。这一优化对包含大量静态内容的页面（如静态文本、固定布局元素较多的页面）效果尤为明显，是 Vue3 性能提升的重要手段之一（默认开启，无需开发者手动配置）。
2025-11-03 13:27:14
661
原创 Vue3 的 PatchFlags（静态标记）
PatchFlags是 Vue3 性能优化的重要手段，通过编译时标记动态内容，让运行时更新更精准。开发者无需手动添加标记，Vue 编译器会自动处理，但理解其原理有助于更好地编写高性能模板（如减少不必要的动态绑定、合理使用key等）。
2025-11-03 10:15:25
611
原创 Vite下Vue和React项目build生成zip文件
Vue 和 React 都使用 vite-plugin-zip-pack 插件实现目的。
2024-12-09 14:11:49
351
原创 BeeWare学习
briefcase 只能在Python3.8.* 的版本环境下安装，所以，我们需要选择正确的python版本。python3.8版本下载地址：打开官网后，先点击Downloads，跳转到下载页面，再点击Windows，进入到历史版本的下载页面。直接找到3.8版本的64位安装包，点击下载，下载完，直接点击安装即可。安装完成，打开dos窗口，输入 python --version，查看python版本。
2024-10-15 14:59:30
925
转载 jTopo(一)
jTopo(一)一、jTopo是什么jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。jTopo关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。使用jTopo很简单，可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系，都可以使用jTopo来进行人性化、图形化的展示。二、基础讲解jtopo的核心对象有Stage、Layer、Canvas、Node、Link, 关系如下图
2022-05-06 10:52:29
2410
1
原创 SVG画布宽高
viewport表示SVG可见区域的大小。一个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。<svg width="500" height="300"></svg>以上代码定义了一个视区，宽500单位，高300单位；在SVG中，可以带单位，也可以不带单位。如果没有为值指定单位，那么它将使用像素为单位。也就是说上面的例子中，viewport的宽度为500px，高度为300px。单位含义
2021-11-05 10:10:27
3569
原创 CSS3 Flex布局
CSS3 Flex布局1、概述通过设定外部盒子为flex布局，并设定flex规则，来实现对内部元素排列的控制。样例：.container { display: flex; flex-direction: column; align-items: center; background-color: red;}概念：采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称
2021-10-14 14:48:24
264
原创 CSS3 浏览器内核识别码
CSS3 内核识别码含义：-moz： 代表火狐（firefox）浏览器的内核识别码；-ms代表ie浏览器的内核识别码；（360浏览器是ie内核）-webkit代表苹果（safari）、谷歌（chrome）的内核识别码-o代表opera的内核识别码用法：transform:rotate(30deg); //统一标识语句-ms-transform:rotate(30deg); //-ms代表ie内核识别码-moz-transform:rota
2021-10-14 13:26:15
415
原创 Vue在Nginx的使用
Vue项目编译，部署一、Vue编译使用shell脚本实现一体化编译，打包；#!/bin/bash#卸载 sudo apt-get remove -y nodejsecho "====版本检测开始===="#检测node是否安装if ! type node >/dev/null 2>&1; then echo 'node no exist!' node_check=`sudo apt-get install -y nodejs`fi#查看node版本n
2021-10-12 15:33:53
275
原创 vue-devtools使用指导
vue-devtoolsVue-devtools是一款基于chrome浏览器的插件，用于调试vue应用。目前有两种方式可以安装：通过谷歌应用商店安装 vue-devtools 扩展程序；把本地已有的扩展程序文件添加到谷歌浏览器的扩展程序里；一、应用商店下载https://chrome.zzzmh.cn/info?token=ljjemllljcmogpfapbkkighbhhppjdbg不能访问谷歌应用商店的可以在以上网址直接下载解压下载的文件，将xxx.crx文件拖动安装到谷歌浏
2021-10-08 11:07:03
2364
1
原创 vue-devtools使用指导
vue-devtools安装Vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用。目前有两种方式可以安装：通过谷歌应用商店安装 vue-devtools 扩展程序；把本地已有的扩展程序文件添加到谷歌浏览器的扩展程序里；在这里只介绍第二种方式；github网址： https://github.com/vuejs/devtools/tree/add-remote-devtools在解压目录下依次执行以下命令：npm installnpm run bui
2021-10-08 09:43:56
341
原创 干货！Vue3 echarts自适应解决方案
Vue3 echarts自适应解决方案实战resize.jsimport {nextTick, ref} from "vue";import {debounce} from 'throttle-debounce';/*chart 是echarts图的实例*/export const chart = ref();/*检测侧边栏是否缩放*/let sidebarElm;/*使用element-resize-detector 来监听侧边栏是否产生变化*/const elementResiz
2021-09-29 16:25:50
3814
3
原创 HTML学习
HTMLHyper Text Markup Language(超文本标记语言)HTML5+CSS31、W3C1.1、介绍World Wide Web Consortium (万维网联盟）成立于1994年，web技术领域最权威和具有影响力的国际中立性技术标准机构http://www.w3c.org/http://www.chinaw3c.org/1.2、w3c标准包括结构化标准语言（HTML，XML）表现标准语言（CSS）行为标准（DOM、ECMAScript）2、网页基本信
2021-07-27 17:37:46
173
原创 BACnet
BACnet通讯协议(一)BACnet协议(A Data Communication Protocol for Building Automation and Control Networks)，是由美国采暖、制冷和空调工程师协会（ASHRAE）制定的一个楼宇自动控制技术标准文件，BACnet协议最根本的目的是提供一种楼宇自动控制系统实现互操作的方法。一、BACnet协议栈 BACnet协议是根据开放系统互联模型（OSI）（ISO7498）而提出的。开放系统互联模型采用分层结构，具有7层，解决
2021-07-11 21:30:53
1706
原创 NIO(一)
NIO(一)一、基本概念在正式开始讲 Linux IO 模型前，先介绍 5 个基本概念。1.1 用户空间与内核空间现在操作系统都是采用虚拟存储器，那么对 32 位操作系统而言，它的寻址空间 (虚拟存储空间)为 4G (2的32次方)。操作系统的核心是内核，独立于普通的应用程序，可以访问受保护的内存空间，也有访问底层硬件设备的所有权限。为了保证用户进程不能直接操作内核 (kernel)，保证内核的安全，操作系统将虚拟空间划分为两部分，一部分为内核空间，一部分为用户空间。针对 Linux 操作系统而言，
2021-05-31 21:12:40
201
原创 OSGi 系列（四）
OSGi (四）bundle 的事件监听是在 bundle 生命周期的不同状态相互转换时，OSGi 框架会发出各种不同的事件供事先注册好的事件监听器处理。1. 事件监听器事件名称描述事件值INSTALLEDBundle 被成功安装1STARTEDBundle 被成功启动2STOPEDBundle 被成功停止4UPDATEDBundle 被成功更新8UNINSTALLEDBundle 被成功卸载16RESOLVEDBundle 被
2021-05-26 21:33:12
287
原创 OSGi (三)
OSGi (三)1. 什么是 bundlebundle 是以 jar 包形式存在的一个模块化物理单元，里面包含了代码，资源文件和元数据(metadata)，并且 jar 包的物理边界也同时是运行时逻辑模块的封装边界。2. MANIFEST.MF 规范位置：META-NF/MANIFEST.MF文件格式属性声明的一般格式是 name: value一行不超过 72 个字符，下一行则由单个空格字符开始3. bundle 常用标识符标识符说明Bundle-Categ
2021-05-24 20:19:38
526
原创 OSGi(二)
OSGi(二)Hello World之前曾介绍过 OSGi 是什么，下面将继续上篇介绍的内容，讲述一个简单的 OSGi Bundle：Hello World 是如何开发的。在 OSGi 中，软件是以 Bundle 的形式发布的。一个 Bundle 由 Java 类和其它资源构成，它可为其它的 Bundle 提供服务，也可以导入其它 Bundle 中的 Java 包；同时，OSGi 的 Bundle 也可以为其所在的设备提供一些功能。1. 环境准备<dependency> <
2021-05-23 15:24:55
219
原创 微服务阶段
微服务阶段javase：OOPmysql：持久化html + css + jquery + 框架：视图，框架不熟练，css不好javaweb：独立开发MVC三层架构的网站了：原始ssm：框架：- 简化了我们的开发流程，配置也开始较为复杂；war：tomcat运行spring再简化：SpringBoot-jar：内嵌tomcat；微服务架构！服务越来越多：springcloudspring boot 核心：自动装配是什么配置如何编写yaml自动装配原理：重要：谈资集成web开发：业
2021-05-22 18:13:04
184
原创 OSGI(一)
OSGI(一)1、什么是OSGI？OSGi(Open Service Gateway Initiative) 技术是 Java 动态化模块化系统的一系列规范。OSGi 一方面指维护 OSGi 规范的 OSGi Alliance(OSGi 联盟)，另一方面指的是该组织维护的基于 Java 语言的服务(业务)规范。简单来说，OSGi 可以认为是 Java 平台的模块层，为大型分布式系统以及嵌入式系统提供一种模块化架构减少了软件的复杂度。1.1、起源OSGi 联盟(OSGi Alliance)于 1999
2021-05-20 22:13:26
2882
原创 Spring
1、Spring1.1、简介Sprin：春天----------->给软件行业带来了春天2002，首次推出了Spring框架的雏形：interface21框架Spring 框架即以interface21框架为基础，经过重新设计，并不断丰富其内涵，于2004年3月24日，发布了1.0正式版。Rod Johnson , Spring Framework创始人， 著名作者。Spring 理念： 使现有的技术更加容易使用，本身是一个大杂烩，整合了现有的框架技术！SSH :
2021-05-19 21:30:36
155
BACnet协议规范测试用例详细解析
2024-10-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人