自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端探索者

写是为了更好的思考,坚持写作,力争更好的思考

  • 博客(96)
  • 收藏
  • 关注

原创 React 组件测试【React Testing Library】

Testing Library 是一个以用户为中心的前端测试工具集,关注用户行为和交互,而不是组件的内部实现细节。这意味着测试更加关注组件的行为,而不是具体的实现方式基于 DOM Testing Library,为 React、Angular、Vue 等框架提供了特定的封装,如等提供通用的用户事件模拟功能,不依赖于特定框架;为 Jest 测试框架提供自定义断言器。

2025-03-12 15:09:32 557

原创 Angular 中获取 DOM 节点的几种方法

在 Angular 开发中,有多种方式可以获取和操作 DOM 节点。@ViewChild和是获取 DOM 节点的常用方法,而Renderer2则是推荐的操作 DOM 的方式。尽量避免直接操作ElementRef,除非确实必要。

2025-02-18 11:40:02 847 6

原创 电脑端调用摄像头拍照:从基础到实现

在现代 Web 开发中,调用摄像头进行拍照是一个常见的功能,尤其是在需要用户上传头像、进行身份验证或实时交互的场景中。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D 转换器等等),也可能是其他轨道类型。首先,我们需要创建一个简单的 HTML 页面,包含一个视频元素、一个画布元素和两个按钮(一个用于打开摄像头,一个用于拍照)。通过这个 API,我们可以请求设备的媒体输入,并将其流式传输到 HTML 的。

2025-02-13 17:24:40 1517 14

原创 WebSocket 握手过程

WebSocket 握手是建立 WebSocket 连接的第一步,通过 HTTP 请求和响应完成协议从 HTTP 到 WebSocket 的升级。握手过程涉及客户端和服务器之间的协商,确保双方都支持 WebSocket 协议,并通过安全机制防止恶意攻击。

2025-02-11 21:46:03 1435 1

原创 前端开发中的主题切换:如何实现灵活的主题变化?

前端开发中的主题切换:如何实现灵活的主题变化?

2025-02-08 14:58:37 1055

原创 2024年终总结:技术成长与突破之路

技术博主的年终终结报告

2025-01-24 18:51:14 1445 28

原创 Git Rebase 高级操作

查看提交历史:使用查看提交历史。开始交互式变基:使用开始交互式变基,其中N是你希望合并的提交数量。编辑提交记录:在编辑器中选择squash或s来合并提交。合并提交:保存并关闭编辑器,Git 会自动合并提交。解决冲突:如果出现冲突,解决冲突后使用git add .和继续变基。查看结果:使用查看合并后的提交历史。

2025-01-15 10:37:59 1152 2

原创 ImportMaps使用

Import Maps 目前已经得到了多个主流浏览器的支持,但还没有被所有浏览器兼容。对于不支持 Import Maps 的浏览器,可以通过使用 polyfill 或额外的加载器库(如 SystemJS)来实现导入映射的功能。

2025-01-03 16:02:12 897 2

原创 前端异常处理合集

在前端开发中,异常处理是一个重要的环节,它能够帮助我们捕获和处理程序运行时的错误,提高应用的稳定性和用户体验。前端异常拦截处理是指在应用程序的全局或者局部范围内捕获和处理异常,以防止单个组件或模块中的错误影响整个应用的稳定性。可以创建一个全局的异常处理函数,并在应用的各个部分调用它。console.error("全局异常处理:", error);// 错误日志上报// 使用try {// 可能会抛出错误的代码。

2025-01-02 17:27:23 1058

原创 【日常开发】Git Stash使用技巧

git stash是一个强大而灵活的 Git 工具,它为我们在复杂的开发过程中提供了便捷的代码变更管理方式。通过合理运用git stash的各种命令,我们可以在不影响代码版本历史的前提下,轻松地切换工作上下文,保存和恢复未完成的代码修改,以及对存储记录进行有效的管理.

2024-12-27 16:08:13 3461 2

原创 Mongoose连接数据库操作实践

Mongoose 是一个 MongoDB 对象模型库(ODM),它为 Node.js 应用程序提供了一个直白、简洁和富有表现力的数据建模工具.在这里使用 Schema 定义 MongoDB 集合的结构,在这里我们定义一个用户结构 (UserSchema) 和地址结构(AddrSchema):这里使用default设置字段默认值,使用select来设置在find和findOne的返回结构中是否展示,避免将密码等敏感字符暴露出接口,使用set方法,在数据保存进库之前进行一些操作(如加密),

2024-12-16 20:16:55 807 1

原创 MongoDB、Mongoose使用教程

MongoDB 是一个开源基于文档的 NoSQL 数据库,使用文档导向的数据模型是一个,它以其高性能、高可用性和易扩展性而闻名,非常适合处理大量的分布式数据。它以 BSON(二进制 JSON)格式存储数据,这使得它在存储复杂数据结构时非常灵活。Mongoose 中的一切都始于结构(Schema),没有模型有一个默认 Id_id, 他是ObjectId()类型的模型(Model)是从 Schema 定义编译而来的奇特构造函数, 模型的一个实例称为 document。

2024-12-16 17:39:00 1183

原创 【Http缓存及历史】从四个维度带你读懂HTTP

HTTP 协议作为 Web 的核心,其发展和创新从未停止。从最初的 HTTP/0.9 到现在的 HTTP/3,HTTP 协议不断演进,以满足不断变化的网络需求。了解 HTTP 的各个方面,对于任何希望在 Web 领域发展的开发者来说都是至关重要的。

2024-10-24 07:00:00 1489 4

原创 前端面试常见手写代码题【详细篇】

在前端面试中,经常会遇到防抖 、节流、函数柯里化、函数组合、instanceof 实现、实现new操作符的行为、深拷贝、继承实现:、手写Promise、数组中常见函数的实现等代码手写题,本文都已全部列举

2024-10-08 15:46:35 2043 17

原创 Webpack 特性:自定义 Loader 和 Plugin

Webpack是一个现代JavaScript应用的静态模块打包器,它能够将项目中的所有依赖项(包括JavaScript、图片、CSS等)打包成一个或多个bundle。在Webpack的构建过程中,存在许多生命周期钩子(hooks),这些钩子允许插件(plugins)和loaders在不同阶段介入构建过程。创建一个 JavaScript 文件作为 Plugin,比如。在这个文件中,定义一个类,这个类必须实现apply方法。在apply方法中,接受compiler。

2024-10-03 07:00:00 1290 6

原创 WebAssembly 为什么能提升性能,怎么使用它 ?

WebAssembly(简称Wasm)是一种新的编码方式,WebAssembly 是一种技术,该技术能让除 JavaScript 以外的代码运行在浏览器上。它是一种低级的类汇编语言,具有紧凑的二进制格式,可以为C/C++、C#和Rust等语言提供编译目标,使它们能够在Web上运行。

2024-09-30 17:27:13 1345 12

原创 Webpack 特性探讨:CDN、分包、Tree Shaking 与热更新

Webpack 作为现代前端开发中的核心构建工具,提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新(HMR)等关键特性。我们将使用前一篇文章中的代码,然后我们引入一些图片、css 等资源文件已经一些常用的第三方库,如lodash。

2024-09-29 17:43:11 1491 5

原创 webpack打包Vue项目【完整版】

本文分两部分来介绍:第一部分:将先介绍 webpack 打包 Vue 需要用到的 Vue 相关包,然后配置项目目录及必要文件,最后配置 webpack.config.js,运行项目第二部分:探索 cdn、分包、tree Shaking、已经热更新的使用`

2024-09-28 07:00:00 2033 18

原创 webpack配置全面讲解【完整篇】

本文介绍了webpack中的一些核心概念,例如:webpack 核心包:配置文件导出三种方式:在线配置 webpack配置文件解析:入口(Entry):输出(Output):加载器(Loaders):插件(Plugins):模式(Mode):目标(Target):webpack 的 runtime 和 manifest服务器模块解析配置优化配置热模块替换(Hot Module Replacement, HMR):代码分割(Code Splitting):在 Node 中使用

2024-09-27 11:59:02 1742 44

原创 前端音视频入门,读这一篇就够了【详解篇】

文章从 音视频基础概念开篇,文中涉及 HTML5 Media APIs、Media Source Extensions (MSE)、WebRTC、Web Audio API 、HLS.js 库使用 、FFmpeg 进行格式转换 和 video.js 播放视频 使用示例等

2024-09-25 07:00:00 2138 1

原创 20道前端网络高频面试题【含详解】

随着互联网技术的迅猛发展,前端网络知识在现代Web开发中扮演着越来越重要的角色。无论是资深的网络工程师还是初入职场的新手,掌握前端网络的高频面试题对于提升个人技能和在面试中脱颖而出都至关重要。本文精心整理了20道前端网络高频面试题,并提供了详尽的解析,旨在帮助读者全面理解网络协议、数据传输、安全机制等关键知识点,从而在技术面试中展现出深厚的专业素养和实战能力。新整理了一篇2024网络知识相关的高频面试题,无论您是资深网络工程师还是初入职场的新手,本文都将助您一臂之力,让您在面试中游刃有余,展现专业风采。

2024-09-24 15:25:52 3039

原创 前端必须掌握的五种排序算法,你会几种?

在前端开发中,对数据进行排序是一项基本且常见的任务。掌握排序算法不仅可以帮助我们更有效地处理数据,还能提升代码的执行效率。冒泡排序、选择排序、插入排序、快速排序和归并排序。通过理解这些算法的原理和逻辑,我们可以更好地选择合适的排序方法来优化应用性能。正文开始💖💖💖。

2024-09-10 07:00:00 3341 20

原创 一文看懂时间复杂度和空间复杂度【已附代码详解】

数据结构是计算机科学中存储、组织数据的方式,它使得我们可以高效地访问和修改数据。数据结构通常包括数据的逻辑关系,这些关系定义了数据元素之间的相互作用。算法是解决特定问题的一系列计算步骤。一个好的算法应该具备正确性、可终止性、有穷性,并在资源使用上尽可能高效。数据结构和算法是软件开发中的基石。掌握它们不仅能够帮助我们写出更高效的代码,还能提高我们解决问题的能力。通过实际的代码示例,我们可以更深入地理解每种数据结构和算法的工作原理和使用场景。

2024-09-09 07:00:00 1587 4

原创 哪些有让你感觉到工作效率翻倍的工具?

在日益繁忙的工作环境中,选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度,甚至让团队协作更加顺畅。那么,哪款编程工具让你的工作效率翻倍?是智能的代码编辑器,强大的版本控制工具,还是那些让你事半功倍的自动化脚本?让我们一起分享、探讨,找到能让效率飞升的秘密武器。在软件开发的世界里,效率是王道。随着技术的发展,新的编程工具层出不穷,它们承诺能提高生产力,减少重复劳动,甚至帮助开发者避免错误。但在这个工具的海洋中,哪些是真正能让工作效率翻倍的神器呢。

2024-09-08 07:00:00 843 9

原创 Python教程(二十一) : 从零开始制作计算器应用【PyQt6】

通过这篇文章,我们展示了如何使用 PyQt6 来创建一个简单的计算器应用。这个示例涵盖了 PyQt6 应用程序的基本结构,包括窗口、布局、控件和事件处理。希望这个示例能够帮助你理解 PyQt6 的基本概念,并激发你进一步探索和学习 PyQt6 的兴趣。

2024-09-07 10:56:51 2636 51

原创 Python教程(二十) : 十分钟入门【PyQt6】

首先,你需要定义一个槽函数,这个函数将作为信号的响应。print("按钮被点击了")# 使用my_obj.my_signal.emit() # 发出信号通过本教程,你已经学会了如何使用 PyQt6 创建一个基本的 Python GUI 应用程序。PyQt6 提供了丰富的控件和灵活的布局管理,使得它成为快速开发 GUI 应用程序的理想选择。你可以继续探索 PyQt6 的更多高级特性,或者尝试创建更复杂的应用程序。

2024-09-06 21:10:15 5826 24

原创 Python教程(十九):使用Tkinter制作计算器

Python 是一种非常适合快速开发的编程语言,它有着丰富的库来支持图形用户界面(GUI)的开发。在本教程中,我们将使用 `tkinter` 库来创建一个简单的图形化应用程序。`tkinter` 是 Python 的标准 GUI 库,它是跨平台的,并且内置于大多数 Python 安装中。

2024-09-05 07:00:00 1816 11

原创 Python教程(十八): 从零到一教会你用 Django【Web 开发】

在当今的软件开发领域,Web 开发仍然是最受欢迎的方向之一。Python,作为一种简洁而强大的编程语言,通过其丰富的框架和库,为 Web 开发提供了强大的支持。本文将带你了解 Python 在 Web 开发中的应用,包括流行的框架、开发工具以及最佳实践。Web 开发是指创建和维护网站和 Web 应用程序的过程。它通常分为前端开发和后端开发。前端关注用户界面和用户体验,而后端则处理服务器、数据库和应用程序逻辑。在myapp目录中,创建一个urls.py。

2024-09-04 07:00:00 3207 11

原创 Python教程(十七):协程、 asyncio与 aiohttp【异步IO】

使用async def异步 IO 是提高 Python 程序性能的强大工具。通过asyncio和aiohttp,你可以构建高效、可扩展的异步应用程序。使你在处理高并发场景时更加得心应手。

2024-09-03 11:49:44 1415 9

原创 Mysql常见问题汇总【持续更新】

Mysql常见问题汇总【持续更新】

2024-08-30 15:04:38 1259 21

原创 【超详细】Linux开发环境搭建指南 | Ubuntu

Linux基础安装教程,包含:虚拟机安装对比Virtual Box 下载ubuntu 操作系统下载Virtual Box 安装安装ubuntu设置中文语言共享文件夹设置添加输入法安装步骤,参考官方教程安装 vscode解决主机不能通过ssh连接宿主机网络连接几种网络连接区别相互pingNAT(网络地址转换)桥接模式仅主机(互通)桥接模式 + 仅主机(Host-only)网络代理

2024-08-28 18:29:03 4162 50

原创 Redis安装+常用命令合集大全+Redis Desktop Manager

1.1 什么是RedisRedis(Remote Dictionary Server)是一个开源的,基于内存的高性能键值对数据库。支持多种类型的数据结构,如字符串、列表、集合、有序集合和哈希表。1.2 Redis 的特点高性能:操作速度快,因为数据存储在内存中。持久化:支持将内存中的数据保存到磁盘,防止数据丢失。原子性:Redis的所有操作都是原子性的。丰富的特性:如事务、发布/订阅、队列等。

2024-08-27 07:00:00 4183 58

原创 面向对象编程:深入PHP的封装、继承和多态性!

使用class关键字定义类,通过->访问实例属性使用new关键字创建类的对象。php// 属性// 输出: red错误报告:控制哪些错误应该被报告。异常:使用trycatch语句捕获和处理错误。错误抑制:临时忽略错误。可以创建自定义异常类来扩展内置的Exception类。phptry {现在你应该能够理解面向对象编程的基本概念和PHP中的错误处理机制,并能够使用它们来设计和实现复杂的软件系统。OOP提供了一种强大的工具,用于创建模块化、可重用和易于维护的代码。

2024-08-24 10:11:47 1422 8

原创 探索PHP的奥秘:从基础到高级的全面指南

上文我们已经通过 Apache 服务器和 PHP 内置服务器启动项目,可以编写我们的代码了,这篇文章我们就 PHP 的语法进行一个详细的说明PHP 代码通常放在php和?标签之间。PHP 是一种解释型语言,不需要编译。正文开始💖💖💖。

2024-08-23 16:58:51 1155 6

原创 【PHP入门教程】PHPStudy环境搭建+composer创建项目

是一种开源的通用脚本语言,主要用于Web开发。它最初由Rasmus Lerdorf在1995年创建,用于跟踪他的个人网站访问者。随着时间的推移,PHP已经发展成为一个功能强大的服务器端脚本语言。要在本地计算机上运行PHP代码,你需要一个具有PHP解释器的Web服务器环境。PHP广泛用于Web开发,可以生成动态页面内容。PHP 脚本在服务器上执行,然后将纯 HTML 结果发送回浏览器。路径配置成环境变量,这样就能在全局使用。为例,因为使用得多,又跨平台。PHP 文件的默认文件扩展名是。

2024-08-22 17:50:12 2534 5

原创 【python镜像设置】pip使用清华镜像源安装

PyPI的镜像站点是用于加速Python包下载的服务器,它们提供了与官方PyPI相同的内容,但可能会因为地理位置更近而下载速度更快。进行python 的第三方库安装,但是,有时会出现。使用了清华大学的镜像网站。

2024-08-21 16:27:24 6039 60

原创 【vue教程】七. Vue 的动画和过渡

在本节的 Vue 探索之旅中,我们学习了 Vue 的动画和过渡,包括 Vue 的内置动画系统、CSS 过渡和 JavaScript 动画。通过实例演示,我们看到了如何将这些技术结合起来,为应用添加吸引人的动画效果。

2024-08-20 21:45:46 1384 9

原创 【vue教程】六. Vue 的状态管理

借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。状态自管理应用包含以下几个部分:状态,驱动应用的数据源;视图,以声明方式将状态映射到视图;操作,响应在视图上的用户输入导致的状态变化。以下是一个表示“单向数据流”理念的简单示意:Vuex 在 Vue 组件中的流程图在本站的 Vue 探索之旅中,

2024-08-19 14:08:45 1309 12

原创 Python教程(十六):进程、线程、线程锁

在现代软件开发中,充分利用`多核处理器`的能力,提高应用程序的性能和响应性,是每个开发者都需要考虑的问题。Python 作为一门高级编程语言,提供了多种并发编程的解决方案,包括多进程、多线程和异步编程

2024-08-17 07:00:00 2771 72

原创 Python教程(十五):IO 编程

IO是的缩写,即输入和输出。在编程中,IO操作包括从用户那里获取输入(如键盘输入)和向用户发送输出(如屏幕显示或文件写入)。IO编程是Python编程中的一个重要组成部分。从简单的标准IO到复杂的文件和网络IO,Python提供了丰富的功能和库来支持各种IO操作。掌握这些技能,可以帮助你构建更加强大和灵活的应用程序。

2024-08-16 07:00:00 2279 39

css3实现鼠标移入 3D卡片翻转

CSS3 实现鼠标移入 3D 卡片翻转 3D 卡片翻转效果是一种流行的网页视觉效果,常用于增强用户界面的互动性和视觉吸引力。通过 CSS3 的强大功能,我们可以轻松实现这种效果,而无需依赖复杂的 JavaScript 代码。 关键技术点 CSS3 3D 变换:利用 transform 属性中的 rotate 和 translate 函数,实现卡片的 3D 翻转效果。 CSS3 过渡效果:使用 transition 属性平滑地过渡翻转动画,增强视觉效果。 伪元素:通过 ::before 和 ::after 伪元素扩展卡片的视觉效果,模拟出更真实的 3D 效果。 视差效果:结合背景和卡片的相对移动,创造出深度感和动态效果。

2024-07-24

【AI绘画大师】实操练习 + 【AI对话大师】GPT对话练习

本课程旨在通过一系列实操练习,教授学员如何使用人工智能技术创作出令人惊叹的数字艺术作品。从基础的图像处理到高级的艺术创作,学员将掌握AI绘画的核心技术和创意思维。 示例1:用Midjourney【生成头像】 示例2:用Midjourney【绘制电影《消失的她》海报】 示例3:用Midjourney做新中式家居设计 示例4:用Midjourney做【商品图片设计】 本课程通过GPT(生成预训练转换器)对话练习,帮助学员掌握与AI进行有效沟通和交互的技巧。学员将学习如何通过语言理解和表达,与AI进行流畅的对话。 示例1:让ChatGPT推荐书籍 示例2: 让ChatGPT写论文 示例3: 让ChatGPT扮演文案专家,写爆款标题 示例4: 让ChatGPT扮演减脂教练,出减脂食谱 对人工智能对话系统和自然语言处理感兴趣的初学者和中级爱好者。

2024-07-24

前端2024最新面试题合集

1. HTML 篇 , 2. CSS 篇 , HTML / CSS 混合篇,JS 篇,Vue 篇,其他杂项篇,主观题篇 1. HTML 篇 - 1.1 语义化的理解 - 1.2 `title` 与 `alt` 属性的区别 - 1.3 `iframe` 的优缺点 - 1.4 `href` 与 `src` 的区别 ### 2. CSS 篇 - 2.1 CSS 盒子模型 - 2.2 CSS 选择器优先级 - 2.3 垂直居中方法 - 2.4 `CSS link` 与 `@import` 的区别和用法 - 2.5 `rgba` 和 `opacity` 的透明效果 - 2.6 `display:none` 和 `visibility:hidden` 的区别 - 2.7 `position` 的值及其定位方式 ### 3. HTML / CSS 混合篇 - 3.1 HTML5 和 CSS3 的新特性 - 3.2 BFC 的概念 - 3.3 常见兼容性问题 ### 4. JS 篇

2024-07-24

PyCharm 插件工具

使用教程: 具体使用教程可以参考文档: https://blog.youkuaiyun.com/cdns_1/article/details/140620522

2024-07-23

最新版nginx安装包

有windows的zip,解压就能用 也有Linux 和 macOS 的 .tar文件,使用` tar -xzvf nginx-1.26.1.tar.gz ` 解压就行

2024-07-03

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除