- 博客(259)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 使用 ECharts 与 Vue 构建数据可视化组件
props: {source: {},tooltip: {},xName: {},yName: {},},type: {},},props是 Vue 组件用于接收父组件传递数据的属性。source: 必填，表示图表的数据源，可以是数组或对象。tooltip: 用于显示自定义的提示信息，默认为空数组。xName和yName: 分别为 X 轴和 Y 轴的名称。: 布尔值，控制图例是否为单选。type: 图表的类型，如线图、柱状图等。
2024-12-26 19:47:11
1050
原创 Nginx配置：如何在一个域名下运行两个网站
通过Nginx，我们可以非常轻松地将多个Web应用部署在同一个域名下，无论是通过不同的路径，还是通过子域名。本文的示例展示了如何配置两个网站共用一个域名，并详细解释了每个配置项的作用。在实际的生产环境中，需要考虑更多的细节，比如SSL加密、缓存优化、负载均衡等，这些都是Nginx能够提供的强大功能。
2024-12-25 08:54:30
1830
原创 Map、weakMap，Set、weakSet的使用与区别（超详细）
在JavaScript中，SetMapWeakSet和WeakMap是非常有用的数据结构。每种结构都有独特的应用场景，并提供了一组API来操作和遍历其中的数据。本文将详细介绍这些数据结构的应用场景、API及其遍历方法。
2024-12-23 17:49:37
775
原创 对象、函数、原型之间的关系
在 JavaScript 中，一切皆对象。对象是包含属性和方法的容器。属性可以是基本数据类型，如字符串、数字等；方法则是一个可以执行的函数。name: "浮游",age: 20,// 浮游// Hello, I am 浮游上面的person是一个对象，它包含了两个属性name和age，以及一个方法greet。JavaScript 中的函数实际上也是对象。与其他对象不同的是，函数对象可以被调用。prototype和__proto__。// true可以看出，函数本质上是对象，具有对象的一些特性。
2024-12-20 15:42:14
1207
1
原创 Egg.js 项目中实现邮件发送功能
通过本文的介绍，你应该已经掌握了在Egg.js项目中集成邮件发送功能的基本方法。这一功能可以极大地增强你的Web应用的用户交互体验，特别是在涉及通知、提醒、验证等功能时。
2024-12-18 14:21:08
2594
原创 前端组件化
浏览器提供了一个 customElements.define() 方法，允许我们定义一个自定义元素和它的行为，然后在页面中使用。// 必须首先调用 super方法super()// 元素的功能代码写在这里')上面的代码使用 customElements.define() 方法注册了一个新的元素，并向其传递了元素的名称 custom-button、指定元素功能的类 CustomButton。
2024-10-31 09:36:21
696
原创 初识Docker
Docker是一个开源的平台，用于开发、交付和运行应用程序。它通过容器化技术将应用程序及其依赖项打包在一起，从而解决了“在我的电脑上没问题”的环境一致性问题。容器是轻量级的、独立的、可执行的包，其中包含运行应用程序所需的所有内容，包括代码、运行时、库和系统工具。Docker为前端开发者提供了强大的工具，可以极大地提高开发效率和环境一致性。
2024-10-30 15:57:57
794
原创 实现微信H5分享功能
在这篇文章中，我们将详细探讨如何在Vue2项目中实现和调试微信H5分享功能。这包括后端的签名生成、前端的JS-SDK配置以及调试步骤。
2024-10-29 15:13:22
1891
原创 HTML5和CSS3的新特性
在这篇博文中，我们将全面深入地探索 HTML5 和 CSS3 的新增特性。这些特性不仅为前端开发带来了新的可能性，也极大地提升了用户体验和网页性能。
2024-10-28 15:09:19
1239
原创 深入探索JavaScript异步编程：Promise与async/await的实现原理与应用
在深入async/await之前，我们需要先回顾一下Promise。Promise是一个代表了异步操作最终完成或失败的对象。它解决了回调地狱（Callback Hell）的问题，使得异步操作可以像同步操作那样链式调用。// 异步操作// 成功处理// 错误处理});尽管Promise大大改善了异步代码的结构，但在处理复杂的业务逻辑时，仍然可能出现多层嵌套的.then()调用，这使得代码的可读性和可维护性受到了挑战。Generator函数是ES6引入的一种异步编程解决方案，它可以通过yield。
2024-10-18 14:26:22
799
原创 JavaScript模块化深入解析：掌握Import、Export与Require的艺术
理解和掌握JavaScript中不同的模块导入导出方法对于开发现代JavaScript应用程序是非常重要的。无论是前端还是Node.js开发，合理使用模块化技术可以大大提高代码的可维护性和可扩展性。在选择使用importrequire()或其他导入导出方式时，开发者应根据应用的需求和执行环境来做出最佳选择。
2024-09-24 10:47:08
661
2
原创 关于考试监听切屏的三种方式
在数字化考试中，防作弊是一项重要任务，而防切屏技术是确保考试公正性的关键措施之一。pageshow和pagehide事件、窗口焦点变化监听（和），以及全屏模式，并分析各自的利弊，并结合具体的代码实现，来展示如何在Web应用中融入这些技术。
2024-09-24 10:07:35
1776
原创 在模板字符串中不能使用element-ui组件
在Vue.js中，直接在模板字符串中使用Element-UI组件是不可行的。这是由于模板字符串在Vue编译过程中不会被解析和处理，而Vue组件和指令需要通过Vue的编译器来解析才能生效。下面将详细解释这一限制，并提供一些替代方案，以便在动态HTML内容中使用Vue组件。
2024-09-23 11:09:23
901
原创 JSON.parse(JSON.stringify())实现深拷贝的原理
在现代编程实践中，深拷贝是一种常见的需求，尤其是在处理复杂的数据结构时。深拷贝指的是创建一个新对象，并递归复制原对象的所有属性和嵌套对象，使得新旧对象之间不共享任何子对象。是实现深拷贝的一种简便方法，但这种方法并非没有缺陷。接下来，我们将详细探讨这种方法的工作原理、局限性以及如何实现一个更为完善的深拷贝函数。
2024-09-23 11:08:00
653
原创 深入了解package.json文件
通过对文件的详细解析，可以看到它在项目管理中发挥着重要的作用。正确配置和使用文件，可以大大提高项目的构建、发布和维护的效率。希望这篇文章能帮助我们更好地理解和使用文件，使项目开发更加顺利。
2024-09-20 10:41:31
1274
原创 在TypeScript中为什么应该使用Type而不是Interface
使用Type可以定义联合类型，而Interface则无法做到这一点。// 使用Type定义联合类型// 使用Interface无法直接定义联合类型// 需要使用Type来实现相同的效果。
2024-08-29 09:41:45
297
原创 this 关键字的绑定类型
绑定的原理和优先级，可以帮助开发者更精确地控制函数执行时的上下文环境，提高代码的可读性和可维护性。在JavaScript中，当一个函数可以通过多种方式被调用时，的指向取决于函数的调用方式，而不是定义方式。关键字的指向对于编写高质量的代码至关重要。在JavaScript中，理解。绑定情形及其工作原理的解析。
2024-08-28 14:47:11
352
原创 在Vue2中使用WebSocket
WebSocket是一种通信协议，能够在客户端和服务器之间建立全双工通信通道。与传统的HTTP请求不同，WebSocket允许服务器主动向客户端发送数据，从而实现实时通信。本文将详细介绍如何在Vue2项目中集成和使用WebSocket，并通过具体代码示例演示其使用方法。
2024-08-27 09:46:40
2789
1
原创 vue中实现图片裁剪
通过以上代码，我们实现了一个基于Vue.js和Cropper.js的图片裁剪组件，用户可以上传图片并进行裁剪操作，最终获取裁剪后的图片数据。这个组件可以方便地集成到Vue.js应用中，为用户提供了良好的图片处理体验。
2024-08-26 10:32:49
848
原创 前端代码小技巧
在日常工作中，我们经常会遇到需要处理一些细节功能的情况，这些功能虽小，但掌握一些巧妙的处理方法可以极大地提高工作效率。以下是几个实用的小技巧，它们可以帮助我们更好地完成任务。
2024-08-22 16:00:04
197
原创 CSS :has() 选择器的使用
has() 选择器的引入，为CSS提供了更多的灵活性和强大的选择能力。通过上述实际应用案例，我们可以看到，:has() 选择器在处理复杂布局和动态内容时，能够提供更加精准和灵活的样式控制方案。随着浏览器支持度的提高，:has() 选择器的应用场景将会越来越广泛，为前端开发带来更多的可能性。
2024-07-31 10:08:28
639
原创 页面根据sse返回的流，逐句展示内容，达到gpt效果
之前的文章里，我写到了关于怎么获取sse中的流，但是缺少逐句展示的效果，这次来补齐。比如这种，实现难点在于，当返回的markdown语法，不是完整的语句时，展示的代码块会错乱。
2024-07-30 09:40:29
753
原创 解决新Windows系统下Git克隆连接超时问题
最近，我在Windows系统的电脑上，尝试使用Git克隆项目时，不断遇到连接超时的错误。无论如何尝试调整环境变量或配置代理，都未能解决问题。因此，开始了一系列的问题排查。
2024-07-29 09:59:29
975
原创 详细解析用户提交咨询
上一篇文章中写到了使用Server-Sent Events (SSE)，并获取message里面的内容。本篇文章主要是写，具体该如何实现的具体代码，代码见下方，可直接拿fetchEventSource是一个用于处理服务器发送事件（Server-Sent Events, SSE）的函数，它能够处理来自服务器的流式响应。这个方法中的逻辑主要是发送用户的问题到服务器，并处理返回的答案，将其显示在界面上。
2024-07-26 14:07:05
684
原创 Vue.js中自定义Markdown插件实现References解析
是一个快速、灵活的Markdown解析器，它支持CommonMark标准，并且可以通过插件来扩展其功能。在Vue.js项目中，我们可以使用来将Markdown文本转换为HTML。在某些情况下，我们可能需要在Markdown文本中包含自定义的HTML标签，例如标签，用于显示参考文献或其他额外信息。为了能够在中解析这些自定义标签，我们需要编写一个自定义插件。首先，我们需要定义插件应该执行的功能。在我们的例子中，插件需要识别标签，并将其转换为相应的HTML结构。我们使用正则表达式来匹配Markdown文本中的。
2024-07-25 09:51:39
514
原创 使用Server-Sent Events (SSE)，并获取message里面的内容
Server-Sent Events (SSE)是一种服务器推送技术，允许服务器向客户端（浏览器）发送实时消息。与WebSocket不同，SSE是单向通信，只能从服务器到客户端。SSE在HTML5中作为标准实现，并且被大多数现代浏览器支持。
2024-06-20 15:55:08
969
原创 root@hk-it:/etc/nginx# nginx -s reload nginx: [error] invalid PID number ““ in “/var/run/nginx.pid“
具体来说，Nginx 试图读取它的 PID 文件（通常是为了找到正在运行的 Nginx 主进程的进程 ID），但发现该文件中没有有效的 PID（进程 ID）数字。如果确定 3000 端口是需要给 Nginx 使用的，可能需要停止那个占用 3000 端口的进程，或者更改那个进程的配置，让它使用其他的端口。如果不想或不能停止占用端口的进程，需要更改 Nginx 的配置，使其监听不同的端口。这种情况下，如果尝试重新启动或重载 Nginx，可能会出现端口冲突，因为旧的 Nginx 进程尚未释放 3000 端口。
2024-06-19 14:12:19
1178
原创 javascript高级用法
JavaScript 中的异步编程是处理长时间运行的任务（如网络请求、文件操作等）的一种方式，它允许代码在等待异步操作完成的同时继续执行，从而提高了程序的性能和响应能力。下面是 JavaScript 异步编程的几个关键概念和特性：回调函数:Promises:async/await:事件循环和微任务:Promise.all 和 Promise.race:通过掌握这些异步编程的技术和概念，你可以有效地处理 JavaScript 中的异步操作，编写出更加高效和易于维护的代码。JavaScript 模块化是一种将大
2024-06-14 09:29:37
346
原创 nuxt2中head的配置及作用
通过精心设计的元数据，你的应用不仅能在搜索引擎中获得更好的排名，还能给用户留下深刻的第一印象。通过精心配置这些元数据，你可以提高网站的搜索引擎排名，吸引更多访客。这意味着你可以根据页面的数据来动态生成元数据，极大地增强了SEO和用户体验。例如，如果你的页面展示了一篇文章，可以将文章标题和摘要动态设置为页面标题和描述。在构建现代Web应用时，开发者经常寻求那些不仅能提升用户体验，同时也能优化搜索引擎排名的技术。配置项，提供了一种高效的解决方案。的配置及其作用，帮助你解锁SEO和用户体验的双重优势。
2024-06-13 09:29:19
387
原创 pm2介绍及常用命令
PM2是一款广受欢迎的Node.js应用程序的进程管理器，它帮助开发者在生产环境中高效管理和维护应用程序。作为一个功能丰富的进程管理工具，PM2不仅能确保你的应用全天候运行，而且还提供了负载均衡、日志管理、应用监控等高级功能。接下来，我们将详细介绍PM2的核心功能及其常用命令，助你更好地在项目中利用PM2提升应用的稳定性和可用性。
2024-06-12 09:38:45
591
原创 nginx的配置以及常见命令
Nginx是一个功能强大且灵活的服务器，适用于各种不同的应用场景。通过了解其配置文件的结构和常用命令，您可以更好地掌握如何管理和优化您的Nginx服务器。随着经验的积累，您将能够更深入地了解Nginx的高级配置和优化技巧，从而充分利用其性能优势。希望本文能为您提供一个关于Nginx配置与管理的良好起点。如果您有任何疑问或想要深入了解，请参考Nginx的官方文档，或加入相关技术社区进行交流。
2024-05-21 14:52:17
483
原创 docker的使用以及常用命令
Docker 是一个开源的应用容器引擎，它允许开发者将应用程序及其依赖打包成一个容器，然后运行在任何支持 Docker 的机器上。容器化的应用程序可以在开发、测试和生产环境中保持一致性，从而简化了部署和扩展过程。Docker 的使用远不止于此，但掌握这些基础命令已经足够您开始 Docker 之旅。随着实践的深入，您将逐渐发现 Docker 强大的功能和便捷之处。记得，实践是最好的学习方式，不要害怕尝试和犯错。
2024-05-20 12:01:13
419
原创 通过 Vue3 研究框架的设计思路
最近在学习vue3，突然想研究一下源码，所以写了这篇文章。作为框架设计者的话，一定要对框架的定位和方向拥有全局的把控，这样才能做好后续的模块设计和拆分。
2024-05-14 09:30:45
496
原创 css背景图片，在不同的分辨率下，显示不全
这种方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默认为auto，根据上面的理论计算得背景图片的高度为300px,但是盒子只有50px高，超出的部分隐藏，所以看两种写法的效果自然就不一样啦。background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)这种方式设置完背景图片的大小后，会完全铺满整个盒子，并且背景图片的比例会因此改变为2:1。
2024-05-13 09:53:10
1096
原创 如何让 (a === 1 && a === 2 && a === 3) 返回 true（数据描述符与存取描述符的利用）
对于严格相等的情况，一般来说只能通过劫持数据的 getter 来进行操作，但是里面具体操作的方法在上面列举的就有很多。对于宽松相等的情况，除了劫持 getter 以外，因为宽松相等 JS 引擎的缘故，还能用 Object ， Proxy 对象的 valueOf 和 toString 方法达到目的。
2024-05-11 09:32:13
394
原创 5个常见的前端手写功能：浅拷贝与深拷贝、函数柯里化、数组扁平化、数组去重、手写类型判断函数
上述写法，总是要以空括号()结尾，于是再改进为隐式转换.toString写法，原理：当用 Function的值做计算的时候，会调用toString做隐式转换。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。从上面普通的递归函数中可以看出，其实就是对数组的每一项进行处理，那么其实也可以用reduce来实现数组的拼接，从而简化第一种方法的代码。思路：利用闭包和递归，如果参数为空，则判断递归结束，求和，返回结果。
2024-04-22 10:47:30
601
原创 5个常见的前端手写功能：New、call apply bind、防抖和节流、instanceof、ajax
onreadystatechange设置监听函数，当对象的readyState变为4的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是200则为成功，404或500为失败。思路：接受传入的context上下文，如果不传默认为window，将被调用的方法设置为上下文的属性，使用上下文对象来调用这个方法，删除新增属性，返回结果。如果绑定的是构造函数，还需要继承构造函数原型上的属性和方法，保证不丢失。可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
2024-04-17 15:22:29
628
1
原创 手机适配，在真机上适配正常，在pc端适配出现横向滚动条
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。
2024-04-15 11:50:12
975
原创 用零宽字符来隐藏代码
一种不可打印的Unicode字符，在浏览器等环境不可见，但是真是存在，获取字符串长度时也会占位置，表示某一种控制功能的字符。常见的零宽字符有：空格符：格式为U+null00B，用于较长字符的换行分隔；非断空格符：格式为U+FEFF，用于阻止特定位置的换行分隔；连字符：格式为U+null00D，用于阿拉伯文与印度语系等文字中，使不会发生连字的字符间产生连字效果；断字符：格式为U+200C，用于阿拉伯文、德文、印度语系等文字中，阻止会发生连字的字符间的连字效果；
2024-04-11 11:28:35
902
原创 JS面向对象——多态
重载函数是函数的一种特殊情况，为方便使用，C++允许在同一范围中声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数、类型或者顺序）必须不同，也就是说用同一个函数完成不同的功能。这就是重载函数。重载函数常用来实现功能类似而所处理的数据类型不同的问题。不能只有函数返回值类型不同。与之相似的函数重写：函数重写，也被称为覆盖，是指子类重新定义父类中有相同名称和参数的虚函数，主要在继承关系中出现。多态是同一个行为具有多个不同表现形式或形态的能力。在JAVA中，多态通过在子类中重写父类方法去实现。
2024-04-08 09:59:43
1339
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人