- 博客(70)
- 收藏
- 关注
原创 探索Strapi:下一代Headless CMS的优势与应用
公司最近要做给好几个项目做官网平台,介于官网的展示部分定制化程度非常高,而且内容发布是由公司内部人员负责的,不需要做的太华丽,基本能用就行。最终选择决定使用无头cms作为内容管理平台,一方面比较灵活,另一方面也适合多端展示。接下来我会写一些关于strapi搭建和使用的博客作为记录,也方便大家了解。在现代Web开发中,内容管理系统(CMS)是至关重要的工具之一。随着内容分发需求的多样化和个性化,传统CMS逐渐显现出局限性。
2024-06-12 12:04:02
660
原创 深入了解React Fiber:React的新架构
React Fiber 是对 React 核心算法的一次彻底重构。旧版的 React 使用的是“Stack Reconciler”,它会在一次更新中同步地遍历整个组件树,这样的方式对于大型应用来说,可能会导致卡顿和不流畅的用户体验。而 Fiber 则采用了一种增量式的更新方式,使得渲染过程可以被中断和恢复,从而提升性能和响应速度。
2024-06-12 11:59:50
504
原创 使用Intro.js为Vue.js应用创建交互式引导
Intro.js是一个轻量级的JavaScript库,用于创建引导教程和向用户介绍网站或应用程序的功能。它提供了丰富的功能,包括步骤导航、自定义样式、事件回调等,使得创建交互式引导变得简单而灵活。
2024-06-12 11:50:40
436
1
原创 Webpack Module Federation实战:微前端架构
Webpack Module Federation是Webpack 5引入的一个特性,它支持微前端架构,允许不同的Web应用之间共享模块,而不需要运行时的容器或服务器端的构建步骤。
2024-06-12 11:45:41
605
原创 Linux Kernel:启动时内存管理(MemBlock 分配器)2024
Memblock 将系统内存视为连续区域的集合。memory- 描述内核可用的物理内存区域;reserved- 描述已分配的内存区域。每个区域由表示,它定义了区域范围以及 NUMA 节点 ID。每种内存类型都由描述,其中包含内存区域数组以及元数据。内存类型被包装在结构体中,该结构在构建时被静态初始化。memory和reserved类型的内存区域数组初始大小为。允许在添加新区域时自动调整区域数组的大小。在早期进行架构相关的初始化时,应该使用或函数指定 memblock 中的物理内存布局。
2024-06-12 11:38:53
1103
原创 Linux 性能分析 | 上下文切换
进程是操作系统分配资源和调度的基本单位,拥有独立的地址空间和系统资源。寄存器状态:包括程序计数器、堆栈指针、通用寄存器等。内存管理信息:如虚拟地址空间、页表等。I/O状态信息:包括文件描述符、网络连接状态等。进程控制块 (PCB):包含进程ID、进程状态(就绪、等待、运行)、调度优先级等。
2024-06-12 11:30:00
709
原创 小插件推荐:Obsidian-II-Quicker
。(from:: 弹评)。插入特定的 Callout,如>[!Tip] xxx。插入 4 个 \ 的代码块。在【用户自定义命令】设置即可,其语法为,在配置中有详细说明就不复述了。下面是我设置的:less复制代码快捷键标签::<kbd>{selection}
2024-06-12 11:08:42
969
原创 零基础学Java多线程:深入理解线程生命周期
只要是科班出身的同学都清楚地知道,在计算机科学领域,多线程它是极为常见的概念,比如线程与进程等基本概念,二者之间有何区别,这都不言而喻了吧。对于多线程,我们在上一章节就讲过了,它可以同时执行多个任务,提高我们开发的程序性能和响应速度。而且Java作为一门广泛使用的开发语言,对多线程提供了强有力的支持。即,本篇文章我们将重点介绍线程的一个新知识点--生命周期,以及实际中我们需要如何使用多线程来实现并发开发。
2024-06-12 11:01:33
876
原创 JavaScript基础-数组操作:增删改查
掌握数组的增删改查操作是JavaScript编程的基础,也是进阶的关键。通过理解每种方法的用途和潜在陷阱,结合实际代码练习,你将能够更加高效地处理数组相关的任务。记住,良好的代码习惯,如在操作前进行边界检查,以及对方法返回值的正确理解,都是避免常见错误的有效策略。希望本文能帮助你在JavaScript数组操作的道路上更进一步原文链接:https://juejin.cn/post/7379060209367105577。
2024-06-12 10:52:36
461
原创 手写 Promise:深入理解异步编程
通过以上的实现,我们成功地创建了一个简单但功能齐全的 Promise 类。这个手写 Promise 不仅具备基本的异步操作能力,还支持 Promise 链式调用和常见的 Promise 方法,如thenresolverejectallallSettledrace和any。手写实现 Promise 是一个有挑战性但也有益处的练习,有助于更深入地理解 Promise 的工作原理和异步编程的机制。希望这篇博客对你理解 Promise 有所帮助。
2024-06-12 10:49:28
704
原创 Promise 知识点总结
Promise案例分析模拟事件循环原文链接:https://juejin.cn/post/7377581109154938907。
2024-06-11 11:33:08
321
原创 小白看看还是能学会的GraphQL+NestJS+Neo4j——进阶版
NestJS没什么好说的,公司后端语言使用的是nodeJS,熟悉我的朋友都知道,之前搭建的每一个服务也都是NestJS为基础,这个可以略过。
2024-06-11 11:27:36
479
原创 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
737
原创 Node中模块查找策略
Node.js采用的是CommonJS模块规范,我们在平常引入时,是否注意模块引入的策略。在本文中,主要说明Node.js中的模块化加载机制,包括CommonJS模块的加载规则、内置模块的使用方式以及第三方模块的引入方法。在Node.js中,我们可以使用require函数来引入其他模块,并使用exports对象来导出当前模块的功能。等模块都是Node.js内置的模块,可以通过require函数直接引入使用。当使用require加载内置模块时,Node.js会自动查找并加载对应的模块文件,无需指定路径。
2024-06-11 11:15:42
356
原创 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
538
原创 js中的类型转换
将对象转换为几种常用的原始类型,通过函数的内部操作中的toString方法将对象转换为字符串再通过显示转换转换成需要的类型。js复制代码[]);来分析一下这给会打印出什么?答案是truejs复制代码[]);在分析一下这个呢?答案是false网上有很多这样的答案来解释==和===的区别,而在这就总结成==会触发隐式类型转换,===则不会。将[]==![]的转换规则手撕出来就是:js复制代码// []==![] // []==!
2024-06-11 10:41:17
620
原创 Nest探索(十一)Redis 入门
这些数据库都是通过硬盘来存储数据的,在进行数据读取和修改等操作时,需要查询硬盘中的数据,再加载到内存中进行处理。需要注意的是,Redis的密码建议设置超强难度的密码,因为外界可以每秒尝试 150k 次的密码破解,简单的密码容易被攻破。我们可以将安装路径添加到系统变量中,比如我的安装路径是"D:\Program Files\Redis",那么下次就直接输入redis-server即可。我们可以发现,Redis分为server端和cli端,我们需要先把server端跑起来,再在cli端中输入相应的命令。
2024-06-11 10:36:55
269
原创 Vue TypeScript 实战:掌握静态类型编程
当与 TypeScript 集成时,Vuex 的类型安全性可以大大提高,以下是如何在 Vuex 中使用 TypeScript 的基本概念和步骤。在TypeScript中,接口(Interfaces)和类型注解(Type Annotations)是核心特性,它们允许开发者定义代码的形状和类型,以确保类型安全和代码的可维护性。通过为 Vue Router 的路由配置和守卫函数添加类型注解,可以确保路由的正确性,并且在编译时捕获潜在的错误,从而提高代码的健壮性和可维护性。以下是性能优化和代码分割的相关策略。
2024-06-11 10:27:08
269
原创 Nodejs 第七十八章(Kafla)
Kafka 的主要设计目标是提供一个可持久化的、高吞吐量的、容错的消息传递系统。Kafka 的设计还强调了分布式的特性,使得它可以在大规模集群中运行,处理大量数据和高并发的请求。新版安装成功后无需配置环境变量自己就配好了,旧版本则需手动配置一下 如同rabbiteMQ 那一章节一样。注意点 需要在环境变量配置 JAVA_HOME 因为zookeeper 要读取这个环境变量 这个是必须的。安装JDK 因为Kafka用了java编写。因为Kafka也用到了ZooKeeper。安装ZooKeeper。
2024-06-11 10:22:46
1062
原创 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
512
原创 Web 开发者快速入门 HarmonyOS
本文面向拥有 Web 开发经验、熟悉 HTML 和 CSS 的人员。通过 HTML/CSS 和 HarmonyOS/ArkUI 代码之间的对比,能让你更快速的上手 HarmonyOS 的应用开发。
2024-06-08 11:48:39
966
原创 JSON.stringify()特性总结
JSON.stringify() 九大特性:一、对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时的不同返回结果。undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过(忽略)它们进行序列化undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify() 将会将它们序列化为 null。
2024-06-08 11:44:41
950
原创 JS - 实现一个简单的响应式系统
现在你知道我们应该怎样做来实现状态跟踪吗?看上去很简单,这是因为我们还没有追踪响应式依赖。在各大前端框架中,响应式系统无疑是核心。今天我们就来实现一个简易版的 Angular Signals。原文链接:https://juejin.cn/post/7377247135006130210。如此,我们就可以自动追踪副作用的依赖,并在信号更新时自动调用副作用函数了。对象应该是一个函数,调用它将返回内部值。函数应该接受一个初始值,返回一个。
2024-06-08 11:43:06
182
原创 React体系06-React 组件的新旧生命周期
生命周期含义:从组件出生到更新、改变、销毁(创建\更新\销毁)的整个阶段。生命周期的钩子函数含义:组件的每个阶段都伴随着一些方法,就是生命周期的钩子函数,我们就是通过控制这些生命周期函数从而控制组件。生命周期意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因TIPS只有类组件才有生命周期。
2024-06-08 11:39:51
813
原创 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
678
原创 three.js——物理引擎
剖析案例中物理引擎Ammo.js的使用方法,其中包含运动、碰撞、检测、自由落体、碰撞器、冻结、自定义更新等功能,有大量代码通过链接方式转到gitee,可以根据代码对照使用主要剖析的是threejs中提供的案例,相对于原本案例,本篇文章精简了一些代码,提取了一些方法,新增了一些可配置参数,并结合我上一篇文章做了一个小Demo。先看一下效果从图片中可以看出来,小球在落地时,触碰到人物模型的头部,改变了运动方向,后面人物模型行走时,可以踢球,改变球的运动速度。
2024-06-08 11:15:12
1033
原创 JS数组基础知识复盘
for...in 适合遍历对象for...of 适合遍历数组(具有迭代器的)for...in 遍历出来的是数组的索引、对象的属性、以及原型链上的属性原文链接:https://juejin.cn/post/7270854564152410166。
2024-06-08 11:09:01
407
原创 CKEditor工具栏配置指南(三)
你同样也可以添加自定义的标题, 比如追加 h4 - h5, 或者自定义的段落样式, 在全局 css 中扩展 class 即可。js复制代码。
2024-06-08 11:06:12
946
原创 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
720
原创 vue3+vite插件开发
现在可以实现vue2的类似this.$api.xxx去调用接口,但是vue2源码使用的是flow来实现,并且搭配typeScript不太友好(由于装饰器语法过于复杂,这里不讨论vue2+装饰器来使用typeScript),故vue2项目没有开发webpack插件去实现代码补全。
2024-06-08 10:50:08
496
原创 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
320
原创 Nestjs Aop 切片
一个完整的 nest web 应用除了处理业务逻辑,还需要应对许多其他的场景。上面用 nest 提供的 4 中 AOP 切片,分别处理相对具体的场景。: 创建了一个错误码解析器,同时还具备多语言的功能。用于业务异常的抛出,前端直接提示给用户即可Pipes: 创建了一个提交接口的参数类型校验器,用于拦截非法数据提交。Guards: 创建了一个回话态校验逻辑,用户每次的提交都需要校验,后台在校验的时候,如果未过期,要注意续期: 创建了3个拦截器,分别用于数据加工,traceId , 日志。
2024-06-07 11:38:21
650
原创 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
743
原创 【项目实践】vue + vite 图标导入总结
vue + vite 图标导入总结 SVG 的使用 在页面中我们会使用到各种图标,为了保证图标在放大缩小不失真,通常会采用 SVG 来作为图标。 SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它可以用来创建清晰的、可缩放的图形,无论放大多少倍都不会失真。在Web开发中,SVG常用于制作图标,因为它具有以下优点:清晰度:SVG图标在任何分辨率下都能保持清晰。可编辑性:SVG是文本格式,可以使用文本编辑器进行修改。尺寸小:SVG图标文件通常比位图(如PNG或JPEG)
2024-06-07 11:24:47
893
原创 JSON.stringify()特性总结
JSON.stringify() 九大特性:一、对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时的不同返回结果。undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过(忽略)它们进行序列化undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify() 将会将它们序列化为 null。
2024-06-07 10:54:55
640
原创 Nginx的location配置详解
💡Location 是 Nginx 中一个非常核心的配置,通过location块,Nginx可以根据URI的不同部分进行匹配,并指定不同的行为,如代理请求、提供静态文件、重定向等。这篇重点讲解一下 Location 的配置问题以及一些注意事项。
2024-06-06 10:55:01
621
原创 rust 单元测试最佳实践
首先,在Cargo.toml文件的部分加入以下依赖:ini复制代码Cucumber框架在Rust中是异步实现的,因此需引入tokio框架以支持异步执行Cucumber的run方法。测试文件需要放于项目的tests目录下。创建文件,并在里面定义测试的入口点。mockall是一个在 Rust 中创建 mock 对象的库。它可以自动为你的代码生成 mock 对象,这对于单元测试非常有用,因为你可以使用这些 mock 对象来模拟复杂的业务逻辑,而不需要实际执行这些逻辑。mockall。
2024-06-06 10:48:44
836
原创 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
1206
原创 Vue 3 Teleport:掌控渲染的艺术
title: Vue 3 Teleport:掌控渲染的艺术 description: 这篇文章介绍了Vue3框架中的一个创新特性——Teleport,它允许开发者将组件内容投送到文档对象模型(DOM)中的任意位置,即使这个位置在组件的挂载点之外。Teleport旨在解决某些特定场景下的布局和嵌套问题,如 modal 对话框、弹出框或注入全局头部等。通过使用Teleport,可以更灵活地管理这些特殊组件,同时保持应用程序结构的清晰。文章可能会详细讲解Teleport的工作原理、使用方法及其对应用性能和测试的影
2024-06-06 10:34:35
882
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人