加勒比海涛-CSDN博客

原创现代 Web 开发工具箱：Element-UI 表单组件全攻略（二）

我们将官网的代码复制过来然后我们可以看到 , el-form-item 标签双向数据绑定了 ruleForm 对象的 pass 属性 , 那我们也就需要创建出 ruleForm 对象 , 然后将 pass 属性初始化为空然后我们就可以对 pass 进行自定义的验证规则 , 我们按照官网的方式来实现那这个validatePass 实际上是一个函数 , 我们需要在这个函数中设置具体的校验规则validatePass 函数也是写在 data 中的整体代码如下 :这个位置粘贴容易混乱 , 务必小心。

2024-09-14 18:04:57 822

原创现代 Web 开发工具箱：Element-UI 表单组件全攻略（一）

在这篇文章中，我们将深入探讨构成现代 Web 表单的各个组件，这些组件是前端开发中不可或缺的部分。我们会详细讲解如何使用 Element-UI 库中的 Radio 单选框、Checkbox 多选框、Input 输入框以及 Select 下拉列表选择器等组件，来创建交互性强、用户体验良好的表单。通过实际代码示例和逐步分析，将指导您如何有效地利用这些组件来构建表单，并介绍它们的属性、事件和方法。

2024-09-14 14:00:58 447

原创现代 Web 开发全攻略：Node.js、npm、Webpack、Vue.js 和 Element-UI 的实战指南

官网 :中文学习网 :Node.js 是一个开源和跨平台的 JavaScript 运行时环境 . Node.js 在浏览器之外运行 V8 JavaScript 引擎 (Chrome 的内核) , 这使得 Node.js 的性能非常强 .我们就可以将 Node.js 理解成浏览器即可前端的底层 HTML、CSS、JavaScript , 这些都不需要编译 , 由 Node.js 内部的浏览器解释运行 (解释型语言)其实我们可以类比来理解 , 将 Node.js 理解成 Java 的 JDK。

2024-09-14 08:23:33 289

原创 Element UI布局组件：容器组件的高效应用

在本篇文章中，我们将深入探讨如何使用 ElementUI 提供的布局容器组件来构建一个结构化的网页界面。从基础的容器创建到高级的嵌套布局，本文将一步步演示如何利用 Element UI 的布局容器组件来设计出既美观又实用的网页布局。我们将学习如何通过简单的标签和属性来控制页面的顶部、侧边、主要内容和底部区域，以及如何通过调整属性来满足不同的设计需求。

2024-09-13 17:35:57 1006

原创 ElementUI 布局——行与列的灵活运用

<h1>设置成行内标签</h1>-- 通过 tag 属性设置成 span 来实现将块级标签转为行内标签 -->-- span 属性用来设置对应列数, 需要使用属性注入的方式 -->'>占用 6 份</div></el-col>'>占用 6 份</div></el-col>'>占用 6 份

2024-09-13 11:40:00 1574

原创链接升级：Element UI ＜el-link＞的应用

在本篇文章中，我们将深入探索Element UI中的<el-link>组件——一种样式化的文字链接组件，它不仅继承了传统<a>标签的所有功能，还引入了额外的样式和属性，使得创建具有吸引力的链接变得轻而易举。从基础的链接创建到高级的属性配置，我们将一步步分析如何利用<el-link>组件来丰富您的网页界面。我们将学习如何通过简单的标签和属性来控制链接的颜色、是否显示下划线、禁用状态，甚至如何添加图标来提升视觉效果。

2024-09-13 07:41:33 1395

原创 Element UI按钮组件：构建响应式用户界面的秘诀

在现代网页设计中，按钮不仅是用户交互的核心元素，也是提升用户体验的关键。Element UI 提供了一套丰富而强大的按钮组件，使得开发者能够轻松打造出既美观又功能丰富的用户界面。本文将带你学习Element UI按钮组件的基础用法以及相关特性。

2024-09-12 22:42:37 831

原创 ElementUI 快速入门：使用 Vue 脚手架搭建项目

ElementUI 是 Vue.js 的强大 UI 框架，让前端界面开发变得简单高效。本教程将带你从安装到实战，快速掌握 ElementUI 的核心技巧。核心内容：项目搭建：快速设置 Vue 项目并集成 ElementUI。组件使用：学习如何在你的 Vue 应用中使用 ElementUI 组件。页面与路由：创建组件，配置路由，实现页面导航。样式与图标：定制按钮样式，使用图标库增强界面。

2024-09-12 07:50:54 1258

原创 Element UI：初步探索 Vue.js 的高效 UI 框架

Element UI：初步探索 Vue.js 的高效 UI 框架一 . ElementUI 基本使用1.1 Element 介绍1.2 Element 快速入门1.3 基础布局1.4 容器布局1.5 表单组件1.6 表格组件1.6.1 基础表格1.6.2 带斑马纹表格1.6.3 带边框表格1.6.4 带状态的表格1.7 导航栏组件讲解二 . 学生列表界面案例2.1 顶部栏2.2 侧边栏2.3 主区域Element UI 是由饿了么前端团队精心打造，是一个可以在 Vue 2.0 运行的桌面端组件库。它以"

2024-09-11 22:40:29 1129

原创构建响应式 Web 应用：Vue.js 基础指南

构建响应式 Web 应用：Vue.js 基础指南一 . Vue 的介绍1.1 介绍1.2 好处1.3 特点二 . Vue 的快速入门2.1 案例 1 : 快速搭建 Vue 的运行环境 , 在 div 视图中获取 Vue 中的数据2.2 案例 2 : 点击按钮执行 vue 中的函数输出 vue 中 data 的数据2.3 小结三 . Vue 常用指令3.1 介绍3.2 文本插值 v-html3.3 绑定属性 v-bind3.3.1 绑定属性的值3.3.2 绑定属性3.4 条件渲染 v-if3.5 条件渲染 v

2024-09-11 20:40:52 1115

原创掌握 JavaScript ES6+：现代编程技巧与模块化实践

这篇文章我们将深入探讨 JavaScript 的最新特性，包括 ES6 及其后续版本中引入的一系列现代 JavaScript 编程技巧。文章将从变量声明的新方式开始，介绍 let 和 const 关键字的使用，以及它们如何帮助我们更好地管理变量作用域和常量。接着，我们将学习模板字符串的便利性，它使得字符串拼接变得更加直观和简洁。文章还将涵盖函数的参数默认值，这是提高函数灵活性和代码可读性的有力工具。紧接着，我们将探索箭头函数的简洁语法。

2024-09-11 08:20:19 833

原创 Ajax 揭秘：异步 Web 交互的艺术

正常我们进行登录的时候 , 就会遇到两种情况同步 : 登录失败网页会立即刷新 , 之前输入过的内容就消失不见了异步 : 当用户输入错误的账号密码 , 页面不会刷新 , 只是在某个局部位置提示用户那 Ajax 全称Asynchronous JavaScript and XML , 指的是异步的 JavaScript 和 XML .例如我们向后台发送请求 , 同步的方式是后台必须返回响应数据才可以在浏览器上进行下一步操作 . 而异步则不需要等待后台服务器返回响应数据 , 各个模块执行各个模块的工作 .

2024-09-10 22:24:48 1390 1

原创 JavaScript 编程精粹：JavaScript 事件处理

JavaScript 编程精粹：JavaScript 事件处理一 . BOM1.1 Window1.1.1 alert()1.1.2 confirm()1.1.3 setInterval()1.1.4 setTimeout()1.1.5 小案例 - 通过定时器来控制灯的亮暗1.2 History1.3 Location二 . DOM2.1 获取 Element 对象2.2 常见 Element 对象的使用三 . 事件监听3.1 事件绑定3.2 常见事件3.3 需求 : 移出输入框自动校验格式3.3.1 验证

2024-09-10 20:37:24 830

原创 JavaScript编程精粹：语法、函数与对象

JavaScript编程精粹：语法、函数与对象一 . JavaScript 介绍1.1 应用场景1.2 JavaScript 介绍1.3 JavaScript 组成部分二 . JavaScript 引入方式2.1 内部脚本2.2 外部脚本三 . JavaScript 基础语法3.1 输出语句3.2 变量3.3 数据类型3.3.1 number 类型3.3.2 string 类型3.3.3 undefined 类型3.3.4 引用类型3.4 运算符3.4.1 关系运算符3.4.2 逻辑运算符3.4.3 类型转

2024-09-10 12:27:35 873

原创 CSS入门：美化网页的艺术

虽然网站的网页都是由 HTML 编写的 , 但是所有的网页还都需要使用 CSS 进行美化 .CSS 是一门语言 , 用于控制网页的表现 , 也叫做层叠样式表 .把所有的样式都可以加到一个标签上 , 层叠起来 , 所以叫做层叠样式表 .

2024-09-10 07:07:39 961

原创 HTML 揭秘：HTML 编码快速入门

HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.

2024-09-09 22:16:15 1740

原创 Spring AMQP实践指南：消息发送、接收与转换器配置

AMQP (Advanced Message Queuing Protocol) , 指的是高级消息队列协议 .那这里指的协议 , 其实就是一种规范 , 是描述应用程序之间传递业务消息的一种规范 , 那这个协议与语言和平台无关 .在消息队列中 , 实际上就是发送和接收消息的一种协议 .

2024-09-09 21:10:51 1279

原创 RabbitMQ 入门指南：安装、基础结构、消息模型与入门案例

本篇文章，我们将一步步指导如何在 CentOS 系统上安装 RabbitMQ ，这是基于 Erlang 语言开发的强大开源消息中间件。我们会从下载和安装开始，然后深入到 RabbitMQ 的核心概念，包括通道、交换机、队列和虚拟主机。此外，我们还会通过简单的入门案例，展示如何在 RabbitMQ 中发送和接收消息。涉及到代码的部分 , 我们已经提供给大家 demo 版本 , 下载之后按照教程模拟即可 .

2024-09-09 07:29:54 1216

原创系统架构的演进：同步通讯到异步通讯的过渡

在现代软件开发中，通讯方式的选择对于系统的性能和可扩展性至关重要。我们将对比同步通讯与异步通讯的不同之处，以及它们在实际应用中的优缺点。通过一个电商系统的例子，我们将揭示同步调用可能导致的耦合度高、性能下降、资源浪费和级联失败等问题。同时，我们将探索异步调用如何通过事件驱动和消息队列（Broker）来解决这些问题，实现服务解耦、性能提升和流量削峰。此外，我们还对市面上流行的四种消息队列技术—— RabbitMQ、ActiveMQ、RocketMQ 和 Kafka 进行全面的比较。

2024-09-08 21:21:50 824

原创字符串操作的高效工具—正则表达式

由一些特定的字符组成的字符串校验规则就叫做正则表达式 , 正则表达式通常用来校验、检查字符串是否符合规则的 .正则表达式只能针对字符串进行格式校验 , 常用于对用户输入的字符串数据进行校验 , 比如 : 在一些数据录入的场景中 , 要求年龄必须是 2 位的数字、用户名必须是 8 位长度而且只能包含大小写字母、手机号码的合法性、QQ 号码的合法性等等 .预定义字符用来简化字符类的书写预定义字符作用“.”匹配任何字符“\d”任何数字 , [0-9] 的简写“\D”

2024-09-08 19:00:28 833

原创 Stream API：Java 8 中的数据流式处理指南

Hello , 大家好 , 本篇文章给大家讲解的是 Java 8 中的 Stream 流 .在 Java 8 中 , 引入了 Streams API，它允许以声明式方式处理数据集合。Stream API 提供了一种高级迭代器，可以用来执行序列化操作，如筛选、转换、聚合等。它支持并行操作，可以利用多核处理器来加速数据处理。在日常开发过程中 , 使用 stream 流能够显著提升开发效率 , 极大提升生产力 , 非常推荐使用 .

2024-09-08 08:39:07 893

原创 Redis 分布式锁：线程安全在分布式环境中的解决方案

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家讲解的是 Redis 的分布式锁. 我们会深入探讨分布式锁的概念和实现策略，这是分布式系统中确保多个进程间操作顺序和线程安全的重要机制。由于传统的锁机制仅在单个进程内部有效，分布式锁应运而生，以解决跨进程和跨主机的同步问题。本专栏旨在为初学者提供一个全面的 Redis 学习路径，从基础概念到实际应用，帮助读者快速掌握 Redis 的使用和管理技巧。

2024-09-07 20:24:27 706

原创 Redis 缓存深度解析：穿透、击穿、雪崩与预热的全面解读

存储数据 (内存型数据库)缓存 (最常用的场景)消息队列 (使用比较少)缓存的作用就是让我们能够更快地获取到数据 , 一般来说速度快的设备可以给速度慢的设备去做缓存 .对于硬件的访问速度来说 , 通常情况下是这样的 : CPU 寄存器 > 内存 > 硬盘 > 网络比较常见的是使用内存来去作为硬盘的缓存 (Redis) , 甚至我们也可以使用硬盘来去作为网络的缓存。

2024-09-07 12:36:55 1120

原创 Redis Sentinel 深度解析：构建高可用性 Redis 集群

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家讲解的是 Redis 的集群. Redis 集群是一种提供自动分区的 Redis 数据库实现，它将数据自动分配到多个节点上。每个节点负责整个键值空间的一部分，从而允许数据库的扩展超越单个机器的内存限制。Redis 集群通过使用分片（sharding）技术来实现数据的分布式存储，同时提供一定程度的高可用性和容错能力。

2024-09-07 08:28:33 1101

原创 Redis 集群：如何实现数据的高效分片与负载均衡

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家讲解的是 Redis 的 Sentinel . Sentinel 是 Redis 的高可用性解决方案，它通过监控 Redis 主从集群的状态、执行故障转移以及更新配置来提供高可用性。Sentinel 系统由多个 Sentinel 节点组成，这些节点是独立运行的进程，它们负责监控 Redis 主从集群的状态，并在主节点出现故障时自动进行故障转移，将一个从节点提升为新的主节点。

2024-09-06 18:35:30 956

原创番外 1 : 安装 docker 和 docker-compose

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家讲解的是 Docker 以及 docker-compose 的安装 , 这两样工具我们会在集群部门使用到 , 所以请大家根据教程安装好 .本专栏旨在为初学者提供一个全面的 Redis 学习路径，从基础概念到实际应用，帮助读者快速掌握 Redis 的使用和管理技巧。

2024-09-06 12:29:33 443

原创掌握 Redis 数据冗余：主从服务器的角色与职责

在分布式系统中 , 涉及到一个非常关键的问题 : 单点问题 , 如果某个服务器只有一个节点 (也就是说只搞一个物理服务器来部署服务器程序) , 那这样的话就可能会遇到一些困难可用性问题 : 如果这个机器挂了 (比如 : 服务器内存过载、服务器硬盘已满 …) , 那就意味着这个服务就中断了 , 无法给其他服务提供支持。

2024-09-06 07:59:08 826

原创 Redis 事务揭秘：如何确保数据一致性

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家讲解的是 Redis 中的事务 . Redis 的事务是一个用于将多个命令打包在一起执行的特性 , 它可以保证这些命令要么全部执行 , 要么全部不执行 , 从而确保数据的一致性 . 我们可以看一下 Redis 中的事务是如何实现的本专栏旨在为初学者提供一个全面的 Redis 学习路径，从基础概念到实际应用，帮助读者快速掌握 Redis 的使用和管理技巧。

2024-09-05 21:59:30 973 1

原创 Redis 持久化深度解析：深入理解 RDB 与 AOF 持久化机制

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家讲解的是 Redis 的持久化 . 在 Redis 中 , 分为 RDB 和 AOF 两种持久化方式 , 那我们就研究一下 RDB 和 AOF 之间具体的差别与关联 .本专栏旨在为初学者提供一个全面的 Redis 学习路径，从基础概念到实际应用，帮助读者快速掌握 Redis 的使用和管理技巧。通过本专栏的学习，能够构建坚实的 Redis 知识基础，并能够在实际学习以及工作中灵活运用 Redis 解决问题 .

2024-09-05 12:43:36 1198

原创 Spring 框架下 Redis 数据结构的全面解析

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家带来的是如何通过 Spring 来操作 Redis 中的常见数据结构 , 以及如何通过代码执行 Redis 中的原生命令 .本专栏旨在为初学者提供一个全面的 Redis 学习路径，从基础概念到实际应用，帮助读者快速掌握 Redis 的使用和管理技巧。

2024-09-05 07:18:58 977

原创 Jedis 操作 Redis 数据结构全攻略

Jedis 操作 Redis 数据结构全攻略一 . 认识 RESP二 . 前置操作2.1 创建项目2.2 关于开放 Redis 端口的问题2.2.1 端口转发?2.2.2 端口配置2.3 连接到 Redis 服务器三 . 通用命令3.1 set 和 get3.2 exists 和 del3.3 keys3.4 expire、ttl、type三 . string 相关命令3.1 mset / mget3.2 getrange / setrange3.3 append3.4 incr / decr3.5 mse

2024-09-04 22:40:22 464

原创 Redis 数据类型全攻略：解锁 Streams、Geospatial、HyperLogLog、Bitmaps 和 Bitfields

Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!本篇文章给大家讲解的是 Redis 中其他常见的数据类型的介绍 , 我们还给大家介绍一种 Redis 中的渐进式命令 , 让操作 Redis 更加安全 , 避免将 Redis 服务器阻塞住 .本专栏旨在为初学者提供一个全面的 Redis 学习路径，从基础概念到实际应用，帮助读者快速掌握 Redis 的使用和管理技巧。通过本专栏的学习，能够构建坚实的 Redis 知识基础，并能够在实际学习以及工作中灵活运用 Redis 解决问题 .

2024-09-04 20:43:57 701

原创 Redis Zset 类型：Score 属性在数据排序中的作用

我们之前学习过 set 类型 . 他有两个显著的特点而 list 是要求有序的 , [1 , 2 , 3] 和 [3 , 2 , 1] 不是同一个列表那大家要注意一点 : 我们的有序集合 (Zset) 中的有序和列表 (list) 中的有序不是一个有序 .那 Zset 既然是有序的 , 那它所排序的规则是什么 ?为了方便描述排序规则 , 我们给 Zset 的 member 中同时引入了一个属性 : score (分数) , 他是浮点类型的 . 每个 member 都会分配一个分数 . 进行排序就按照此处

2024-09-04 07:52:29 879

原创 Redis List 应用指南：命令、编码与阻塞操作全解析

本篇文章给大家讲解的是 Redis 中 list 类型的相关内容 , 我们会从常见命令、底层编码方式、应用场景三方面给大家介绍 . list 类型比较特殊的是 , list 提供了阻塞式的命令 , 这是我们第一次遇见 , 大家请耐心研究 .那我们解决的策略就是对用户的文章进行切分 , 假如一个用户发了 1w 个微博 , 那 list 的长度就是 1w , 那就可以把这 1w 个微博拆成 10 份 , 每份就是 1k , 这样虽然业务层代码实现可能复杂一点 , 但是就能够解决一定的效率问题。

2024-09-03 20:35:54 942

原创探索 Redis Set：命令、编码与应用实践

那使用 Set 来去存储标签 , 依靠的是 Set 的唯一性和无序性 , 更重要的因素是 Set 非常方便计算交集 , 很方便的就可以找到两个用户的公共标签 . 那基于一些公共标签就可以衍生出一些用户群体 , 方便进行用户之间的交互 .Hello , 大家好 , 这个专栏给大家带来的是 Redis 系列!时间复杂度 : O(N * M) , N 指的是最小的集合元素个数 , M 指的是最大的集合元素个数。举个例子 : A = [1 , 2 , 3 , 4] , B = [3 , 4 , 5 , 6]

2024-09-03 12:44:36 728

空空如也

空空如也