- 博客(70)
- 收藏
- 关注
RSS订阅原创 探索Strapi：下一代Headless CMS的优势与应用
公司最近要做给好几个项目做官网平台，介于官网的展示部分定制化程度非常高，而且内容发布是由公司内部人员负责的，不需要做的太华丽，基本能用就行。最终选择决定使用无头cms作为内容管理平台，一方面比较灵活，另一方面也适合多端展示。接下来我会写一些关于strapi搭建和使用的博客作为记录，也方便大家了解。在现代Web开发中，内容管理系统（CMS）是至关重要的工具之一。随着内容分发需求的多样化和个性化，传统CMS逐渐显现出局限性。
2024-06-12 12:04:02
590
原创 深入了解React Fiber：React的新架构
React Fiber 是对 React 核心算法的一次彻底重构。旧版的 React 使用的是“Stack Reconciler”，它会在一次更新中同步地遍历整个组件树，这样的方式对于大型应用来说，可能会导致卡顿和不流畅的用户体验。而 Fiber 则采用了一种增量式的更新方式，使得渲染过程可以被中断和恢复，从而提升性能和响应速度。
2024-06-12 11:59:50
318
原创 使用Intro.js为Vue.js应用创建交互式引导
Intro.js是一个轻量级的JavaScript库，用于创建引导教程和向用户介绍网站或应用程序的功能。它提供了丰富的功能，包括步骤导航、自定义样式、事件回调等，使得创建交互式引导变得简单而灵活。
2024-06-12 11:50:40
388
1
原创 Webpack Module Federation实战：微前端架构
Webpack Module Federation是Webpack 5引入的一个特性，它支持微前端架构，允许不同的Web应用之间共享模块，而不需要运行时的容器或服务器端的构建步骤。
2024-06-12 11:45:41
593
原创 Linux Kernel：启动时内存管理（MemBlock 分配器）2024
Memblock 将系统内存视为连续区域的集合。memory- 描述内核可用的物理内存区域；reserved- 描述已分配的内存区域。每个区域由表示，它定义了区域范围以及 NUMA 节点 ID。每种内存类型都由描述，其中包含内存区域数组以及元数据。内存类型被包装在结构体中，该结构在构建时被静态初始化。memory和reserved类型的内存区域数组初始大小为。允许在添加新区域时自动调整区域数组的大小。在早期进行架构相关的初始化时，应该使用或函数指定 memblock 中的物理内存布局。
2024-06-12 11:38:53
1048
原创 Linux 性能分析 | 上下文切换
进程是操作系统分配资源和调度的基本单位，拥有独立的地址空间和系统资源。寄存器状态：包括程序计数器、堆栈指针、通用寄存器等。内存管理信息：如虚拟地址空间、页表等。I/O状态信息：包括文件描述符、网络连接状态等。进程控制块 (PCB)：包含进程ID、进程状态（就绪、等待、运行）、调度优先级等。
2024-06-12 11:30:00
681
原创 小插件推荐：Obsidian-II-Quicker
。(from:: 弹评)。插入特定的 Callout，如>[!Tip] xxx。插入 4 个 \ 的代码块。在【用户自定义命令】设置即可，其语法为，在配置中有详细说明就不复述了。下面是我设置的：less复制代码快捷键标签::<kbd>{selection}
2024-06-12 11:08:42
910
原创 零基础学Java多线程：深入理解线程生命周期
只要是科班出身的同学都清楚地知道，在计算机科学领域，多线程它是极为常见的概念，比如线程与进程等基本概念，二者之间有何区别，这都不言而喻了吧。对于多线程，我们在上一章节就讲过了，它可以同时执行多个任务，提高我们开发的程序性能和响应速度。而且Java作为一门广泛使用的开发语言，对多线程提供了强有力的支持。即，本篇文章我们将重点介绍线程的一个新知识点--生命周期，以及实际中我们需要如何使用多线程来实现并发开发。
2024-06-12 11:01:33
860
原创 JavaScript基础-数组操作：增删改查
掌握数组的增删改查操作是JavaScript编程的基础，也是进阶的关键。通过理解每种方法的用途和潜在陷阱，结合实际代码练习，你将能够更加高效地处理数组相关的任务。记住，良好的代码习惯，如在操作前进行边界检查，以及对方法返回值的正确理解，都是避免常见错误的有效策略。希望本文能帮助你在JavaScript数组操作的道路上更进一步原文链接：https://juejin.cn/post/7379060209367105577。
2024-06-12 10:52:36
396
原创 手写 Promise：深入理解异步编程
通过以上的实现，我们成功地创建了一个简单但功能齐全的 Promise 类。这个手写 Promise 不仅具备基本的异步操作能力，还支持 Promise 链式调用和常见的 Promise 方法，如thenresolverejectallallSettledrace和any。手写实现 Promise 是一个有挑战性但也有益处的练习，有助于更深入地理解 Promise 的工作原理和异步编程的机制。希望这篇博客对你理解 Promise 有所帮助。
2024-06-12 10:49:28
690
原创 Promise 知识点总结
Promise案例分析模拟事件循环原文链接：https://juejin.cn/post/7377581109154938907。
2024-06-11 11:33:08
304
原创 小白看看还是能学会的GraphQL+NestJS+Neo4j——进阶版
NestJS没什么好说的，公司后端语言使用的是nodeJS，熟悉我的朋友都知道，之前搭建的每一个服务也都是NestJS为基础，这个可以略过。
2024-06-11 11:27:36
460
原创 react-router之跳转
挑选和创建routerreact-router共支持5种router类型，一个项目只支持使用一种router类型。react-router中创建router有两种方式两者的区别在于：// createRoutesFromElements const router = createBrowserRouter( createRoutesFromElements( <Route path="/" element={<Root />}> <Route path="dashboard" element={<Dash
2024-06-11 11:18:52
704
原创 Node中模块查找策略
Node.js采用的是CommonJS模块规范，我们在平常引入时，是否注意模块引入的策略。在本文中，主要说明Node.js中的模块化加载机制，包括CommonJS模块的加载规则、内置模块的使用方式以及第三方模块的引入方法。在Node.js中，我们可以使用require函数来引入其他模块，并使用exports对象来导出当前模块的功能。等模块都是Node.js内置的模块，可以通过require函数直接引入使用。当使用require加载内置模块时，Node.js会自动查找并加载对应的模块文件，无需指定路径。
2024-06-11 11:15:42
338
原创 TypeScript 的5个好用技巧
/ 使用 Pick 从 User 类型中选择 'name' 和 'email' 属性，创建新类型 UserSummary const user: User = { // 定义一个 User 类型的对象 user id: 1, name: 'John Doe', email: 'john.doe@example.com' };// 定义一个 ReadonlyArray 类型的数组 fruits，不可修改 // 这将导致 TypeScript 错误 // fruits.push('date');
2024-06-11 11:13:15
523
原创 js中的类型转换
将对象转换为几种常用的原始类型，通过函数的内部操作中的toString方法将对象转换为字符串再通过显示转换转换成需要的类型。js复制代码[]);来分析一下这给会打印出什么？答案是truejs复制代码[])；在分析一下这个呢？答案是false网上有很多这样的答案来解释==和===的区别，而在这就总结成==会触发隐式类型转换，===则不会。将[]==![]的转换规则手撕出来就是：js复制代码// []==![] // []==!
2024-06-11 10:41:17
609
原创 Nest探索（十一）Redis 入门
这些数据库都是通过硬盘来存储数据的，在进行数据读取和修改等操作时，需要查询硬盘中的数据，再加载到内存中进行处理。需要注意的是，Redis的密码建议设置超强难度的密码，因为外界可以每秒尝试 150k 次的密码破解，简单的密码容易被攻破。我们可以将安装路径添加到系统变量中，比如我的安装路径是"D:\Program Files\Redis"，那么下次就直接输入redis-server即可。我们可以发现，Redis分为server端和cli端，我们需要先把server端跑起来，再在cli端中输入相应的命令。
2024-06-11 10:36:55
245
原创 Vue TypeScript 实战：掌握静态类型编程
当与 TypeScript 集成时，Vuex 的类型安全性可以大大提高，以下是如何在 Vuex 中使用 TypeScript 的基本概念和步骤。在TypeScript中，接口（Interfaces）和类型注解（Type Annotations）是核心特性，它们允许开发者定义代码的形状和类型，以确保类型安全和代码的可维护性。通过为 Vue Router 的路由配置和守卫函数添加类型注解，可以确保路由的正确性，并且在编译时捕获潜在的错误，从而提高代码的健壮性和可维护性。以下是性能优化和代码分割的相关策略。
2024-06-11 10:27:08
262
原创 Nodejs 第七十八章（Kafla）
Kafka 的主要设计目标是提供一个可持久化的、高吞吐量的、容错的消息传递系统。Kafka 的设计还强调了分布式的特性，使得它可以在大规模集群中运行，处理大量数据和高并发的请求。新版安装成功后无需配置环境变量自己就配好了，旧版本则需手动配置一下 如同rabbiteMQ 那一章节一样。注意点 需要在环境变量配置 JAVA_HOME 因为zookeeper 要读取这个环境变量 这个是必须的。安装JDK 因为Kafka用了java编写。因为Kafka也用到了ZooKeeper。安装ZooKeeper。
2024-06-11 10:22:46
1043
原创 typescript在实际场景中的应用
** 结合useAntdTable的类型定义，来修改我们要的类型 */ function useDrsAntdTable<TData extends MyData, TParams extends MyParams>( service: MyService<TData, TParams>, options: AntdTableOptions<Data, Params> = {}, ) { type returnType = PromiseType<ReturnType<typeof service>>;
2024-06-11 10:15:37
493
原创 Web 开发者快速入门 HarmonyOS
本文面向拥有 Web 开发经验、熟悉 HTML 和 CSS 的人员。通过 HTML/CSS 和 HarmonyOS/ArkUI 代码之间的对比，能让你更快速的上手 HarmonyOS 的应用开发。
2024-06-08 11:48:39
925
原创 JSON.stringify()特性总结
JSON.stringify() 九大特性：一、对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时的不同返回结果。undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过（忽略）它们进行序列化undefined、任意的函数以及 symbol 作为数组元素值时，JSON.stringify() 将会将它们序列化为 null。
2024-06-08 11:44:41
941
原创 JS - 实现一个简单的响应式系统
现在你知道我们应该怎样做来实现状态跟踪吗？看上去很简单，这是因为我们还没有追踪响应式依赖。在各大前端框架中，响应式系统无疑是核心。今天我们就来实现一个简易版的 Angular Signals。原文链接：https://juejin.cn/post/7377247135006130210。如此，我们就可以自动追踪副作用的依赖，并在信号更新时自动调用副作用函数了。对象应该是一个函数，调用它将返回内部值。函数应该接受一个初始值，返回一个。
2024-06-08 11:43:06
171
原创 React体系06-React 组件的新旧生命周期
生命周期含义：从组件出生到更新、改变、销毁（创建\更新\销毁）的整个阶段。生命周期的钩子函数含义：组件的每个阶段都伴随着一些方法，就是生命周期的钩子函数,我们就是通过控制这些生命周期函数从而控制组件。生命周期意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因TIPS只有类组件才有生命周期。
2024-06-08 11:39:51
770
原创 React实战项目从0到1搭建（CRA官方版本）
我本地采用的nvm控制的版本，尽量建议采用nvm然后使用最新的版本来开发。nvm:进行控制node版本的工具。nvm版本20.10.0 node版本 20.10.0 检查node和npm环境js复制代码。
2024-06-08 11:37:04
652
原创 three.js——物理引擎
剖析案例中物理引擎Ammo.js的使用方法，其中包含运动、碰撞、检测、自由落体、碰撞器、冻结、自定义更新等功能，有大量代码通过链接方式转到gitee，可以根据代码对照使用主要剖析的是threejs中提供的案例，相对于原本案例，本篇文章精简了一些代码，提取了一些方法，新增了一些可配置参数，并结合我上一篇文章做了一个小Demo。先看一下效果从图片中可以看出来，小球在落地时，触碰到人物模型的头部，改变了运动方向，后面人物模型行走时，可以踢球，改变球的运动速度。
2024-06-08 11:15:12
913
原创 JS数组基础知识复盘
for...in 适合遍历对象for...of 适合遍历数组(具有迭代器的)for...in 遍历出来的是数组的索引、对象的属性、以及原型链上的属性原文链接：https://juejin.cn/post/7270854564152410166。
2024-06-08 11:09:01
401
原创 CKEditor工具栏配置指南(三)
你同样也可以添加自定义的标题, 比如追加 h4 - h5, 或者自定义的段落样式, 在全局 css 中扩展 class 即可。js复制代码。
2024-06-08 11:06:12
806
原创 Webpack 和 Vite
快捷命令 我们一般会将常用的命令配置一下，使用起来更方便： "scripts": { "build": "webpack", "watch": "webpack --watch", "dev": "webpack serve --open" }, Vite Webpack 是先打包再运行，而 Vite 开发时并不打包，而是直接采用 ES Module 运行项目，部署的时候再打包，开箱即用。babel-loader 在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。
2024-06-08 10:55:51
688
原创 vue3+vite插件开发
现在可以实现vue2的类似this.$api.xxx去调用接口,但是vue2源码使用的是flow来实现,并且搭配typeScript不太友好(由于装饰器语法过于复杂,这里不讨论vue2+装饰器来使用typeScript),故vue2项目没有开发webpack插件去实现代码补全。
2024-06-08 10:50:08
462
原创 vue3首屏速度优化
代码中所有的依赖包会集成到一起，生成chunk-vendors.js，如果发现这个js很大，可以通过分割，将大型代码库分割成多个较小的chunks（块）。这就在首次加载页面时，浏览器只需要下载和解析那些立即需要的代码块，而不是整个应用的所有代码，在vue.config.js中设置。因为vuecli 3默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容， 在首屏会默认加载全部的js文件， 所以要关闭这个功能，在vue.config.js中设置。1.nginx开启gzip压缩。
2024-06-07 11:47:42
254
原创 Nestjs Aop 切片
一个完整的 nest web 应用除了处理业务逻辑，还需要应对许多其他的场景。上面用 nest 提供的 4 中 AOP 切片，分别处理相对具体的场景。: 创建了一个错误码解析器，同时还具备多语言的功能。用于业务异常的抛出，前端直接提示给用户即可Pipes: 创建了一个提交接口的参数类型校验器，用于拦截非法数据提交。Guards: 创建了一个回话态校验逻辑，用户每次的提交都需要校验，后台在校验的时候，如果未过期，要注意续期: 创建了3个拦截器，分别用于数据加工，traceId , 日志。
2024-06-07 11:38:21
643
原创 Vuex 4与状态管理实战指南
excerpt: 这篇文章介绍了使用Vuex进行Vue应用状态管理的最佳实践，包括为何需要状态管理，Vuex的核心概念如store、actions、mutations和getters，以及如何处理异步操作和模块化组织状态。Vuex与Vue的关系是互补的，Vue负责视图层的渲染，而Vuex则负责管理应用的状态。在实际开发中，推荐使用每个框架对应的状态管理解决方案，例如在React中使用Redux，在Vue中使用Vuex，在Angular中使用NgRx。在大型项目中，Vuex的状态结构设计非常重要。
2024-06-07 11:28:58
730
原创 【项目实践】vue + vite 图标导入总结
vue + vite 图标导入总结 SVG 的使用 在页面中我们会使用到各种图标，为了保证图标在放大缩小不失真，通常会采用 SVG 来作为图标。 SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它可以用来创建清晰的、可缩放的图形，无论放大多少倍都不会失真。在Web开发中，SVG常用于制作图标，因为它具有以下优点：清晰度：SVG图标在任何分辨率下都能保持清晰。可编辑性：SVG是文本格式，可以使用文本编辑器进行修改。尺寸小：SVG图标文件通常比位图（如PNG或JPEG）
2024-06-07 11:24:47
851
原创 JSON.stringify()特性总结
JSON.stringify() 九大特性：一、对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时的不同返回结果。undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过（忽略）它们进行序列化undefined、任意的函数以及 symbol 作为数组元素值时，JSON.stringify() 将会将它们序列化为 null。
2024-06-07 10:54:55
630
原创 Nginx的location配置详解
💡Location 是 Nginx 中一个非常核心的配置，通过location块，Nginx可以根据URI的不同部分进行匹配，并指定不同的行为，如代理请求、提供静态文件、重定向等。这篇重点讲解一下 Location 的配置问题以及一些注意事项。
2024-06-06 10:55:01
566
原创 rust 单元测试最佳实践
首先，在Cargo.toml文件的部分加入以下依赖：ini复制代码Cucumber框架在Rust中是异步实现的，因此需引入tokio框架以支持异步执行Cucumber的run方法。测试文件需要放于项目的tests目录下。创建文件，并在里面定义测试的入口点。mockall是一个在 Rust 中创建 mock 对象的库。它可以自动为你的代码生成 mock 对象，这对于单元测试非常有用，因为你可以使用这些 mock 对象来模拟复杂的业务逻辑，而不需要实际执行这些逻辑。mockall。
2024-06-06 10:48:44
800
原创 Vue项目中使用高德地图
v=1.4.13&key='你自己申请的key'", "//webapi.amap.com/ui/1.0/main.js" ] } // 判断环境 if (process.env.NODE_ENV === "production") { args[0].cdn = cdn;// 多个插件 AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件 var toolbar = new AMap.ToolBar();
2024-06-06 10:38:59
910
原创 Vue 3 Teleport：掌控渲染的艺术
title: Vue 3 Teleport：掌控渲染的艺术 description: 这篇文章介绍了Vue3框架中的一个创新特性——Teleport，它允许开发者将组件内容投送到文档对象模型（DOM）中的任意位置，即使这个位置在组件的挂载点之外。Teleport旨在解决某些特定场景下的布局和嵌套问题，如 modal 对话框、弹出框或注入全局头部等。通过使用Teleport，可以更灵活地管理这些特殊组件，同时保持应用程序结构的清晰。文章可能会详细讲解Teleport的工作原理、使用方法及其对应用性能和测试的影
2024-06-06 10:34:35
871
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人