自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(88)
  • 收藏
  • 关注

原创 在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新

RefreshToken 方法是现代 Web 应用中一种常见的身份验证机制,尤其在需要长时间保持用户登录状态的场景下具有重要意义。RefreshToken 方法的主要作用是在用户登录后,服务器生成一个 RefreshToken 并将其返回给客户端。客户端在之后的每次请求中都需要携带这个 RefreshToken,以便服务器能够验证用户身份并返回用户所需的数据。使用场景包括但不限于:用户在应用中的长时间操作、用户在多个设备上使用应用、用户需要跨域访问应用等。

2024-03-11 10:03:10 3365 1

原创 Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析

权限控制是一个很重要的概念,在 Web 应用程序中尤其重要。简单地说,权限控制就是将用户分为不同的分类,为每个分类分配相应的用户权限。这样,用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性,使数据更加安全可靠。在 Vue 中进行权限控制,通常有两种方式:第一种是在路由层面进行控制,第二种是在组件层面进行控制。

2024-03-09 10:31:17 3469

原创 基于transform的scale属性,实现数据可视化大屏自适应缩放,保持比例不变,轻松应对不同分辨率

在做可视化大屏时,大屏的分辨率基本都是固定死的,因此我们只需要把页面按照设计稿尺寸写死即可,但是我们开发屏幕很小,这时候总要将浏览器进行缩小,这里给出一个通用方法,供大家使用,无需缩放浏览器。应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。可以在一个项目里面,使用不同分辨率或比例的大屏页面。

2024-02-29 09:31:40 2813 2

原创 uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题

使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。

2024-01-22 10:15:06 21575 3

原创 微信小程序动态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 10712 35

原创 Vue微前端新探:iframe优雅升级,扬长避短,重获新生

iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。

2023-07-17 14:16:11 2404 4

原创 uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接

3.如果在特定页面需要自定义分享内容,也仍旧可以使用页面的 onShareAppMessage() 和 onShareTimeline() 方法自定义分享的内容,全局的分享会被页面定义的分享内容覆盖。开发过小程序的朋友们应该都遇到这样的情况,可能很多个页面有相同的函数,例如onShareAppMessage,有什么最佳实践吗,应该如何处理呢?如果你的小程序,发现他的【转发给朋友】的按钮时灰色的,不能点击,那么说明这个小程序没有写这部分的代码。很常见的功能,但是这几个功能,并不是你项目建起来了就有的。

2023-06-14 13:55:55 9287 4

原创 自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南

确定工具库的需求和功能:在开始构建工具库之前,你需要明确你的工具库需要包含哪些方法及工具,以及这些工具或方法应该具备哪些功能。配置npm源:在你的本地开发环境中,将npm的源配置为你的私有仓库地址。注意:如果你的npm仓库是私有的,你可能需要在package.json中添加一个publishConfig字段来指定你的私有仓库地址。编写文档和示例:为你的工具方法编写清晰的文档和示例,这有助于其他开发者理解和使用你的工具库。文档和示例:持续更新和维护你的文档和示例,以帮助其他开发者更好地理解和使用你的工具库。

2024-04-21 17:00:25 1544

原创 qiankun框架中基于actions机制实现主应用与子应用间的双向通信

配置子应用的全局状态Actions,子应用中的全局状态必须要跟主应用中的全局状态变量属性名相同,比如主应用中全局状态变量为{token: “main”},则子应用中也需要保证在setGloabalState时也需要设定相同的变量名。我们从上图可以看出,我们可以先注册 观察者 到观察者池中,然后通过修改 globalState 可以触发所有的观察者函数,从而达到组件间通信的效果。本示例介绍的是子应用中通过路由守卫,把当前的路由面包屑名称传到主应用中,主应用展示面包屑功能。这里也可以监听主应用的参数。

2024-04-19 09:07:39 863

原创 Vue 3 + Vite项目实战:常见问题与解决方案全解析

import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。每次手动打包还是很费劲的, vite 同样也有能把 ./dist 文件夹打包成 .zip 的插件,当然这个打包的文件夹不一定非得是 ./dist,可以是任何位置,只要指定好就可以了。这个 .zip 文件中的内容是不带 ./dist 这个外置文件夹的,直接就是 ./dist 里面的内容。也就是说,解压后,没有 dist 这一层文件夹,使用的时候要注意。

2024-04-19 09:06:44 565

原创 从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南

确定组件库的需求和功能:在开始构建组件库之前,你需要明确你的组件库需要包含哪些组件,以及这些组件应该具备哪些功能。这有助于你更好地规划你的开发工作。编写组件代码:使用你熟悉的前端框架(如React、Vue等)编写组件代码。确保你的代码具有良好的可读性和可维护性,并遵循相关的编码规范。创建组件库的结构:为了组织和管理你的组件,你需要创建一个清晰的目录结构。这可以包括组件的源代码、样式文件、文档和示例等。编写文档和示例:为你的组件编写清晰的文档和示例,这有助于其他开发者理解和使用你的组件库。

2024-04-15 10:42:24 1273

原创 深入解析ESLint配置:从入门到精通的全方位指南,精细调优你的代码质量保障工具

ESLint是一个主流的JavaScript Lint工具,用于监测JavaScript代码质量,可以帮助开发者提升编码能力。它可以很容易地统一开发者的编程风格,同时也可以通过配置文件来自定义规则。在前端开发中,ESLint可以帮助我们检查代码中的潜在问题,提高代码的可读性和可维护性。

2024-04-15 10:40:01 841 1

原创 深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器

简单的说,当用户最小化网页或移动到另一个标签时,API会发送 visibilitychange 有关该网页的可见性的事件。以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性(Page Visibility)API的简单应用。hidden : 页面内容是对用户不可见。实际上,这意味着该文档是后台标签页或最小化窗口的一部分,或者系统锁屏是时的状态。

2024-04-13 15:50:45 2217

原创 Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护

钩子方法是一种软件设计模式,在该模式中,一个类定义了一个模板方法,其中一部分代码是固定的,另一部分代码可以由子类通过实现钩子方法来自定义。Vue的各生命周期,其实就是Vue开发者规定的一些hook,和git里面规定的hook类似,你只要往hook里面填自定义内容,它就可以执行。当特定的操作或事件完成后,回调函数会被调用并执行相应的代码逻辑。你用的是第三方的组件库,你需要在这个组件渲染或发生改变时候做一些操作,巧了这个组件还没有实现相应的回调,你怎么办呢,这个时候你就可以使用hook了!

2024-04-12 15:43:33 1489 1

原创 一款基于分布式文件存储的数据库MongoDB的介绍及基本使用教程

MongoDB是一款基于分布式文件存储的数据库,由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案。它介于关系数据库和非关系数据库之间,支持的数据结构非常松散,类似json的bson格式,因此可以存储比较复杂的数据类型。MongoDB最大的特点是它支持的查询语言非常强大,其语法有点类似于面向对象的查询语言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引。

2024-04-11 14:09:37 2507

原创 vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法

splitNumber:坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在多个 y 轴为数值轴的时候,可以开启该配置项自动对齐刻度。只对’value’和’log’类型的轴有效。根据上面的原因去分析,要想左右的刻度线一致,分隔的段数是必须是一样的,这样才能重合。刻度在显示时,分割段数不一样,导致左右的刻度线不一致,不能重合在一起。interval:强制设置坐标轴分割间隔。从 v5.3.0 开始支持。

2024-04-10 14:31:39 2383

原创 vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持

在计算机科学中,语法糖(syntactic sugar)是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言,使操作变得更加清晰、方便,或者更加符合程序员的编程习惯。具体来说,语法糖是语言中的一个构件,当去掉该构件后并不影响语言的功能和表达能力。例如,C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器,包括编译器,静态分析器等,经常会在处理之前把语法糖构件转换成更加基础的构件,这个过程通常被称为"desugaring"。简而言之,语法糖就是一种便捷写法。

2024-04-09 14:48:57 5241

原创 前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键

使用代码风格检查工具:使用诸如 ESLint 等代码风格检查工具,可以规范代码的书写风格,提高代码的一致性和可读性。使用类型和错误检查工具:使用诸如 TypeScript、Flow 等类型检查工具和 ESLint 等错误检查工具,可以避免编码时出现类型和语法错误,用来提高代码质量和可维护性。进行代码复审和 code review:通过与团队成员进行代码复审和 code review,可以发现代码中存在的问题,提高代码的可读性和扩展性。单元测试和集成测试:通过编写单元测试和集成测试,可以检查代码是否符合

2024-04-09 09:57:51 1288

原创 Vue中使用require.context()自动引入组件和自动生成路由的方法介绍

我们项目开发中,经常需要import或者export各种模块,那么有没有什么办法可以简化这种引入或者导出操作呢?实际开发中增加一个新的页面可能就要重新编写路由的问题,导致路由文件每次都要重新编辑,页面较多,修改起来较为复杂。其实我们不单单局限于组件,路由内, 所有模块文件都是通用的, 例如路由, 接口封装模块,都是可以使用的。这样很蛋疼,因为每加一个组件,可能都要写这么一句,这样有规律的事,是否可以通过自动化完成?比如直接这样使用就可以了,不用在import引入,不用components注册了。

2024-04-08 14:13:27 1759

原创 在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。用来按条件显示一个元素的指令是 v-show。其用法基本一样:v-show 是通过控制display属性来进行dom的显示与隐藏v-if 是真正意义上的条件渲染,为true是渲染(dom存在),为false时不存在(dom不存在)

2024-03-09 10:31:32 1200

原创 npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解

npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具。它可以帮助我们在不全局安装某些包的情况下,直接运行该包提供的命令行工具。npx会在执行时,检查本地项目中是否安装了对应的依赖,如果没有安装则会自动下载安装,并执行命令。如果本地已经存在该依赖,则直接执行命令。

2024-03-08 14:30:26 4727

原创 JavaScript数据类型全解:编写通用函数,精准判断各种数据类型

toString()为Object的原型方法,而Array,function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法。在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。如果对象的 toString() 方法未被重写,就会返回如上面形式的字符串。

2024-03-07 09:21:12 2356 1

原创 Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用

template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件,请把用户输入的值msg传出去//也可以不传参数.itxst{

2024-03-06 11:27:00 4553

原创 前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包

我们平时使用npm publish进行发布时,上传的仓库默认地址是npm,通过Verdaccio工具在本地新建一个仓库地址,再把本地的默认上传仓库地址切换到本地仓库地址即可。当npm install时没有找到本地的仓库,则Verdaccio默认配置中会从npm中央仓库下载。搭建团队的私有仓库,保证团队组件的安全维护和私密性,是进阶前端开发主管路上,必不可少的一项技能。–target : 构建指标,默认为利用模式。// 访问http://localhost:4837。// 访问http://ip:port/

2024-03-06 11:26:45 4825

原创 Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案

通过给 type=index 的列传入 index 属性,可以自定义索引。该属性传入数字时,将作为索引的起始值。也可以传入一个方法,它提供当前行的行号(从 0 开始)作为参数,返回值将作为索引展示。methods: {

2024-03-05 14:13:37 1628

原创 前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略

首先,HTTP 301状态码表示永久重定向,这意味着服务器将请求重定向到新的URL,并且这个重定向是永久的,即客户端的后续请求都会被重定向到新的URL。而HTTP 302状态码表示临时重定向,这意味着服务器将请求重定向到新的URL,但这个重定向是临时的,即客户端的后续请求可能不会被重定向到新的URL。HTTP 302状态码表示临时重定向,当一个客户端发起请求后,服务器返回302状态码,表示请求成功,但需要客户端进行重定向,即需要将请求重定向到另一个URL上去。如果URL不存在,需要修改客户端的请求URL。

2024-03-05 14:13:20 1120

原创 Vue组件点击事件不触发的问题,添加事件修饰符native解决

相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。

2024-03-04 09:39:17 5776

原创 前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比

它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval:与 setTimeout 类似,setInterval 也会将要执行的代码或函数放入事件循环队列中,但它在指定的时间间隔后会一直重复执行,直到 clearInterval 被调用或窗口被关闭。函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。

2024-03-01 15:07:14 1832

原创 vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法

由于vue为单页面项目,通过控制组件局部渲染,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中。若项目过大,会造成单页面负载过重;同时,多页面利于模块独立部署。

2024-03-01 09:25:30 2810 2

原创 深入解析:JS与Vue中事件委托(事件代理)的高效实现方法

事件委托是一种利用事件冒泡的特性,在父节点上响应事件,而不是在子节点上响应事件的技术。它能够改善性能,因为只需要在父元素上设置一次事件监听器,就可以管理同一类型的所有子元素的事件。在日常开发中,很经常我们会遇到个问题,就是在长列表数据较多的时候,而又需要对子元素注册一些事件(如onClick),就会造成比较大的内存开支,很耗费性能,也可能会造成页面卡顿等等;例如,可以在父元素上设置一个click事件监听器,然后在子元素上绑定一个click事件,通过事件委托实现父元素对子元素事件的响应。

2024-02-28 10:26:11 3561

原创 前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法

在这种方法中,前端发起一个请求到后端,后端生成Excel文件并返回给前端,前端再将文件下载到本地。注意,excel流文件一定要在请求的时候加上响应类型字段,也就是:responseType: 'blob’或者,responseType: ‘arraybuffer’ ,否则下载出来的excel文件就会损坏,就会打不开。具体操作:打开excel文件,点击页面上方的左侧“文件”,然后点击“更多”里面的“选项”;再点击“受保护的视图”,取消选择右侧面板里面的勾选,最后点击“确定”。去掉右侧的选项,点击确定。

2024-02-27 14:05:18 3218

原创 前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能

在使用SpeechSynthesisUtterance时,需要先检查浏览器是否支持Web Speech API,然后创建一个新的SpeechSynthesisUtterance对象,并设置要转换为语音的文本以及其他配置项,最后调用speechSynthesis.speak()方法将文本转换为语音。使用百度文字转语音开放API的方法需要调用其提供的接口,传入要转换的文字,并设置语言、语速等参数。使用iSpeech TTS引擎则需要引入相应的JavaScript库,并使用其提供的API将文字转换为语音。

2024-02-26 09:24:53 2503

原创 在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施

随着互联网的发展,Web应用程序越来越普及,但是Web安全问题也随之增加。前端开发者作为Web应用程序的构建者之一,需要了解和掌握Web安全的基本知识和解决方案。本文将介绍前端开发者必须知道的Web安全问题和防范措施。

2024-02-23 16:29:06 1587

原创 Vue3中Sass的安装与使用指南:轻松上手CSS预处理器

Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表。以前用vue-cli的时候,还要安装sass-loader、node-sass什么的,安装的时候还会遇到各种问题,但是vite其实安装sass就可以了,很简单。Sass让CSS可以使用变量。可以用更少的代码,做更多的事,用更少的时间,具有更强的可读性。Sass提供了一个!

2024-02-22 14:09:05 5000

原创 vue项目打包优化:缩小体积productionSourceMap设置,使用cdn加速

我们在执行 npm run build 生成线上文件的时候,其实调用了 vue-cli-service build这里面会提到一个配置项:productionSourceMapproductionSourceMap的作用在于定位问题,打包时会生成.map文件,在生产环境就可以在浏览器查看到输出的信息具体是在哪一行,但相应的包的体积也会变大,将其设置为false则不生成.map文件。自己的项目在开启productionSourceMap是打包后dist目录文件大小,约为20M左右。

2024-02-21 15:13:25 3494

原创 基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍

基于 BroadcastChannel,就可以实现每个 Tab 内的核心信息互传, 再基于这些信息去完成我们想要的动画、交互等效果。Broadcast Channel 与 window.postMessage 都能进行跨页面通信Broadcast Channel 只能用于同源页面之间进行通信,而window.postMessage可以任何页面之间通信基于 Broadcast Channel 的同源策略,它无法完成跨域的数据传输;跨域的情况,我们只能使用window.postMessage 来处理。

2024-02-20 10:14:00 1869

原创 vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据

unplugin-vue-components插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件);使用此插件后,不需要手动编写import { Button } from 'ant-design-vue’这样的代码了,插件会自动识别template中使用的自定义组件并自动注册。

2024-02-19 11:22:30 5034

原创 Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析

Pinia 与 Vuex 一样,是作为 Vue 的“状态存储库”,用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。当该数据、方法在很多地方都需要使用或需要通过页面保存的数据,如显示在导航栏中用户信息,一个多步骤表单页面等,这时我们就可以使用Store了。

2024-01-20 16:48:52 859

原创 vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息;增加涟漪特效动画。本文以吉林省地图为例,来实现吉林省市的地图的绘制。根据数据在地图上显示柱状图信息;增加涟漪特效动画。你也可以显示中国地图或其他身份地图。原理是一样的哦。主要是通过geo地理坐标系组件实现地图绘制。柱状图是利用3个样式(顶部椭圆、中部矩形、底部椭圆)层叠实现的。

2024-01-19 11:09:00 1691

原创 vue中computed计算属性、watch侦听器、methods方法的区别以及用法

1、功能:computed是计算属性;watch是监听一个值的变化执行对应的回调2、是否调用缓存:computed函数所依赖的属性不变的时候会调用缓存;watch每次监听的值发生变化时候都会调用回调3、是否调用return:computed必须有;watch可以没有4、使用场景:computed当一个属性受多个属性影响的时候;例如购物车商品结算;watch当一条数据影响多条数据的时候,例如搜索框5、是否支持异步:computed函数不能有异步;watch可以

2024-01-15 11:00:21 734

vue中前端利用refreshToken结合axios拦截器实现token的无感刷新

内容概要: 1、首次登录的时候会获取到两个token(AccessToken,RefreshToken)。 2、持久化保存起来(localStorage方案)。 3、正常请求业务接口的时候携带AccessToken。 4、当接口口返回401权限错误时,使用RefreshToken请求接口获取新的AccessToken。 5、替换原有旧的AccessToken,并保存。 6、携带新AccessToken,继续未完成的请求。 7、RefreshToken也过期了,跳转回登录页面,重新登录。 适合人群: 1、具备一定前端基础,熟悉CSS的开发者。 能学到什么: 1、响应拦截器处理401权限错误。 2、防止重复请求refreshToken接口。 3、同时多个请求返回401,需要刷新token。 阅读建议:此资源以简单的demo演示了RefreshToken使用的全过程,介绍了基本的思路,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。

2024-01-16

数据可视化大屏自适应,保持比例不变形,满足不同分辨率的需求-利用transform的scale属性缩放,缩放整个页面

内容概要: 1、数据可视化大屏自适应,满足不同分辨率需求。 2、利用transform的scale属性缩放,缩放整个页面。。 3、在任意屏幕下保持16:9的比例,保持显示效果一致。 4、更宽:(Width / Height) > 16/9,以高度为基准,去适配宽度。 5、更高:(Width / Height) < 16/9,以宽度为基准,去适配高度。 6、1920*1080的分辨率大屏页面(16:9)比例效果演示。 7、1024*768的分辨率大屏页面(4:3)比例效果演示。 8、8400*3150的分辨率大屏页面(不规则)比例效果演示。 适合人群: 1、具备一定前端基础,熟悉CSS的开发者。 能学到什么: 1、做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。 2、利用transform的scale属性缩放,缩放整个页面。

2024-01-09

优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航-更新版(支持自由组合总数超过5个tabBar菜单)

内容概要: 1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目,支持自由组合总数超过5个tabBar菜单。 4、本示例是7个底部导航,分2种权限,权限1显示1,2,3;权限2显示4,5,6,7; 5、你也可以根据自己随便组合显示导航,比如1,3,5;2,4,6,7。 6、修改好权限后,记得要重新编译哦。 7、注意你的不同权限页面里面对应的高亮下标设置,及第一个页面的跳转路径。 适合人群: 1、具备一定编程基础,熟悉小程序开发者。 能学到什么: 1、使用自定义组件,完全接管 tabBar 的渲染。

2024-01-03

vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息

内容概要:vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息;增加涟漪特效动画。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: - 使用echarts实现省市地图绘制 - 根据数据在地图显示柱状图 - 根据数据显示数据,涟漪效果 阅读建议:本文以吉林省地图为例,来实现吉林省市的地图的绘制。根据数据在地图上显示柱状图信息;增加涟漪特效动画。你也可以显示中国地图或其他身份地图。原理是一样的哦。 实现过程:主要是通过geo地理坐标系组件实现地图绘制。柱状图是利用3个样式(顶部椭圆、中部矩形、底部椭圆)层叠实现的。

2023-11-22

vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息

内容概要:vue中使用echarts实现省市地图绘制,根据数据不同显示不同天气图标;显示省市的温度信息等数据。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: 1、使用echarts实现省市地图绘制 2、根据数据显示省下市的天气图标 3、根据数据显示省下市的温度信息 阅读建议:本文以吉林省地图为例,来实现吉林省下所有市的天气显示效果。你也可以显示中国地图或其他身份地图。原理是一样的哦。 实现过程,主要是通过label里面的formatter和rich来自定义样式的,在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

2023-11-22

vue中使用echarts实现地图区域颜色,省市切换,根据数据实现区的打点效果

内容概要:vue中使用echarts实现省市地图绘制,根据数据不同显示不同区域颜色;实现省市切换效果。根据数据实现区的打点效果。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: 1、使用echarts实现省市地图绘制; 2、根据数据不同显示不同区域颜色; 3、实现省市地图点击切换效果; 4阅读建议:本文以吉林省地图为例,来实现吉林省市的点击切换及打点效果。你也可以显示中国地图或其他身份地图。原理是一样的哦。 实现过程,主要是通过markPoint及经纬度数据来实现地图的打点效果。使用visualMap来实现不同区域颜色的效果。

2023-11-17

优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航

内容概要: 1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航 custom-tab-bar优雅实现微信小程序动态tabBar。 适合人群: 1、具备一定编程基础,熟悉小程序开发者 能学到什么: 1、使用自定义组件,完全接管 tabBar 的渲染。

2023-11-01

vue基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生

内容概要:以vue2为例,搭建一个左侧导航与顶部导航的二级导航的iframe框架项目。基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。 适合人群:具备一定编程基础,工作1-3年的研发人员 能学到什么: 1、使用postMessage方法来完成基座项目和子项目之间的通讯 2、使用position: fixed解决iframe的弹窗及遮罩层问题 3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面刷新,iframe可以加载正确页面

2023-11-01

vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能

内容概要:通过vue3+electron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法,了解Electron的一下API的使用,开发中的常用的插件及依赖的使用方法。 适合人群:具备一定编程基础,对vue有一定的了解,工作1-3年的研发人员。 能学到什么: 1、使用pinia+localStorage数据持久化 2、使用unplugin-auto-import自动引入依赖 3、使用unplugin-vue-components自动引入组件 4、使用provide与inject实现组件间通信 5、实现electron主进程与渲染进程间相互通信 6、使用element-plus构建UI界面

2023-11-01

VLC多媒体播放器 VLC Media Player

VLC Media Player 是一款可播放大多数格式,而无需安装编解码器包的媒体播放器。可以播放 MPEG-1、MPEG-2、MPEG-4、DivX、DVD/VCD、卫星数字电视频道、地面数字电视频道(digital terrestrial television channels)、在许多作业平台底下透过宽带 IPv4、IPv6 网络播放线上影片;此软件开发项目是由法国学生所发起的,参与者来自于世界各地,设计了多平台的支持,可以用于播放网络串流及本机多媒体档案之播放。

2023-05-26

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除