前端
文章平均质量分 87
糖糖老师436
这个作者很懒,什么都没留下…
展开
-
探索Strapi:下一代Headless CMS的优势与应用
公司最近要做给好几个项目做官网平台,介于官网的展示部分定制化程度非常高,而且内容发布是由公司内部人员负责的,不需要做的太华丽,基本能用就行。最终选择决定使用无头cms作为内容管理平台,一方面比较灵活,另一方面也适合多端展示。接下来我会写一些关于strapi搭建和使用的博客作为记录,也方便大家了解。在现代Web开发中,内容管理系统(CMS)是至关重要的工具之一。随着内容分发需求的多样化和个性化,传统CMS逐渐显现出局限性。原创 2024-06-12 12:04:02 · 689 阅读 · 0 评论 -
使用Intro.js为Vue.js应用创建交互式引导
Intro.js是一个轻量级的JavaScript库,用于创建引导教程和向用户介绍网站或应用程序的功能。它提供了丰富的功能,包括步骤导航、自定义样式、事件回调等,使得创建交互式引导变得简单而灵活。原创 2024-06-12 11:50:40 · 453 阅读 · 1 评论 -
Linux Kernel:启动时内存管理(MemBlock 分配器)2024
Memblock 将系统内存视为连续区域的集合。memory- 描述内核可用的物理内存区域;reserved- 描述已分配的内存区域。每个区域由表示,它定义了区域范围以及 NUMA 节点 ID。每种内存类型都由描述,其中包含内存区域数组以及元数据。内存类型被包装在结构体中,该结构在构建时被静态初始化。memory和reserved类型的内存区域数组初始大小为。允许在添加新区域时自动调整区域数组的大小。在早期进行架构相关的初始化时,应该使用或函数指定 memblock 中的物理内存布局。原创 2024-06-12 11:38:53 · 1125 阅读 · 0 评论 -
Linux 性能分析 | 上下文切换
进程是操作系统分配资源和调度的基本单位,拥有独立的地址空间和系统资源。寄存器状态:包括程序计数器、堆栈指针、通用寄存器等。内存管理信息:如虚拟地址空间、页表等。I/O状态信息:包括文件描述符、网络连接状态等。进程控制块 (PCB):包含进程ID、进程状态(就绪、等待、运行)、调度优先级等。原创 2024-06-12 11:30:00 · 722 阅读 · 0 评论 -
小插件推荐:Obsidian-II-Quicker
。(from:: 弹评)。插入特定的 Callout,如>[!Tip] xxx。插入 4 个 \ 的代码块。在【用户自定义命令】设置即可,其语法为,在配置中有详细说明就不复述了。下面是我设置的:less复制代码快捷键标签::<kbd>{selection}原创 2024-06-12 11:08:42 · 1003 阅读 · 0 评论 -
JavaScript基础-数组操作:增删改查
掌握数组的增删改查操作是JavaScript编程的基础,也是进阶的关键。通过理解每种方法的用途和潜在陷阱,结合实际代码练习,你将能够更加高效地处理数组相关的任务。记住,良好的代码习惯,如在操作前进行边界检查,以及对方法返回值的正确理解,都是避免常见错误的有效策略。希望本文能帮助你在JavaScript数组操作的道路上更进一步原文链接:https://juejin.cn/post/7379060209367105577。原创 2024-06-12 10:52:36 · 480 阅读 · 0 评论 -
手写 Promise:深入理解异步编程
通过以上的实现,我们成功地创建了一个简单但功能齐全的 Promise 类。这个手写 Promise 不仅具备基本的异步操作能力,还支持 Promise 链式调用和常见的 Promise 方法,如thenresolverejectallallSettledrace和any。手写实现 Promise 是一个有挑战性但也有益处的练习,有助于更深入地理解 Promise 的工作原理和异步编程的机制。希望这篇博客对你理解 Promise 有所帮助。原创 2024-06-12 10:49:28 · 712 阅读 · 0 评论 -
Promise 知识点总结
Promise案例分析模拟事件循环原文链接:https://juejin.cn/post/7377581109154938907。原创 2024-06-11 11:33:08 · 326 阅读 · 0 评论 -
小白看看还是能学会的GraphQL+NestJS+Neo4j——进阶版
NestJS没什么好说的,公司后端语言使用的是nodeJS,熟悉我的朋友都知道,之前搭建的每一个服务也都是NestJS为基础,这个可以略过。原创 2024-06-11 11:27:36 · 492 阅读 · 0 评论 -
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 · 753 阅读 · 0 评论 -
Node中模块查找策略
Node.js采用的是CommonJS模块规范,我们在平常引入时,是否注意模块引入的策略。在本文中,主要说明Node.js中的模块化加载机制,包括CommonJS模块的加载规则、内置模块的使用方式以及第三方模块的引入方法。在Node.js中,我们可以使用require函数来引入其他模块,并使用exports对象来导出当前模块的功能。等模块都是Node.js内置的模块,可以通过require函数直接引入使用。当使用require加载内置模块时,Node.js会自动查找并加载对应的模块文件,无需指定路径。原创 2024-06-11 11:15:42 · 360 阅读 · 0 评论 -
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 · 543 阅读 · 0 评论 -
js中的类型转换
将对象转换为几种常用的原始类型,通过函数的内部操作中的toString方法将对象转换为字符串再通过显示转换转换成需要的类型。js复制代码[]);来分析一下这给会打印出什么?答案是truejs复制代码[]);在分析一下这个呢?答案是false网上有很多这样的答案来解释==和===的区别,而在这就总结成==会触发隐式类型转换,===则不会。将[]==![]的转换规则手撕出来就是:js复制代码// []==![] // []==!原创 2024-06-11 10:41:17 · 625 阅读 · 0 评论 -
Nest探索(十一)Redis 入门
这些数据库都是通过硬盘来存储数据的,在进行数据读取和修改等操作时,需要查询硬盘中的数据,再加载到内存中进行处理。需要注意的是,Redis的密码建议设置超强难度的密码,因为外界可以每秒尝试 150k 次的密码破解,简单的密码容易被攻破。我们可以将安装路径添加到系统变量中,比如我的安装路径是"D:\Program Files\Redis",那么下次就直接输入redis-server即可。我们可以发现,Redis分为server端和cli端,我们需要先把server端跑起来,再在cli端中输入相应的命令。原创 2024-06-11 10:36:55 · 273 阅读 · 0 评论 -
Vue TypeScript 实战:掌握静态类型编程
当与 TypeScript 集成时,Vuex 的类型安全性可以大大提高,以下是如何在 Vuex 中使用 TypeScript 的基本概念和步骤。在TypeScript中,接口(Interfaces)和类型注解(Type Annotations)是核心特性,它们允许开发者定义代码的形状和类型,以确保类型安全和代码的可维护性。通过为 Vue Router 的路由配置和守卫函数添加类型注解,可以确保路由的正确性,并且在编译时捕获潜在的错误,从而提高代码的健壮性和可维护性。以下是性能优化和代码分割的相关策略。原创 2024-06-11 10:27:08 · 275 阅读 · 0 评论 -
Nodejs 第七十八章(Kafla)
Kafka 的主要设计目标是提供一个可持久化的、高吞吐量的、容错的消息传递系统。Kafka 的设计还强调了分布式的特性,使得它可以在大规模集群中运行,处理大量数据和高并发的请求。新版安装成功后无需配置环境变量自己就配好了,旧版本则需手动配置一下 如同rabbiteMQ 那一章节一样。注意点 需要在环境变量配置 JAVA_HOME 因为zookeeper 要读取这个环境变量 这个是必须的。安装JDK 因为Kafka用了java编写。因为Kafka也用到了ZooKeeper。安装ZooKeeper。原创 2024-06-11 10:22:46 · 1068 阅读 · 0 评论 -
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 · 522 阅读 · 0 评论 -
Web 开发者快速入门 HarmonyOS
本文面向拥有 Web 开发经验、熟悉 HTML 和 CSS 的人员。通过 HTML/CSS 和 HarmonyOS/ArkUI 代码之间的对比,能让你更快速的上手 HarmonyOS 的应用开发。原创 2024-06-08 11:48:39 · 976 阅读 · 0 评论 -
JSON.stringify()特性总结
JSON.stringify() 九大特性:一、对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时的不同返回结果。undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过(忽略)它们进行序列化undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify() 将会将它们序列化为 null。原创 2024-06-08 11:44:41 · 952 阅读 · 0 评论 -
JS - 实现一个简单的响应式系统
现在你知道我们应该怎样做来实现状态跟踪吗?看上去很简单,这是因为我们还没有追踪响应式依赖。在各大前端框架中,响应式系统无疑是核心。今天我们就来实现一个简易版的 Angular Signals。原文链接:https://juejin.cn/post/7377247135006130210。如此,我们就可以自动追踪副作用的依赖,并在信号更新时自动调用副作用函数了。对象应该是一个函数,调用它将返回内部值。函数应该接受一个初始值,返回一个。原创 2024-06-08 11:43:06 · 185 阅读 · 0 评论 -
React体系06-React 组件的新旧生命周期
生命周期含义:从组件出生到更新、改变、销毁(创建\更新\销毁)的整个阶段。生命周期的钩子函数含义:组件的每个阶段都伴随着一些方法,就是生命周期的钩子函数,我们就是通过控制这些生命周期函数从而控制组件。生命周期意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因TIPS只有类组件才有生命周期。原创 2024-06-08 11:39:51 · 828 阅读 · 0 评论 -
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 · 683 阅读 · 0 评论 -
three.js——物理引擎
剖析案例中物理引擎Ammo.js的使用方法,其中包含运动、碰撞、检测、自由落体、碰撞器、冻结、自定义更新等功能,有大量代码通过链接方式转到gitee,可以根据代码对照使用主要剖析的是threejs中提供的案例,相对于原本案例,本篇文章精简了一些代码,提取了一些方法,新增了一些可配置参数,并结合我上一篇文章做了一个小Demo。先看一下效果从图片中可以看出来,小球在落地时,触碰到人物模型的头部,改变了运动方向,后面人物模型行走时,可以踢球,改变球的运动速度。原创 2024-06-08 11:15:12 · 1089 阅读 · 0 评论 -
JS数组基础知识复盘
for...in 适合遍历对象for...of 适合遍历数组(具有迭代器的)for...in 遍历出来的是数组的索引、对象的属性、以及原型链上的属性原文链接:https://juejin.cn/post/7270854564152410166。原创 2024-06-08 11:09:01 · 410 阅读 · 0 评论 -
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 · 734 阅读 · 0 评论 -
vue3+vite插件开发
现在可以实现vue2的类似this.$api.xxx去调用接口,但是vue2源码使用的是flow来实现,并且搭配typeScript不太友好(由于装饰器语法过于复杂,这里不讨论vue2+装饰器来使用typeScript),故vue2项目没有开发webpack插件去实现代码补全。原创 2024-06-08 10:50:08 · 509 阅读 · 0 评论 -
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 · 346 阅读 · 0 评论 -
Nestjs Aop 切片
一个完整的 nest web 应用除了处理业务逻辑,还需要应对许多其他的场景。上面用 nest 提供的 4 中 AOP 切片,分别处理相对具体的场景。: 创建了一个错误码解析器,同时还具备多语言的功能。用于业务异常的抛出,前端直接提示给用户即可Pipes: 创建了一个提交接口的参数类型校验器,用于拦截非法数据提交。Guards: 创建了一个回话态校验逻辑,用户每次的提交都需要校验,后台在校验的时候,如果未过期,要注意续期: 创建了3个拦截器,分别用于数据加工,traceId , 日志。原创 2024-06-07 11:38:21 · 655 阅读 · 0 评论 -
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 · 750 阅读 · 0 评论 -
useEffect 的使用技巧
每次点击发现只会输出,也就是当 useEffect 依赖为对象时,每次更新都会执行。原创 2024-06-07 11:01:38 · 744 阅读 · 0 评论 -
JSON.stringify()特性总结
JSON.stringify() 九大特性:一、对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时的不同返回结果。undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过(忽略)它们进行序列化undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify() 将会将它们序列化为 null。原创 2024-06-07 10:54:55 · 642 阅读 · 0 评论 -
rust 单元测试最佳实践
首先,在Cargo.toml文件的部分加入以下依赖:ini复制代码Cucumber框架在Rust中是异步实现的,因此需引入tokio框架以支持异步执行Cucumber的run方法。测试文件需要放于项目的tests目录下。创建文件,并在里面定义测试的入口点。mockall是一个在 Rust 中创建 mock 对象的库。它可以自动为你的代码生成 mock 对象,这对于单元测试非常有用,因为你可以使用这些 mock 对象来模拟复杂的业务逻辑,而不需要实际执行这些逻辑。mockall。原创 2024-06-06 10:48:44 · 855 阅读 · 0 评论 -
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 · 1338 阅读 · 0 评论 -
Vue 3 Teleport:掌控渲染的艺术
title: Vue 3 Teleport:掌控渲染的艺术 description: 这篇文章介绍了Vue3框架中的一个创新特性——Teleport,它允许开发者将组件内容投送到文档对象模型(DOM)中的任意位置,即使这个位置在组件的挂载点之外。Teleport旨在解决某些特定场景下的布局和嵌套问题,如 modal 对话框、弹出框或注入全局头部等。通过使用Teleport,可以更灵活地管理这些特殊组件,同时保持应用程序结构的清晰。文章可能会详细讲解Teleport的工作原理、使用方法及其对应用性能和测试的影原创 2024-06-06 10:34:35 · 892 阅读 · 0 评论 -
vue3组件通信与props
子组件可以通过自定义事件向父组件传递数据:html复制代码// 子组件 this.$emit('my-event', data);// 父组件 <child-component @my-event="handleEvent"></child-component>在 Vue.js 框架中,props是一个组件的属性,它可以接收来自父组件的数据,并将其传递到子组件中。props使得子组件能够接收外部传入的信息,从而可以在不需要知道外部具体细节的情况下,实现与父组件的交互和数据传递。原创 2024-06-05 11:43:24 · 754 阅读 · 0 评论 -
Vue3递归组件
Vue递归组件用于在组件内部调用自身,以实现树状结构或嵌套结构的渲染。一个单文件组件可以通过它的文件名被其自己所引用。递归组件的核心在于其自我调用能力,允许在数据结构不确定深度的情况下进行动态渲染。原文链接:https://juejin.cn/post/7375002958474018843。原创 2024-06-05 11:35:07 · 332 阅读 · 0 评论 -
手写promise-面试版
then回调是支持链式调用的,也就是then.then.then,并且由api特性可知then是return一个promise的,并且这个promise的res是上一个promise的。,仔细看这一步,我们之前的想法是让这个定时器回调push到队列中,但如果这样写的话相当于将回调执行后的返回值push到队列中,仔细想想是不是这样呢!的then回调,当then回调检测到状态没有发生改变则将回调函数push到各种的队列中,状态发生改变后在从队列中取出回调函数执行。时then回调会出现问题。原创 2024-06-05 11:31:07 · 916 阅读 · 0 评论 -
Vue 3入门指南
随着时间的推移,Vue.js因其简洁的API、灵活的组件系统和高效的性能而受到开发者的广泛欢迎。如果你尚未安装,可以访问官方网站(渲染函数是一种用于渲染Vue组件的替代方法,它允许你在JavaScript函数中直接定义组件的渲染输出。虽然Vue官方推荐使用Composition API,但你也可以自定义类似Hook的函数来组织代码,但这些不是官方提供的API,而是开发者实践中的常见做法。Composition API是Vue 3引入的新的编程模型,它通过函数式编程的方式,将组件的逻辑分解为一系列函数,如。原创 2024-06-05 11:26:40 · 804 阅读 · 0 评论 -
深入理解Python多进程:从基础到实战
通过Process类可以创建新的进程,通过Pool 类可以创建进程池,实现并行处理任务。import multiprocessing condition = multiprocessing.Condition() def worker_with_condition(condition): with condition: condition.wait() # 等待通知 # 执行任务 避免全局解释器锁(GIL)的影响 GIL是CPython中的一个机制,它确保同一时间只有一个线程在执行Python字节码。原创 2024-06-05 11:24:21 · 547 阅读 · 0 评论 -
快速了解:user-valid和:user-invalid
二、更友好的校验方式 相对于:valid和:invalid,新加了user-前缀,其实就是表示用户,也就是说,这个校验要等用户操作之后才会校验,避免满屏都是红色输入框的尴尬。可以看到,下面的输入框在初始情况下是不会校验的,只有用户手动输入后才会校验,这样体验就会好很多了~ 值得注意的是,在用户操作之前(聚焦、输入等),即使是用脚本改变输入框内容,也是不会触发的 input.value = '1223';:user-valid和:user-invalid只有在用户操作以后才会触发,提升了体验。原创 2024-06-05 10:54:53 · 422 阅读 · 0 评论