- 博客(75)
- 收藏
- 关注
RSS订阅
原创 vue上传Excel文件并直接点击文件列表进行预览
本文主要内容：用elementui的Upload 组件上传Excel文件，上传后的列表采用xlsx插件实现点击预览表格内容效果。在项目中可能会有这样的需求，有很多种方法实现。但是不想要跳转外部地址，所以用了xlsx插件来解析表格，并展示表格内容。
2024-07-24 16:25:14
2827
原创 前端数据存储工具大比拼-Vuex、Pinia、Redux
Vuex、Pinia和Redux都是状态管理库，分别适用于Vue.js（特别是中小型项目）、Vue 3（提供简洁的状态管理）以及跨框架的大型应用（遵循单向数据流和纯函数原则）。Vuex API丰富但复杂，Pinia作为Vuex的升级版更简洁且与Vue 3紧密结合，而Redux则较为抽象但提供了强大的工具支持。
2025-04-03 15:04:34
525
原创 前端开发的px,rpx,rem等常见单位
精确控制：如果需要精确控制元素的尺寸，如边框、图标等，px是合适的选择。响应式设计：对于需要支持多种屏幕尺寸和设备的场景，rpx和rem都是很好的选择。rpx更适合小程序和跨平台应用开发，而rem则广泛应用于Web端的响应式设计中。兼容性：虽然现代浏览器广泛支持rem单位，但在某些旧版浏览器中可能需要使用px作为备选单位。单位定义特点应用px像素单位，表示屏幕上的一个像素点绝对单位，不会随视口变化而变化通常用于边框、阴影等具有固定尺寸的元素rpx。
2025-03-23 13:31:12
976
原创 前端存储Cookie，使用JavaScript 或js-cookie
在前端登录时，存储 Cookie 是一种常见的做法，用于在用户的浏览器中保存会话信息（如认证令牌、用户ID等）。以下是如何在前端存储 Cookie 的基本步骤和示例代码。使用JavaScript 或js-cookie......
2025-03-23 13:06:04
448
原创 HTML表格-掌握表格标签与属性
HTML表格由<table>标签定义，内部包含多个行（<tr>）、单元格（<td>或<th>）。<th>标签通常用于定义表头单元格，而<td>标签则用于定义标准单元格。HTML属性虽然提供了基本的样式控制，但高版本废弃了很多东西。开发时更推荐使用CSS来美化和布局表格。CSS提供了更丰富的样式选项，如边框样式、背景颜色、字体样式、内外边距等。
2025-01-22 19:30:00
741
原创 JavaScript正则表达式解析：模式、方法与实战案例
什么是正则表达式。模式，即正则表达式的语法和规则；方法，即如何在JavaScript中使用正则表达式进行匹配、搜索、替换等操作；一些实战案例，通过具体示例展示正则表达式的应用；介绍两个线上正则表达式测试和生成器工具。一、什么是正则表达式JavaScript正则表达式是一种用于匹配字符串中字符组合的模式。通过一种简洁的语法，可以执行复杂的字符串搜索、替换等操作。一、创建正则表达式使用双斜杠包裹一个匹配模式，/正则表达式主体/修饰符(可选)。二、......
2025-01-20 18:45:00
1109
原创 JavaScript的数据类型及检测方式
JavaScript 中的数据类型主要分为两大类：原始数据类型(也称基本数据类型)和引用数据类型。Undefined未定义：类型只有一个值，在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。Null空对象：只有一个值的数据类型，其特殊值就是null。typeof运算符是用于检测变量数据类型的常用方法。instanceof运算符用于检测一个对象是否是另一个构造函数的实例......
2025-01-03 19:00:00
1193
原创 JavaScript中Map与Object的区别
Map和Object是用于存储键值对数据的两种不同的数据结构（Map是ES6新增的数据结构）。构造方式不同：Map只能通过构造函数new Map()创建；Object可以通过字面量、等方式创建。键的类型不同：Map的键可以是任意类型，包括对象、数组、函数等；Object的键只能是字符串或者Symbol，其他类型的键会被转换为字符串......
2024-12-31 16:00:00
1131
2
原创 vue项目网页图标修改
在Vue项目中修改网页图标（favicon）是一个相对简单的过程。将你的图标文件放入public文件夹中，在替换掉index.html里面的原图标就可以了。
2024-12-26 15:11:16
908
原创 Visual Studio光标变为方块状换回方法
Visual Studio光标变为方块状，输入内容会被覆盖掉，挺影响效率。或者Visual Studio光标变为方块状，不影响输入内容。习惯了线光标，就是想换回来， Visual Studio Code 设置光标样式成功换回。
2024-12-26 14:21:04
7123
3
原创 JS面向对象及继承
创建对象的方法及对象继承的方式。像组合继承不共享引用类型属性，它结合原型链继承和构造函数继承的优点，通过在子构造函数中调用父构造函数来继承属性，同时将子构造函数的原型设置为父构造函数的实例......
2024-12-20 16:00:00
775
原创 了解垃圾回收机制与内存泄漏
前端的垃圾回收机制主要指的是浏览器中的JavaScript引擎所实现的内存管理机制。这种机制自动回收不再使用的内存空间，以避免内存泄漏和内存溢出等问题。以下是JavaScript垃圾回收机制的详细介绍。
2024-12-17 19:00:00
1185
原创 npm下载依赖相关命令
npm（Node Package Manager）是Node.js的包管理工具，它提供了大量的命令来管理项目依赖、配置npm环境、发布包等。
2024-12-17 19:00:00
2632
原创 echarts绘制自定义展示排名和数据等信息（数据排名进度条）
通过 ECharts 创建了一个包含多个 y 轴、渐变条形图、背景条形图和散点数据点完成这个效果。xAxis：隐藏 x 轴。yAxis：定义了多个 y 轴，分别用于：显示地区名称、显示排序（数字）等series：定义了多个图表的数据系列，包括条形图系列，用于显示每个地区的数据条。另一个条形图系列，用作进度条的背景......
2024-12-13 16:00:00
1646
原创 echarts自定义仪表盘样式及一些属性了解
本文主要对Echarts自定义仪表盘及其一些属性的详细介绍。这里自定义仪表盘主要通过对option对象中的series数组和相关属性进行设置来实现。series里面可用于配置仪表盘的数据系列，包括数据值、指针样式、背景颜色等。其中type属性应设置为'gauge'，以指明这是一个仪表盘图表。graphic是原生图形元素组件......
2024-12-11 16:00:00
2753
原创 vue项目启动完成时，直接跳转浏览器打开界面的方法
当启动前端项目时，一般不具备自动打开浏览器的功能。可以采用：修改package.json文件或配置vue.config.js文件简单方法实现......
2024-12-11 16:00:00
1108
原创 Echarts使用平面方法绘制三维立体柱状图表
Echarts使用平面方法绘制三维立体柱状图表。使用Echarts的自定义系列custom，使用了三个 polygon 类型的图形元素来绘制立方柱状图的三个面。通过调整坐标点的位置来确定形状。在设置不同的渐变色，就可以实现立体效果。
2024-12-05 16:58:20
3511
10
原创 Nprogress页面加载进度条的使用
Nprogress是一个简单而实用的页面加载进度条工具，它显示的进度是虚假的（即不真实反映页面或接口加载的实际进度），但因其实现简单、性能消耗低且用户体验良好而受开发者使用。以下是对Nprogress的详细介绍和使用方法......
2024-11-13 17:25:29
1479
1
原创 前端-懒加载
懒加载也加延迟加载、按需加载，指在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。懒加载也加延迟加载、按需加载，指在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。懒加载的特点：减少了无用资源的加载；提升用户体验；防止加载过多图片而影响其他资源文件的加载......
2024-11-08 14:57:18
1455
1
原创 ElementUI＜el-table＞＜/el-table＞表格中固定列横向滚动条无法拖动解决
当表格有固定列会出现横向滚动条无法拖动问题，尤其是固定列固定在左边且表格没数据的时候。这可能是因为固定区域盖住了横向滚动条，不是视觉上的覆盖，是去拖动时没有触发效果。
2024-10-31 11:11:23
1943
原创 前端接收后端传递的表格文件流，通过a标签下载excel文件
从后端获取表格等文件流并在前端触发下载的功能是个常用功能，方法很多，这里我们采用Blob 对象和标签来实现文件下载。
2024-10-14 17:30:31
838
原创 一文详细了解React.createClass和extends React.Component的区别
在React中，定义组件的两种方式分别是使用React.createClass方法和使用ES6的class语法通过extends React.Component。propTypes在两种组件定义方式中都是作为静态属性来定义的，但导入方式有所不同。在React.createClass中直接从React导入，而在extends Component中从prop-types包导入。getDefaultProps在React.createClass中是一个方法......
2024-10-14 12:24:37
557
原创 前端-CDN的理解及CDN一些使用平台
CDN内容分发网络，是一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN是前端开发和优化及其他领域中不可或缺的一部分，它通过在全球范围内缓存和分发内容，提升了网站和应用的访问速度和用户体验。
2024-09-14 14:38:02
2280
原创 Vue的生命周期了解
文章内容：在Vue框架中，组件的生命周期是一个核心概念。而Vue 2和Vue 3在生命周期方面既有相似之处，也存在一些关键差异。文章将对这两个版本的生命周期进行简要说明，探讨它们之间的差异，以及父子组件生命周期的执行顺序，并解析组件特有的和activated生命周期钩子。
2024-08-22 15:19:03
1312
原创 JS数组遍历的方法和总结
forEach和for...of循环主要用于遍历数组或可迭代对象的元素，执行一些简单的操作，如打印每个元素的值或对每个元素执行不返回新值的操作。它们适用于那些不需要基于遍历结果生成新数组或执行复杂计算的场景。而mapfilterreduce等方法则提供了更高级的数据处理能力。map方法用于将数组的每个元素通过指定的函数进行转换，并返回一个新数组。filter方法用于创建一个新数组，该数组包含通过所提供函数满足筛选的所有元素。reduce。
2024-08-21 11:33:40
1045
原创 什么是尾调用？什么是尾递归？
尾调用是指在一个函数的最后一步调用另一个函数。在这种情形下，该调用的位置被称为尾位置。尾递归指在一个函数在最后一步也就是尾位置调用自身，它是递归的一种特殊情形。尾调用优化是一种通过简化函数调用栈的结构而获得性能优化的技术，这种优化使得在尾位置进行的函数调用高效，从而提高了程序的执行效率并减少了内存占用并防止栈溢出错误。
2024-08-19 16:12:36
397
原创 Object.defineProperty在Vue2双向绑定中的核心原理及应用
本文主要讲解了Object.defineProperty方法的功能及在Vue中实现双向绑定的核心原理。Object.defineProperty在Vue 2.x的双向绑定中起核心作用，它通过数据劫持和依赖收集/派发更新的机制实现了数据模型与视图之间的自动同步。而在Vue 3.x中，采用了不同的实现方式（Proxy），但双向绑定的核心原理仍然相同。
2024-08-02 10:29:27
1145
原创 JavaScript异步编程的Async/Await
Async/Await是 JavaScript ES8引入的用于处理异步操作的语法糖，它建立在 Promises 的基础上的。使用async/await，可以以几乎同步的方式编写异步代码，极大地简化了复杂异步逻辑的处理。async关键字用于声明一个异步函数，这样的函数会隐式地返回一个 Promise。await关键字只能在async函数内部使用。
2024-07-31 14:53:28
2390
原创 JavaScript异步编程的Promise
Promise是JavaScript中用于处理异步操作的一种机制。它是一个代表了异步操作最终完成或失败的对象。Promise提供了更好的错误处理机制，并支持链式调用，避免了传统异步编程中的回调地狱问题。Promise对象有三种状态：pending（进行中）、fulfilled（已成功resolved）和rejected（已失败），状态一旦改变就不会再变。Promise是JavaScript中处理异步操作的一种强大机制，它通过提供清晰的状态管理和链式调用，极大地简化了异步编程的复杂度。
2024-07-31 13:44:49
1359
原创 settimeout,promise,async的区别
setTimeout在指定多少秒后执行一个函数，主要用于延迟执行代码，不直接处理异步操作的结果。Promise提供了处理异步操作成功或失败的方法，并通过链式调用支持复杂的异步流程控制。async/await建立在Promise之上，提供了更加简洁和直观的异步编程语法。
2024-07-30 14:05:53
593
原创 前端异步编程常见的实现方式
异步指进程不需要一直等下去，而继续执行下面的操作。前端异步编程常见的实现方式包括回调函数、Promises、Async/Await，以及使用特定的库或框架（如Fetch API、Axios等）。下面将针对每种方式给出例子。
2024-07-30 10:51:46
1388
原创 实现call()、apply()、bind()函数及各自使用场景
本文主要讲解实现call()、apply()、bind()函数及使用场景举例。在JavaScript中，call(),apply(), 和bind()是函数对象的方法，它们允许你以不同的方式调用函数，并可以设置函数体内this的值。
2024-07-29 16:08:41
1136
原创 this关键字的简明指南与理解
this关键字是执行上下文中的一个属性，它主要用在函数内部，指向最后一次调用该函数的对象。在全局上下文中，就是不在任何函数内部，this指向全局对象。在浏览器环境中，全局对象是window；在 Node.js 环境中，全局对象是global......
2024-07-29 11:41:44
571
原创 简单理解闭包|作用域和作用域链|执行上下文
闭包指有权访问另一个函数作用域中变量的函数。作用域定义了变量和函数在代码中的可访问性。作用域链是JavaScript在查找变量时的一个过程或机制。执行上下文是指函数调用时在执行栈中产生的当前函数（或全局对象，如浏览器中的window）的执行环境。这个环境像是一个隔绝外部的容器，保管着可访问的变量、this对象等。
2024-07-26 17:20:18
793
原创 原型与原型链
原型是JavaScript中对象的一个内置属性Prototype，它包含了所有通过该函数创建的实例共享的属性和方法。原型链是通过对象之间的原型关系实现继承的一种机制，它是由多个原型对象通过__proto__属性（在ES6中推荐使用Object.getPrototypeOf()方法）连接而成的一种链式结构。
2024-07-26 14:11:40
803
原创 日期时间格式化与设置默认日期为当前的前X天（setDate、getDate等方法）
要计算当前时间前的X天，通过修改Date对象的日期部分来实现。JavaScript中的Date对象提供了getDate()方法来获取当前日期（日），以及setDate()方法来设置新的日期（日）。
2024-07-25 14:19:23
500
原创 数组和对象的解构
解构是ES6提供的一种新提取数据的模式，它允许我们从数组或对象中有针对性拿到想要的数据。这种方式让数据访问和赋值变得更加简洁和直观。本文主要讲解数组和对象解构。
2024-07-12 11:06:13
400
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人