- 博客(125)
- 收藏
- 关注
原创 自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
确定工具库的需求和功能:在开始构建工具库之前,你需要明确你的工具库需要包含哪些方法及工具,以及这些工具或方法应该具备哪些功能。配置npm源:在你的本地开发环境中,将npm的源配置为你的私有仓库地址。注意:如果你的npm仓库是私有的,你可能需要在package.json中添加一个publishConfig字段来指定你的私有仓库地址。编写文档和示例:为你的工具方法编写清晰的文档和示例,这有助于其他开发者理解和使用你的工具库。文档和示例:持续更新和维护你的文档和示例,以帮助其他开发者更好地理解和使用你的工具库。
2024-04-21 17:00:25 2079
原创 从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
确定组件库的需求和功能:在开始构建组件库之前,你需要明确你的组件库需要包含哪些组件,以及这些组件应该具备哪些功能。这有助于你更好地规划你的开发工作。编写组件代码:使用你熟悉的前端框架(如React、Vue等)编写组件代码。确保你的代码具有良好的可读性和可维护性,并遵循相关的编码规范。创建组件库的结构:为了组织和管理你的组件,你需要创建一个清晰的目录结构。这可以包括组件的源代码、样式文件、文档和示例等。编写文档和示例:为你的组件编写清晰的文档和示例,这有助于其他开发者理解和使用你的组件库。
2024-04-15 10:42:24 4662
原创 在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
RefreshToken 方法是现代 Web 应用中一种常见的身份验证机制,尤其在需要长时间保持用户登录状态的场景下具有重要意义。RefreshToken 方法的主要作用是在用户登录后,服务器生成一个 RefreshToken 并将其返回给客户端。客户端在之后的每次请求中都需要携带这个 RefreshToken,以便服务器能够验证用户身份并返回用户所需的数据。使用场景包括但不限于:用户在应用中的长时间操作、用户在多个设备上使用应用、用户需要跨域访问应用等。
2024-03-11 10:03:10 5214 2
原创 Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
权限控制是一个很重要的概念,在 Web 应用程序中尤其重要。简单地说,权限控制就是将用户分为不同的分类,为每个分类分配相应的用户权限。这样,用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性,使数据更加安全可靠。在 Vue 中进行权限控制,通常有两种方式:第一种是在路由层面进行控制,第二种是在组件层面进行控制。
2024-03-09 10:31:17 8206 3
原创 基于transform的scale属性,实现数据可视化大屏自适应缩放,保持比例不变,轻松应对不同分辨率
在做可视化大屏时,大屏的分辨率基本都是固定死的,因此我们只需要把页面按照设计稿尺寸写死即可,但是我们开发屏幕很小,这时候总要将浏览器进行缩小,这里给出一个通用方法,供大家使用,无需缩放浏览器。应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。可以在一个项目里面,使用不同分辨率或比例的大屏页面。
2024-02-29 09:31:40 4714 2
原创 uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。
2024-01-22 10:15:06 31209 4
原创 微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
在开发小程序过程中,有个需求是,小程序底部的tabBar需要根据不同用户角色显示不同底部导航。这里不用管tabBar的list超过5个,因为后面是使用自定义组件,完全接管 tabBar 的渲染。2、本示例是7个底部导航,分2种权限,权限1显示1,2,3;权限2显示4,5,6,7;3、当然你也可以自由其他组合,比如:权限1显示1,4;权限2显示1,2,3,4;另1种权限显示4个按钮(这里做的是显示4,5,6,7导航)1种权限显示3个按钮(这里做的是显示1,2,3导航)修改好权限后,记得要重新编译哦。
2024-01-04 09:18:43 15356 48
原创 Vue微前端新探:iframe优雅升级,扬长避短,重获新生
iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。
2023-07-17 14:16:11 6394 4
原创 uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
3.如果在特定页面需要自定义分享内容,也仍旧可以使用页面的 onShareAppMessage() 和 onShareTimeline() 方法自定义分享的内容,全局的分享会被页面定义的分享内容覆盖。开发过小程序的朋友们应该都遇到这样的情况,可能很多个页面有相同的函数,例如onShareAppMessage,有什么最佳实践吗,应该如何处理呢?如果你的小程序,发现他的【转发给朋友】的按钮时灰色的,不能点击,那么说明这个小程序没有写这部分的代码。很常见的功能,但是这几个功能,并不是你项目建起来了就有的。
2023-06-14 13:55:55 12060 4
原创 鸿蒙HarmonyOS开发:应用权限的基本概念及如何申请应用权限详细介绍
默认情况下,应用只能访问有限的系统资源。system_grant指的是系统授权类型,在该类型的权限许可下,应用被允许访问的数据不会涉及到用户或设备的敏感信息,应用被允许执行的操作对系统或者其他应用产生的影响可控。user_grant指的是用户授权类型,在该类型的权限许可下,应用被允许访问的数据将会涉及到用户或设备的敏感信息,应用被允许执行的操作可能对系统或者其他应用产生严重的影响。每一个权限的权限等级、授权方式不同,申请权限的方式也不同,开发者在申请权限前,需要先根据以下流程判断应用能否申请目标权限。
2024-10-14 10:31:32 2336
原创 鸿蒙HarmonyOS开发:音频播放及长时任务(熄屏播放,后台播放)的应用
Media Kit(媒体服务)提供了AVPlayer和AVRecorder用于播放、录制音视频。在Media Kit的开发指导中,将介绍各种涉及音频、视频播放或录制功能场景的开发方式,指导开发者如何使用系统提供的音视频API实现对应功能。比如使用SoundPool实现简单的提示音,当设备接收到新消息时,会发出短促的“滴滴”声;使用AVPlayer实现音乐播放器,循环播放一首音乐。
2024-10-14 09:15:28 1244
原创 鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)天气应用案例
布局可以分为自适应布局和响应式布局,二者的介绍如下表所示。名称简介自适应布局当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种:拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。响应式布局当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。
2024-09-20 10:52:01 1693
原创 鸿蒙HarmonyOS开发:懒加载(LazyForEach)、瀑布流组件(WaterFlow)
懒加载LazyForEach是一种延迟加载的技术,它是在需要的时候才加载数据或资源,并在每次迭代过程中创建相应的组件,而不是一次性将所有内容都加载出来。懒加载通常应用于长列表、网格、瀑布流等数据量较大、子组件可重复使用的场景,当用户滚动页面到相应位置时,才会触发资源的加载,以减少组件的加载时间,提高应用性能,提升用户体验。在声明式描述语句中,有两种方式控制列表、网格等容器类组件的渲染,分别为循环渲染(ForEach)和数据懒加载(LazyForEach)。
2024-09-20 09:33:03 1224
原创 鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)音乐专辑案例
随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间随意调用、互助共享,让用户享受无缝的全场景体验。而作为应用开发者,广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容,则需要适配不同的屏幕尺寸和硬件,开发成本较高。HarmonyOS 系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。定义:一套代码工程,一次开发上架,多端按需部署。
2024-09-14 11:10:02 1082
原创 鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)栅格布局
栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。主要优势包括:提供可循的规律:栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数,可以方便地对页面元素进行定位和排版。统一的定位标注:栅格布局可以为系统提供一种统一的定位标注,保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度,提高工作效率。灵活的间距调整方法:栅格布局可以提供一种灵活的间距调整方法,满足特殊场景布局调整的需求。
2024-09-13 14:49:38 1026
原创 鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)断点和媒体查询
媒体查询作为响应式设计的核心,在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。针对设备和应用的属性信息(比如显示区域、深浅色、分辨率),设计出相匹配的布局。当屏幕发生动态改变时(比如分屏、横竖屏切换),同步更新应用的页面布局。
2024-09-11 09:58:50 1128
原创 vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
Mock 可以翻译为“模拟”,在前端开发中通常指模拟后端接口和数据。在软件开发过程中,Mock数据指的是一种虚拟的测试数据,用于模拟真实的数据情况。它可以用来替代真实的数据源,从而实现在没有真实数据的情况下进行开发和测试的需求。Mock数据的使用不仅可以提高开发效率,还可以避免与真实数据源的依赖性,减少开发过程中的等待时间,以及降低测试环境的复杂性。
2024-09-03 09:18:21 4297
原创 axios取消请求CancelToken的原理解析及用法示例
Axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 Node.js 中发起 HTTP 请求。除了强大的功能和丰富的配置选项,Axios 还提供了一个实用的特性——CancelToken,它允许我们取消一个或多个正在进行的请求。在网络应用中,我们经常需要处理一些可能需要取消的请求,比如用户在加载数据时跳转到了其他页面,或者在表单提交前用户点击了取消按钮。在这些场景下,如果能够取消请求,就能避免不必要的资源消耗和更好的用户体验。
2024-09-02 09:25:07 3117
原创 程序员为什么要一直写bug ,不能一次性写好吗?
在软件开发中,编写无bug的代码是每个程序员和开发团队的目标。然而,由于软件项目的复杂性、不断变化的需求、时间压力、人为错误以及技术限制等多种因素,bug的产生往往是不可避免的。本文探讨了导致bug产生的常见原因,并提出了一系列减少bug和提高代码质量的策略。通过实施这些策略,程序员可以朝着一次性编写更可靠代码的目标迈进。
2024-09-02 09:24:53 1556
原创 鸿蒙HarmonyOS开发:应用的状态管理,LocalStorage,AppStorage,PersistentStorage
状态共享相关的装饰器(@State、@Prop、@Link、@Provide、@Consume等),但是这些装饰器仅能在两个组件之间共享状态,如果开发者需要在一个页面内的所有组件中共享状态,或者是在多个页面之间共享状态,这些装饰器便不再适用了,此时我们需要的就是应用级状态管理功能。
2024-08-29 15:07:13 1483
原创 鸿蒙HarmonyOS开发:如何灵活运用动画效果提升用户体验
动画可以在UI界面发生变化时,提供渐变过渡效果,提升用户体验。动画的实现原理是通过在一段时间内连续播放一系列静止画面(帧),从而产生流畅的视觉效果。在鸿蒙应用中,实现动画效果非常方便,我们只需明确组件的初始状态和结束状态,并配置一些动画相关的参数(动画时长),系统就会自动的生成中间的过度状态,并呈现出动画效果。在鸿蒙应用中,开发者可以为组件配置两类动画效果,一是组件的布局相关属性(如尺寸、位置等)发生变化时的布局更新动画,二是组件出现或消失时的组件转场动画。
2024-08-28 13:49:53 2200
原创 鸿蒙HarmonyOS开发:如何灵活运用服务卡片提升用户体验
服务卡片(以下简称“卡片”)是一种界面展示形式,可以将应用的重要信息或操作前置到卡片,以达到服务直达、减少体验层级的目的。卡片常用于嵌入到其他应用(当前卡片使用方只支持系统应用,如桌面)中作为其界面显示的一部分,并支持拉起页面、发送消息等基础的交互功能。
2024-08-27 09:27:33 1944
原创 鸿蒙HarmonyOS开发:如何使用第三方库,加速应用开发
在鸿蒙(HarmonyOS)开发中,使用第三方库是一种常见的做法,它可以帮助开发者快速实现特定功能,提高开发效率。以下是如何在鸿蒙HarmonyOS开发中使用第三方库的详细步骤和注意事项:
2024-08-26 09:16:05 4007
原创 鸿蒙HarmonyOS开发:常用布局及实用技巧
布局是指对页面组件进行排列和定位的过程,其目的是有效地组织和展示页面内容,会涉及到组件的大小、位置以及它们之间的相互关系等等。在鸿蒙应用中,页面上的每个组件都可以看做是一个矩形的盒子,这个盒子包含了内容区域(content)、边框(border)、内边距(padding)和外边距(margin)。
2024-08-21 09:44:51 1642
原创 鸿蒙HarmonyOS开发:用户通知服务Noification的详细使用指南
HarmonyOS通过ANS(Advanced Notification Service,通知系统服务)对通知类型的消息进行管理,支持多种通知类型,如基础类型通知、进度条类型通知。通知常见的使用场景:显示接收到的短消息、即时消息等。显示应用的推送消息,如广告、版本更新等。显示当前正在进行的事件,如下载等。应用可以通过通知接口发送通知消息,终端用户可以通过通知栏查看通知内容,也可以点击通知来打开应用。
2024-08-20 09:54:46 2011
原创 鸿蒙HarmonyOS开发:多种内置弹窗及自定义弹窗的详细使用指南
弹窗是移动应用中常见的一种用户界面元素,常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用,除此之外还支持自定义弹窗,来满足各种不同的需求。不同弹窗的详细使用介绍,消息提示框(showToast)、对话框(showDialog)、警告弹窗(AlertDialog)、操作菜单(showActionMenu)、操作列表弹窗(ActionSheet)、文本滑动选择器弹窗 (TextPickerDialog)、自定义弹窗 (CustomDialog)。
2024-08-08 08:49:43 3873
原创 鸿蒙HarmonyOS开发:@Observed装饰器和@ObjectLink装饰器:监听嵌套类对象属性变化
@State装饰器:组件内状态,@Prop装饰器:父子单向同步,@Link装饰器:父子双向同步,@Provide装饰器和@Consume装饰器:与后代组件双向同步。上文所述的装饰器仅能观察到第一层的变化,但是在实际应用开发中,应用会根据开发需要,封装自己的数据模型。对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器。
2024-08-05 09:04:03 1717
原创 vuex的工作流程,模块化使用案例分享,及状态持久化
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方生态系统中,并且在开发大型、复杂单页应用(SPA)时尤其有用。
2024-07-24 11:13:19 1276
原创 vue3中父子组件的双向绑定defineModel详细使用方法
组件之间通讯,通过 props 和 emits 进行通讯,是单向数据流,子组件不能改变父组件传递给它的 prop 属性,推荐的做法是它抛出事件,通知父组件自行改变绑定的值。为了在声明 props 和 emits 选项时获得完整的类型推导支持,我们可以使用 defineProps 和 defineEmits API
2024-07-24 09:44:18 2929
原创 Node.js单点登录SSO详解:Session、JWT、CORS让登录更简单
单点登录(Single Sign On),简称为 SSO,是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。
2024-07-03 09:23:34 3004
原创 Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
短链接是指仅包含一个网址的链接形式,通俗一些就是将一个很长很复杂的的网址变成一个简短易记的链接。和长链接不同,长链接往往包含多个网址。短链接具有诸多优势,它不仅能够便捷地实现快速导航,还能有效避免过多重复的网址链接,进而提升网站页面的可访问性。
2024-07-02 09:25:41 1963
原创 Node.js中基于node-schedule实现定时任务之详解
实际工作中,可能会遇到定时清除某个文件夹内容,定时发送消息或发送邮件给指定用户,定时导出某些数据等。借助setTimeout和setInterval来实现的化太过麻烦,node-schedule是一个非常不错的npm包,可以帮助我们快速的创建和管理定时任务。定时任务是指在预定的时间点或时间间隔内执行的任务或操作。它们是自动化执行特定逻辑的一种方式,可用于执行重复性的、周期性的或计划性的任务。
2024-07-02 09:25:06 4421 2
原创 深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
处理大量数据的渲染对于前端开发来说是一项挑战,但也是提升网页性能和用户体验的重要环节。要有效解决这一问题,可以采用虚拟滚动(Virtual Scrolling)、分批渲染(Incremental Rendering)、使用Web Workers处理数据、利用前端分页(Pagination)、借助服务端渲染(SSR)来优化大量数据的处理。其中,虚拟滚动是一种非常有效的技术,它通过只渲染用户可见的列表项来极大减少DOM操作和提高性能。这种方式不仅提升了滚动的流畅度,也减轻了浏览器的负担,尤其适用于长列表数据的展
2024-07-01 09:12:06 2579
原创 前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键
使用代码风格检查工具:使用诸如 ESLint 等代码风格检查工具,可以规范代码的书写风格,提高代码的一致性和可读性。使用类型和错误检查工具:使用诸如 TypeScript、Flow 等类型检查工具和 ESLint 等错误检查工具,可以避免编码时出现类型和语法错误,用来提高代码质量和可维护性。进行代码复审和 code review:通过与团队成员进行代码复审和 code review,可以发现代码中存在的问题,提高代码的可读性和扩展性。单元测试和集成测试:通过编写单元测试和集成测试,可以检查代码是否符合
2024-07-01 09:11:20 1755
原创 Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
WebSocket比SSE功能更加强大,WebSocket是在服务端和客户端建立的双向实时数据通道,而SSE只支持服务端想客户端的单向通讯浏览器对WebSocket的支持也更加广泛,IE、Edge几乎不支持SSEWebSocket有一套独立的标准协议,在使用过程中必须按照标准协议来,而SSE使用的是Http协议,只需要更改Context-Type为"text/event-stream;charset=utf-8"即可,这里需要特殊注意的一点,必须是utf-8。
2024-06-26 09:19:56 2482
原创 Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE)。SSE(Server-Sent Events)是一种用于实现服务器主动向客户端推送数据的技术,也被称为“事件流”(Event Stream)。它基于 HTTP 协议,利用了其长连接特性,在客户端与服务器之间建立一条持久化连接,并通过这条连接实现服务器向客户端的实时数据推送。
2024-06-25 09:04:25 8914 2
原创 Web实时通信的学习之旅:WebSocket入门指南及示例演示
WebSocket 协议的底层协议也是TCP协议WebSocket 协议的标识符为ws,加密后为wssWebSocket 协议没有同源限制,即WebSocket 协议可以跨域通信WebSocket 协议是有状态的,是前后端交互的长连接,即建立连接后可以保持连接状态,通信时可以省略部分状态信息WebSocket 协议可以发送文本,同时也可以发送二进制数据WebSocket 是一种强大的网络通信协议,它允许服务器和客户端之间进行实时、双向通信。
2024-06-24 09:18:51 3666
原创 Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
在Vue.js的开发过程中,我们经常需要在客户端存储一些数据,以便在用户关闭页面或刷新后能够恢复之前的状态。Vue-ls插件就是一个为Vue.js设计的本地存储解决方案,它基于localStorage和sessionStorage,使得在Vue组件中存取数据变得异常简单。
2024-06-21 14:29:11 2617
原创 前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval:与 setTimeout 类似,setInterval 也会将要执行的代码或函数放入事件循环队列中,但它在指定的时间间隔后会一直重复执行,直到 clearInterval 被调用或窗口被关闭。函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。
2024-06-21 08:42:30 4592 2
原创 深入解析ESLint配置:从入门到精通的全方位指南,精细调优你的代码质量保障工具
ESLint是一个主流的JavaScript Lint工具,用于监测JavaScript代码质量,可以帮助开发者提升编码能力。它可以很容易地统一开发者的编程风格,同时也可以通过配置文件来自定义规则。在前端开发中,ESLint可以帮助我们检查代码中的潜在问题,提高代码的可读性和可维护性。
2024-06-20 08:57:02 6664 1
vue中前端利用refreshToken结合axios拦截器实现token的无感刷新
2024-01-16
数据可视化大屏自适应,保持比例不变形,满足不同分辨率的需求-利用transform的scale属性缩放,缩放整个页面
2024-01-09
优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航-更新版(支持自由组合总数超过5个tabBar菜单)
2024-01-03
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息
2023-11-22
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
2023-11-22
vue中使用echarts实现地图区域颜色,省市切换,根据数据实现区的打点效果
2023-11-17
优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航
2023-11-01
vue基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生
2023-11-01
vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能
2023-11-01
VLC多媒体播放器 VLC Media Player
2023-05-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人