![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 88
Lee哈
想多了都是问题 做多了都是答案
展开
-
客户端:Vue3,服务端:Node,基于Socket.IO实现单聊的功能
本篇主要讲讲基于Socket.IO实现单聊功能的主要实现,包括了客户端和服务端Node。在这个即时通讯无处不在的时代,实时聊天功能已经成为我们日常生活和工作中不可或缺的一部分。无论是与朋友闲聊,还是与同事协作,单聊功能都是构建任何通讯平台的基石。今天,我们将一起探索如何利用前端界的新星——Vue 3,以及后端的强大工具——Node.js,结合实时通讯的利器Socket.IO,来打造一个高效、稳定的单聊应用。在本篇文章中,我们将从零开始,一步步搭建起一个简单的单聊系统。原创 2024-03-17 05:00:00 · 2443 阅读 · 0 评论 -
Vue命令式组件的编写与应用
大家好!今天我们来聊聊Vue.js中的一个有趣话题——命令式组件。你有没有觉得,有时候我们在Vue模板里写组件,就像是在玩搭积木,每个积木都有固定的形状和位置?虽然这样很直观,但有时候我们可能需要更多的自由度来发挥创意。这就是命令式组件登场的时候了。它们就像是你的个人DJ,在你需要的时候播放你想要的音乐。不需要预先在模板中定义,你可以直接在JavaScript中调用它们,就像是调用一个函数一样简单。这种方式不仅让组件的使用变得更加灵活,还能让你的代码看起来更加干净利落。原创 2024-03-16 16:34:32 · 840 阅读 · 0 评论 -
第十五届蓝桥杯(Web 应用开发)模拟赛 3 期-大学组(被题目描述坑惨了)
这次的模拟题是真的狠,后面的四道题难度简直是咔咔涨 不过真到比赛了,估计也没时间写后面的题目。😢。原创 2024-03-13 05:00:00 · 3413 阅读 · 1 评论 -
Vue3中实现歌词滚动显示效果
歌词数据处理首先,我们定义了歌词数据的结构Lyric,并通过函数将歌词字符串解析为该类型的数组。这使得我们能够更方便地处理歌词数据。组件布局在布局方面,我们设计了一个简单的页面结构,包括音乐播放器、CD封面和歌词展示区域。通过ref获取音频元素的引用,并使用watch监听播放位置的变化,实现了歌词的滚动效果。事件处理timeupdate(播放位置变化事件)和canplay(可以开始播放事件)。通过监听播放位置变化,实时更新歌词的高亮位置,并在点击歌词时跳转到对应的播放位置。功能扩展。原创 2024-02-02 05:00:00 · 1131 阅读 · 0 评论 -
Node.js身份验证实践:Express-JWT和JSON Web Token的用法
JSON Web Token(JWT)在应用程序中充当了身份验证和授权的关键工具。它通过在生成的令牌中携带用户信息,实现了无状态的身份验证,避免了传输敏感信息,同时提高了应用的安全性。主要用于验证从客户端发送的包含 JWT 的请求头。它帮助我们确认用户的身份是否有效,并在认证成功后将用户信息附加到请求对象上,方便后续处理。我们学习了如何使用库生成 JWT,并将其发送给客户端。客户端在后续请求中携带 Token,而服务器通过验证 Token 的合法性,实现了用户的无缝身份认证。除了认证外,原创 2024-01-31 05:00:00 · 3164 阅读 · 0 评论 -
Vue中配置页面加载进度条
Vue中配置页面加载进度条原创 2024-01-30 05:00:00 · 2201 阅读 · 0 评论 -
使用CSS 或 SASS 实现主题背景切换效果
现在的主流网站中,无论是一些技术文档获取官网,都存在着使用一个switch按钮实现主题背景切换的一个效果,那么这种效果是怎么实现的呢?原创 2024-01-25 06:00:00 · 2233 阅读 · 0 评论 -
第十五届蓝桥杯(Web 应用开发)模拟赛 2 期-大学组(详细分析解答)
刚做完第一期的模拟题目,第二期又开始发布了,花了点时间做完了,分享下自己的解题思路。原创 2023-11-30 06:00:00 · 6231 阅读 · 5 评论 -
第十五届蓝桥杯(Web 应用开发)模拟赛 1 期-大学组(详细分析解答)
完成中的 TODO 部分,当输入框() 的值变化时,触发事件更新index.html中组件(form-input)的v-model值。(调试 tips:考生可以在点击按钮时通过打印formData的值进行查看)。完成js/util.js中的is_email函数,参数是邮箱地址,是合法邮箱返回true,否则返回false。(邮箱的正则校验)完成中通用表单验证函数中的 TODO 部分。如果表单验证通过,则Promise为,否则为(此部分代码已提供)。index.html中定义的formRules。原创 2023-11-24 06:00:00 · 3179 阅读 · 1 评论 -
Vue3 + Nodejs 实战 ,文件上传项目--大文件分片上传+断点续传
系列专栏:vue3+nodejs 实战--文件上传欢迎关注在上一篇中我们实现了文件的拖拽上传,该篇就讲讲大文件上传的需求场景。原创 2023-10-20 06:00:00 · 1585 阅读 · 1 评论 -
Vue3 + Nodejs 实战 ,文件上传项目--实现拖拽上传
拖拽上传的本质就是用户与页面的交互,其实涉及到的难点不多,只要懂得了设置div或者某个容器为拖拽对象,这种拖拽上传的问题就迎刃而解了,如有不理解或更好的方案可以私信或评论交流。下一篇准备实现大文件的分片上传,欢迎关注。原创 2023-10-16 06:00:00 · 1217 阅读 · 3 评论 -
Vue3 + Nodejs 实战 ,文件上传项目--实现文件批量上传(显示实时上传进度)
系列专栏:vue3+nodejs 实战--文件上传欢迎关注在上一篇中,我们创建好了前端Vue3,后端nodejs的项目,并且实现了一个图片上传的功能,地址在:,该篇实现了文件的批量上传并且显示实时的上传进度。原创 2023-10-14 16:21:17 · 1824 阅读 · 0 评论 -
Vue3 + Nodejs 实战 ,文件上传项目--实现图片上传
系列专栏:vue3+nodejs 实战之文件上传欢迎关注本系列记录vue3(前端)+nodejs(后端) 实现一个文件上传项目,目前只完成了图片的上传,后续会陆续完成:单文件上传,多文件上传,大文件分片上传,拖拽上传等功能,欢迎关注。原创 2023-10-12 22:26:17 · 2110 阅读 · 0 评论 -
原生js实现的轮盘抽奖案例
/ 定义定时器变量用来清除定时器// 转动次数// 转动时间间隔let times;// 总转动次数//计算切换总次数如果你跟我一样每天不知道吃啥,可以试试用这个轮盘来决定哦。好好吃饭,好好学习,祝天天开心。原创 2023-09-10 19:59:40 · 1022 阅读 · 0 评论 -
基于canvas实现图片文字水印生成器
基于canvas实现图片文字水印生成器原创 2023-09-10 11:10:54 · 654 阅读 · 0 评论 -
uni-app动态tabBar,根据不同用户展示不同的tabBar
uni-app动态tabBar,根据不同用户展示不同的tabBar原创 2023-09-07 17:26:44 · 7020 阅读 · 2 评论 -
原生js实现轮播图及无缝滚动
原生js实现轮播图及无缝滚动原创 2023-09-01 20:38:02 · 2494 阅读 · 0 评论 -
前端图片转base64,并使用canvas对图片进行压缩
图片转base64通常用在用户上传图片的情况下使用,他的作用就是让用户看到预览的图片不受网络的影响。:首先是用户选择图片上传至服务器,服务器保存接收返回一个url地址,然后客户端带着这个url地址再去请求图片,最后才拿到用户上传的图片预览,这个过程如果是网络不好的情况,很影响用户的体验。在上传的时候不需要依赖服务器的请求,直接在客户端就进行转换,利用的是文件IO读取,这个不受网络IO的影响,并且比网络要快的多并且如果有编辑图片的需求,是不是又得重新进行一次第一步的步骤,如果网络不好,非常的影响用户的体验。原创 2023-08-16 19:32:31 · 1274 阅读 · 0 评论 -
Javascript程序异常处理
1.对于异常的知识,大概要知道基本的错误类型有哪些,这样在写代码,调试代码时能更快的找出程序的错误2.要能够根据错误信息迅速的反应过来是什么错误,并能找到错误的代码行3.要知道捕获异常的语法以及捕获异常的时机4.会在适当的时机手动抛出错误希望此文对你了解异常的知识能有所帮助。原创 2023-07-25 22:18:22 · 948 阅读 · 0 评论 -
ES6解构对象、数组、函数传参
在ES6的新语法中新增了解构的方法,它可以让我们很方便的从数组或者对象身上取数据,简化了大量重复的代码,让我们的代码更具可读性和维护性。原创 2023-07-23 21:28:42 · 472 阅读 · 0 评论 -
前端开发多人协作的团队项目时应该要配置的一些规则
本文主要记录了团队开发一个前端项目需要进行的一些前期配置,例如Eslint语法检验,prettierrc格式化规则,以及提交代码时的规则等等。我搭建的项目结构是:Vue3 + Ts + Vite + scss用到的编译器:WebStorm包管理工具:pnpm。原创 2023-07-19 11:06:49 · 1089 阅读 · 3 评论 -
Vue3组件间的通信方式
目录 1.props父向子组件通信2.自定义事件 子向父组件通信3.全局事件总线4.v-model组件通信(父子组件数据同步)绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parentref获取子组件实例对象 $parent获取父组件实例对象 7.provide-inject 可以实现隔辈传输8.Pinia选择式API:组合式API:父组件:props用于父组件向子组件传递数据,子组件用defineProps接收父组件传递来的参数在父组件中我们可以在使用子组件时,对其传递p原创 2023-07-18 18:21:19 · 6129 阅读 · 5 评论 -
黑马微信小程序项目·黑马优购
黑马微信小程序项目·黑马优购原创 2023-07-08 17:24:34 · 497 阅读 · 3 评论 -
微信小程序关于npm包的学习笔记
微信小程序关于npm包的学习笔记原创 2023-07-04 13:32:06 · 3095 阅读 · 0 评论 -
微信小程序自定义组件学习笔记
微信小程序自定义组件学习笔记原创 2023-07-03 16:55:58 · 1890 阅读 · 3 评论 -
前端常见的鼠标样式
前端常见的鼠标样式。原创 2023-06-25 11:23:39 · 799 阅读 · 0 评论 -
一文理解Javascript的浅拷贝与深拷贝
一文理解Javascript的浅拷贝与深拷贝原创 2023-06-23 17:00:41 · 252 阅读 · 1 评论 -
Javascript练习,手写Lodash内置函数(2)
相信学前端的小伙伴应该对是比较了解的,是一个实用的工具库,提供了很多常用的工具函数,以简化编程。Lodash提供了许多对数组、数字、字符串和对象等进行操作的实用工具函数,这使得开发更加高效、简便、可读、可维护。原创 2023-06-20 11:07:52 · 325 阅读 · 9 评论 -
Javascript练习,手写Lodash内置函数(1)
Javascript练习,手写Lodash内置函数(1)原创 2023-06-19 17:56:39 · 500 阅读 · 5 评论 -
不常用但必须得知道的CSS选择器
不常用但必须得知道的CSS选择器原创 2023-06-16 21:15:50 · 49 阅读 · 1 评论 -
前端视频无法自动播放的问题,基于Chrome浏览器的自动播放策略原理,详细解释加了autoplay属性之后视频仍然不能自动播放的问题,并提供了二种主流的解决方法
前端视频无法自动播放的问题,基于Chrome浏览器的自动播放策略原理,详细解释加了autoplay属性之后视频仍然不能自动播放的问题,并提供了二种主流的解决方法原创 2023-06-14 18:22:37 · 11036 阅读 · 12 评论