自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

百赢出品,必属精品

前端学徒,欢迎共同讨论了解

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

原创 CSS响应式布局(网页如何根据不同尺寸调整状态)

使用相对单位(如百分比)而不是固定单位(如像素)来定义网页元素的大小和位置,使得页面布局能够自适应不同的屏幕尺寸。使用 CSS3 中的媒体查询功能,根据设备特性(如屏幕宽度、设备方向等)应用不同的 CSS 样式,以适配不同的设备。使用可伸缩的图片格式(如矢量图形或使用 CSS 来调整图像大小),以确保图片能够在不同分辨率的屏幕上显示清晰。页面元素的宽度会随着视口大小的改变而自动调整,以适应不同的屏幕尺寸。媒体查询(Media Queries):媒体查询允许你针对设备的不同特性定义不同的样式。

2024-04-23 17:13:57 5709

原创 前端八股CSS:盒模型、CSS权重、+与~选择器、z-index、水平垂直居中、左侧固定,右侧自适应、三栏均分布局

答:1. 使用flex布局:justify-content:center,align-content:center。1.标准盒模型(content-box):默认值,宽度和高度只包含内容区域,不包含内边距、边框和外边距。为了更好的使用z-index,可以合理划为堆叠上下文,还可以避免使用过高的z-index,同时要层级清晰。2.边框盒模型(border-box):宽度和高度包括内容区域、内边距和边框,但不包括外边距。答:1.z-index用于控制元素的堆叠顺序,决定哪些元素会出现在其他元素之上。

2025-01-31 13:24:06 1128

原创 Uniapp中的map属性(秒懂地图各种功能)

UniApp 中的map组件是一个用于显示和交互地图的工具,支持多种功能,如定位、标记、路径绘制和区域标注等。它适用于展示位置、路线规划、实时定位等场景。主要特点包括支持地图缩放、标记自定义、路径绘制、3D 地图和地图控件等。优点是易于使用、跨平台支持和功能丰富,但也有依赖第三方地图服务和需要处理权限等潜在缺点。整体来说,它提供了便捷的地图集成功能,适用于各种位置相关应用。

2025-01-31 12:31:03 1380

原创 后端Java学习:springboot之文件上传(阿里云OSS存储)

阿里云对象存储OSS(Object Storage Service),是一款海量、安全、低成本、高可靠的云存储服务。使用OSS,您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种文件。在Spring Boot中实现文件上传功能需要配置项目依赖、创建控制器处理文件上传请求、设置文件大小限制、编写HTML表单供用户选择文件,并确保存储目录存在。启动应用后,可以通过访问上传表单进行测试,同时要注意文件类型检查和异常处理,以提升安全性和用户体验。

2024-10-30 20:50:50 1501

原创 前端算法题:3216. 交换后字典序最小的字符串(力扣每日一题)

前端算法之每日一题:今日题目为力扣3216题交换后字典序最小的字符串。

2024-10-30 20:35:07 409

原创 前端算法:堆

堆能用树来表示,并且一般树的实现都是通过链表,而二叉堆是一种特殊的堆,它用完全二叉树来表示,却可以利用数组来实现。插入和删除操作的时间复杂度为 O(log n),而查找最大/最小值的时间复杂度为 O(1)。平时使用最多的是二叉堆,它可以用完全二叉树俩表示,二叉堆易于存储,并且便于索引。注意:堆的数据结构像树,但是通过数组实现、

2024-10-23 20:44:42 342

原创 前端算法:树(力扣144、94、145、100、104题)

树(Tree)是一种重要的数据结构,广泛应用于计算机科学中。它由节点组成,并且有一个根节点,其他节点通过边连接形成层级关系。

2024-10-23 20:38:55 1431 1

原创 前端算法:字典and哈希表(力扣1题、349题解法)

字典是一种以键值对形式存储数据的集合。在字典中,每个键都是唯一的,值可以是任意类型。这种结构使得查找、插入和删除操作变得非常高效。在 JavaScript 中,可以使用对象()或 ES6 引入的 来实现字典。使用map5.应用场景 数据存储:可以用来存储用户信息、配置选项、字典数据等。 频率统计:统计单词出现频率,例如在文本分析中。 快速查找:用于需要频繁查找的场景,如缓存、路由配置等。二、哈希表1.概念哈希表是一种实现字典的数据结构,利用哈希函数将键映射到数组索引

2024-10-22 21:54:48 847 1

原创 前端算法:链表(力扣141、237题解法)

链表是一种动态数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组相比,链表具有灵活的大小和高效的插入、删除操作,但在随机访问方面较慢。常见的链表类型包括单向链表、双向链表和循环链表。

2024-10-22 21:32:54 1149

原创 前端算法:栈和队列(力扣20、1047、71题解法)

栈是一种遵循后进先出原则的数据结构,也就是说,最后加入栈的元素最先被移除。队列是一种遵循先进先出原则的数据结构,也就是说,最先加入队列的元素最先被移除。栈和队列是两种常用的数据结构,它们的主要区别在于元素的添加和删除顺序。栈(Stack)采用后进先出的原则,最后添加的元素最先被删除,常用于函数调用管理和表达式求值等场景;而队列(Queue)采用先进先出的原则,最早添加的元素最先被删除,适用于任务调度和广度优先搜索等应用。两者都具有动态存储的特性,但在操作方式上各有特点,适用于不同的场景和需求。

2024-10-20 16:55:20 905

原创 前端算法:时间复杂度和空间复杂度

时间复杂度和空间复杂度是评估算法性能的两个关键指标,它们分别反映了算法在处理输入数据时所需的时间和内存资源。时间复杂度通常用大O符号表示,描述了算法在最坏、最好和平均情况下的运行时间与输入规模之间的关系。常见的时间复杂度有O(1)(常数时间复杂度)、O(log n)(对数时间复杂度)、O(n)(线性时间复杂度)、O(n log n)(线性对数时间复杂度)以及O()(平方时间复杂度)等,这些复杂度级别帮助开发者理解算法在处理不同数据规模时的性能表现。

2024-10-20 16:19:11 747

原创 深入理解 React 的 useState Hook

useStateuseState是 React 中的一个 Hook,主要用于在函数组件中管理状态。导入: 从 React 引入useState。基本用法调用,返回当前状态和更新状态的函数。更新状态使用更新函数来改变状态值异步特性: 状态更新可能是异步的。对象和数组: 更新复杂状态时,需使用展开运算符。延迟初始化: 可以传入函数进行惰性初始化。类型安全: 在 TypeScript 中可指定状态类型。useState使得函数组件能够便捷地管理状态,提升了组件的功能性。

2024-09-26 09:57:08 449

原创 深入理解 JSX:构建 React 用户界面的利器

是一种语法扩展,主要用于 React 开发中。它允许开发者在 JavaScript 代码中直接书写类似 HTML 的结构,使得构建用户界面变得更加直观和简洁。虽然 JSX 看起来像 HTML,但它实际上是 JavaScript 语法的一个扩展。定义:JSX(JavaScript XML)是 React 中的语法扩展,允许在 JavaScript 代码中编写类似 HTML 的结构。基本语法表达式:可以嵌入 JavaScript 表达式,使用{}包裹。标签:支持 HTML 标签和自定义组件。属性。

2024-09-26 08:48:23 430

原创 Element-UI 表格组件详解(如何使用以及自定义插槽)

用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。基本结构可以通过v-slot

2024-09-08 21:14:11 1000

原创 Elment-UI中Form表单(详细介绍如何使用表单并正确使用slot插槽)

在 Element-UI 中,表单包含输入框单选框下拉选择多选框等用户输入的组件。使用表单,您可以收集、验证和提交数据。Element-UI 的组件是一个功能强大的表单组件,提供了各种表单输入控件及其验证功能。通过使用表单插槽,你可以自定义表单的布局和内容。下面是对 Element-UI 表单插槽的详细介绍,包括如何使用这些插槽来实现更复杂的表单布局和功能。用户注册和登录:处理基本的用户信息输入,如用户名、密码、邮箱等。数据录入。

2024-09-08 20:50:36 644

原创 MySQL基础操作指南:从连接到数据管理的完整指南

MySQL是一种流行的开源关系型数据库管理系统,广泛应用于Web应用程序的数据存储和管理。它支持多种操作系统,包括Windows、Linux和macOS,以及多种编程语言,如PHP、Python、Java等。MySQL的特点包括高性能、可靠性好、易于使用和广泛的社区支持。MySQL提供了多种存储引擎,如InnoDB、MyISAM等,每种引擎有其特定的优势和适用场景。

2024-08-08 16:06:05 2338

原创 Element UI 实战指南:优化你的 Vue 应用

Vue.js 是一个流行的前端框架,简化了构建交互式 Web 界面的过程。Element UI 是一个基于 Vue.js 的组件库,提供了丰富的UI组件和功能,能够帮助开发者快速构建现代化的用户界面。

2024-08-08 15:41:21 528

原创 深入学习小程序第二天:事件处理与用户交互

事件处理与用户交互是小程序开发中的核心内容之一,合理使用事件绑定和事件处理函数,可以为用户提供流畅、直观的应用体验。通过掌握事件类型、事件对象、事件冒泡与捕获等知识,开发者能够更灵活地应对各种用户操作,实现丰富的交互效果。

2024-08-07 10:09:17 580

原创 小程序开发入门:第一天的学习和实践指南

学习小程序开发的第一天主要包括以下内容:首先,安装和配置开发工具,如微信开发者工具或VS Code,以熟悉界面和基本操作;其次,学习小程序的基本结构,包括JSON配置文件、WXML模板、WXSS样式和JavaScript逻辑,理解它们之间的关系和作用;然后,创建并调试一个简单的 Hello World 小程序,学习预览、调试和修改页面的基本流程;接着,掌握小程序页面的生命周期和常见事件处理方法,例如onLoad、onShow等,了解页面加载和用户交互的基本流程;

2024-08-05 12:26:21 692

原创 Vue 项目开发详细指南:从初始化到部署的完整流程

从零开始开发和部署Vue项目包括使用Vue CLI创建项目结构,编写和组织Vue组件,配置路由和状态管理,处理API请求,优化代码和资源,构建生产版本,配置服务器部署,设置域名和SSL,最终通过监控和维护确保应用稳定运行,是一个完整的开发流程。

2024-08-05 12:09:04 1166

原创 初识Node.js-回调函数(详解回调函数使用)

在 Node.js 中,回调函数是一种常见的编程模式,用于处理异步操作。当执行某个耗时的操作时(比如文件 I/O、网络请求等),Node.js 不会阻塞主线程,而是将操作放入事件循环中,继续执行后续的代码。一旦操作完成,Node.js 就会调用事先定义好的回调函数来处理结果。定义方式:回调函数是作为参数传递给其他函数的函数。if (err) {// 处理错误} else {// 处理结果});约定的回调参数。

2024-05-08 18:21:37 890

原创 初识Node.js-REPL(详解交互式解释器)

REPL 读取用户在命令行中输入的 JavaScript 代码。REPL 执行读取的 JavaScript 代码,并返回结果。REPL 打印执行结果到命令行界面。REPL 循环执行上述步骤,等待用户继续输入代码。交互性:REPL(Read-Eval-Print Loop)提供了一个交互式的 JavaScript 运行环境,允许用户直接在命令行中输入 JavaScript 代码并查看执行结果。四个步骤。

2024-05-08 18:13:57 1419

原创 初识Node.js-创建第一个应用(Node初使用)

如果我们使用 PHP 来编写后端的代码时,需要 Apache 或者 Nginx 的 HTTP 服务器,并配上 mod_php5 模块和 php-cgi。从这个角度看,整个"接收 HTTP 请求并提供 Web 页面"的需求就不需要 PHP 来处理。不过对 Node.js 来说,概念完全不一样了。使用 Node.js 时,我们不仅仅 在实现一个应用,同时还实现了整个 HTTP 服务器。事实上,我们的 Web 应用以及对应的 Web 服务器基本上是一样的。在我们创建 Node.js 第一个 "Hello, Wor

2024-05-07 18:27:36 771

原创 初识Node.js-认识node(安装Node.js环境配置)

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。

2024-05-07 18:22:40 1670

原创 初识Vue-混入mixins(详解分发 Vue 组件中可复用功能)

混入是一种将可复用功能注入到 Vue 组件中的方式,它允许你将组件中的一些选项混合到多个组件中。混入是一种Vue.js提供的一种灵活的代码复用方式,允许将一组组件选项合并到一个对象中,然后将其应用到多个组件中。可以使用在Vue实例创建之前全局注册一个混入,使得混入对象中的选项对所有组件都可用。在组件中使用mixins选项引入一个或多个混入对象,使得这些混入对象中的选项对该组件及其子组件可用。混入对象可以包含数据、方法、生命周期钩子、计算属性、观察者和指令等组件选项。

2024-05-06 20:19:36 1595 1

原创 初识Vue-生命周期函数(详解如何让组件在不同阶段执行相应操作)

生命周期函数是在Vue组件生命周期中的特定时间点执行的函数。Vue实例有一个完整的生命周期,从创建、挂载、更新到销毁。在这个过程中,Vue提供了一系列的钩子函数,让你能够在特定阶段执行自定义逻辑。生命周期函数是在Vue组件实例化、挂载、更新、销毁等不同阶段触发的钩子函数,用于执行特定的操作。: 在实例初始化之后,数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。在这个阶段,组件实例的选项对象已经被处理,但实例的数据和方法尚未初始化。created。

2024-05-06 20:11:55 1592 1

原创 初识Vue-插槽(详解插槽slot的运用)

Vue.js中的插槽是一种机制,允许你在父组件中将任意内容传递给子组件,使得组件更加灵活和可复用。插槽允许你定义一个模板,并在子组件中定义插槽的位置,然后在父组件中填充内容。插槽是 Vue.js 中一种强大的组件化技术,允许父组件向子组件传递内容。它允许子组件在特定位置接收父组件传递的内容,并在其内部渲染。默认插槽是没有名字的插槽,用于接收父组件传递的内容。父组件可以在子组件的默认插槽中传递任意内容,子组件可以在相应位置渲染这些内容。命名插槽允许父组件传递具有特定名称的内容到子组件中的相应插槽中。

2024-05-05 22:37:07 1564 2

原创 初识Vue-组件通信(详解props和emit)

在组件化开发中,一个应用程序通常由多个组件组成。这些组件可能位于不同的层级,有不同的作用和责任。组件通信就是让这些组件之间能够相互交流、传递数据、共享状态或触发行为的机制。Props 允许父组件向子组件传递数据。子组件通过 props 接收父组件传递的数据,并可以在组件内部使用这些数据。父组件使用 v-bind 指令将数据传递给子组件,并在子组件标签上使用相应的 prop 名称。Custom Events 允许子组件向父组件发送消息。

2024-05-04 22:57:35 1693 2

原创 初识Vue-脚本架(如何创建vue项目并使用)

Vue 脚手架”通常指的是 Vue CLI,是一个官方提供的命令行工具,用于快速搭建 Vue 项目。Vue CLI 提供了一套标准化的项目模板和一系列的开发工具,使得创建、管理和部署 Vue 项目变得更加简单和高效。快速创建项目:使用 Vue CLI,你可以在几秒钟内创建一个新的 Vue 项目,而无需手动设置项目结构。可配置的项目预设:Vue CLI 提供了几种预设配置,包括默认配置、手动配置和预设模板(如 Babel、TypeScript、ESLint 等),以满足不同项目的需求。内置开发服务器。

2024-05-03 12:17:49 1255

原创 CSS元素的显示与可见性(详解Display和Visibility的用法)

1.DisplayDisplay主要用于控制元素的布局方式,包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性,即元素是否在页面中可见,但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括:none: 元素不会被渲染在页面上,且不占据空间。block: 元素被渲染为块级元素,占据一整行。inline: 元素被渲染为内联元素,不会独占一行,与其他内联元素在一行内显示。

2024-05-03 12:12:21 4867

原创 初识Vue-组件化开发(应用实例)

开发一个简单的任务管理应用,其中包含任务列表和添加任务的功能。我们可以使用 Vue.js 来构建这个应用,并将其组件化。在这个示例中,我们创建了一个简单的任务管理应用。任务列表组件用于显示任务列表,添加任务组件用于添加新任务。在应用入口组件中,我们将这两个组件组合在一起,并通过 props 和事件进行通信。通过这种方式,我们实现了组件化开发,使得应用的各个功能模块独立、可重用和易于维护。显示商品列表将商品添加到购物车显示购物车中的商品列表计算购物车中商品的总价。

2024-05-02 12:00:13 979

原创 初识Vue-组件化开发(详解各个组件)

Vue.js中的组件是可复用的Vue实例,具有自己的模板、逻辑和样式。组件允许开发者将页面分割成独立、可复用的模块,使得代码更易维护、可读性更高。每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。const RootComponent = { /* 选项 */ }// 创建一个Vue 应用。

2024-05-02 08:06:07 1999 1

原创 CSS中文本样式(详解网页文本样式)

CSS Text模块用于控制文本的外观和排版。它提供了一系列属性,允许开发者对文本进行格式化和布局,以实现各种视觉效果。文本样式属性:CSS提供了一系列属性来控制文本的外观,包括颜色、字体、大小、粗细等。这些属性包括colorfont-size等。文本对齐:通过text-align属性可以控制文本在其容器中的水平对齐方式,如左对齐、右对齐、居中对齐等。文本装饰:使用属性可以添加文本装饰效果,如下划线、删除线等。行高和间距属性用于设置行高,和属性分别控制字母和单词之间的间距。文本转换。

2024-04-30 19:38:51 1789

原创 HTML中input输入框(详解输入框的用法)

input>元素是HTML表单中最常见的元素之一,用于收集用户的输入数据。它可以包含多种类型的输入,如文本、密码、数字等。通过指定不同的type属性,可以定义不同类型的输入字段。类型(type)属性定义输入字段的类型,如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称(name)属性用于标识输入字段的名称,以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框,相同名称的一组按钮被视为一个组,只能选择其中的一个或多个。

2024-04-30 17:59:49 21224

原创 html表格(详解网页表格的制作)

HTML 表格由 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义),表格可以包含标题行()用于定义列的标题。tr:tr 是 table row 的缩写,表示表格的一行。td:td 是 table data 的缩写,表示表格的数据单元格。th:th 是 table header的缩写,表示表格的表头单元格。

2024-04-26 15:36:17 3419

原创 CSS 网页布局(详解网页的布局构造)

网页布局是将网页内容按照一定的结构和规则进行排版和组织,使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用,掌握如何设计和实现网格布局,以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性,掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型,包括常规文档流、浮动布局、定位布局(相对定位、绝对定位、固定定位)、Flexbox布局和栅格布局等。

2024-04-26 15:21:52 2410

原创 CSS Position定位(详解网页中的定位属性)

文档流(Document Flow):HTML元素默认按照文档流从上到下依次排列,形成页面布局。定位:定位是指通过CSS将元素摆放到指定位置的技术,不受文档流的限制。定位属性(position)用于指定元素的定位方式,可选值包括相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)。相对定位(Relative Positioning)元素相对于其正常位置进行定位,通过设置top、right、bottom和left属性进行偏移。

2024-04-25 18:45:11 2016 1

原创 CSS border边框(理解网页边框制作)

边框是围绕在元素周围的一条线,可以设置边框的宽度、样式和颜色,用于装饰和分隔元素。border-width(边框宽度):用于设置边框的宽度,可以是像素、百分比或预定义值(thin、medium、thick)。border-style(边框样式):指定边框的样式,常见的样式包括 solid(实线)、dashed(虚线)、dotted(点线)、double(双线)等。border-color(边框颜色):设置边框的颜色,可以是具体的颜色值、RGB值、十六进制值等。border(边框简写属性)

2024-04-25 18:36:27 8064

原创 HTML超链接(详解如何进行网页之间的跳转)

HTML 使用超级链接与网络上的另一个文档相连。HTML中的链接是一种用于在不同网页之间导航的元素。链接通常用于将一个网页与另一个网页或资源(如文档、图像、音频文件等)相关联。链接允许用户在浏览网页时单击文本或图像来跳转到其他位置,从而实现网页之间的互联。HTML超链接是用于链接到其他网页、文件或位置的元素。

2024-04-24 14:53:02 16075 1

原创 HTML表单(详解网页表单如何实现)

HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。元素用于创建表单,action属性定义了表单数据提交的目标 URL,method属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。元素用于为表单元素添加标签,提高可访问性。

2024-04-24 14:37:39 4724

空空如也

空空如也

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

TA关注的人

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