- 博客(92)
- 收藏
- 关注
RSS订阅原创 十三、vue3后台项目系列——sidebar的实现,递归组件
这篇文章主要介绍了Vue3中递归组件的实现与应用，重点讲解了侧边栏菜单(Sidebar)的封装与递归渲染。文章分为四个部分： 详细展示了Sidebar组件的封装，包括Logo、Link、Item等子组件的实现，并解决了Vue3响应式组件警告问题； 提供了相关样式文件的更新内容，包括按钮样式、ElementUI样式覆盖等； 重点分析了SidebarItem组件中的递归实现，通过条件判断处理单子菜单和多级菜单的情况； 系统阐述了组件递归思想，包括递归组件的定义、使用场景、注意事项和性能优化建议。 文章通过实际代
2025-09-20 14:14:45
1084
原创 十二、vue3后台项目系列——设置路由守卫，获取角色权限，获取角色路由列表、页面请求进度条
本文介绍了Vue项目中实现权限管理的完整流程：1) 登录后获取用户角色信息并存储到Pinia状态管理；2) 使用NProgress添加页面加载进度条；3) 配置路由守卫处理权限校验，包括设置页面标题、验证登录状态和角色权限；4) 根据路由元信息动态设置页面标题；5) 基于用户角色过滤动态路由，为菜单栏准备权限路由列表。通过这套方案实现了完整的权限控制体系，包括路由拦截、动态路由加载和菜单权限控制等功能。
2025-09-17 21:31:20
747
原创 十一、vue3后台项目系列——封装请求，存储token，api统一化管理，封装token的处理工具
本文介绍了登录功能中Token存储的最佳实践方案。文章对比了Cookie与localStorage存储Token的差异，详细分析了Cookie的五大优势：自动携带请求头、支持HttpOnly防XSS攻击、SameSite防CSRF攻击、自动过期机制以及跨域可控性。同时提供了axios请求封装方案，推荐使用js-cookie库管理Token，并展示了API模块化管理和Mock接口的实现方法。全文重点强调了Cookie存储Token在安全性和便利性方面的优势，为前端开发提供了完整的登录认证解决方案。
2025-09-17 20:43:36
987
原创 十、vue3后台项目系列——登录页面的搭建
本文介绍了登录页面的实现逻辑和代码示例。系统登录场景包括首次访问、token过期和用户主动退出三种情况。登录流程分为：登录前检查token有效性进行重定向，登录时处理表单验证和交互，登录后根据redirect参数跳转至目标页或首页。提供的Vue3代码示例包含表单验证、自动聚焦、登录状态管理等功能，并支持保存重定向路径。页面采用Element Plus组件，实现了响应式布局和美观的UI设计。核心逻辑是通过路由参数实现登录后智能跳转，提升用户体验。
2025-09-17 20:02:49
301
原创 九、vue3后台项目系列——tag标签逻辑
本文详细解析了基于Pinia的标签页状态管理实现。通过定义tagsViewStore，维护两个核心数组：visitedViews记录已访问标签页信息，cachedViews存储需要缓存的组件名。文章分三部分阐述：1）工具方法解析，包括Object.assign的复制合并、Promise的异步控制及数组操作方法；2）核心业务逻辑，涵盖标签页的增删改查操作，如添加视图(addView)、删除单个/其他/全部标签(delView/delOthersViews/delAllViews)及更新视图(updateVis
2025-09-15 22:05:43
733
原创 八、vue3后台项目系列——封装layout页面下切换组件Appmain
本文介绍了基于Vue3和Pinia的页面布局与标签页管理实现方案。核心组件AppMain通过<keep-alive>和<router-view>实现页面切换与状态缓存，并结合tagsViewStore模块管理标签页状态。主要功能包括：1）动态计算页面高度适配不同布局；2）使用Pinia集中管理标签页的访问记录和缓存状态；3）提供标签页的增删改查等操作方法。该方案通过组件化设计实现了响应式布局、标签页状态持久化和页面缓存优化，适用于管理后台类项目的多标签页场景开发。
2025-09-15 21:58:50
359
原创 七、vue3后台项目系列——包装scss、全句变量scss与导入
SCSS作为CSS预处理器，通过变量、混合宏、嵌套等特性显著提升开发效率。变量（$）实现全局样式统一管理；混合宏（@mixin）封装可复用样式逻辑；嵌套语法保持代码结构清晰。其模块化设计（@use/@forward）支持样式拆分，增强可维护性，而继承（@extend）和逻辑控制（@if/@for）则减少冗余代码。SCSS与现代构建工具（如Vite、Webpack）无缝集成，并能配合PostCSS增强功能。实际项目中，通过封装常用样式（如清除浮动、flex布局等）到mixin.scss，定义全局变量到vari
2025-09-15 20:08:34
942
原创 六、vue3后台项目系列——页面自适应设计+pinia，vuex的使用
Vue3项目中使用Pinia进行自适应布局的状态管理。文章介绍了通过监听窗口resize事件切换布局组件显示状态的基本思路，对比了Vuex和Pinia两种状态管理工具。Pinia作为Vue3官方推荐方案，具有API简洁、类型支持好、模块化自然等优势，适合新项目开发。老项目可继续使用Vuex，但新项目建议优先选择Pinia。
2025-09-15 15:38:34
631
原创 五、vue3后台项目系列——创建基础页面+router路由设置
在router配置文件中，有指定了每个页面的路径，将路径在浏览器地址上测试就好，看看页面内容有没有切换，没有正确切换就是没有配置好。在app.vue页面组件上设置，因为app是页面加载的第一个入口，而vue的思想就是单页面应用，我们就在这个第一入口设置就好。在src下创建就好， 其实router文件可以包含路由的模块文件，还要有一个控制整个路由的文件，即index.js。没有的页面的，可以先根据我的路由里面的页面，创建页面，不然没有页面，会报错。四、配置路由出口，即渲染的地方。五、测试配置的路由是否生效。
2025-09-15 14:45:38
698
原创 四、vue3后台项目系列——样式初始化（normalize.css）
为了防止一些默认的样式干扰，往往这些默认样式都不是我们需要的。我们先对其进行重置。最好先把初始化样式放在其他样式的前面，避免出现样式覆盖的行为。这里使用normalize.css。
2025-09-15 11:52:00
368
原创 三、vue3后台项目系列——更新vite配置、封装通用SVG组件、测试mock
本文介绍了前端项目中图标组件封装和Mock服务配置的实现方法。首先更新vite.config.js配置，添加路径别名和Mock服务支持，并集成SVG图标处理插件。然后封装SvgIcon组件，支持内部SVG雪碧图和外部URL两种方式，通过computed属性实现动态样式和图标处理。在utils中创建校验方法判断是否为外部图标。最后测试Mock服务，创建user.js模拟登录接口并验证请求功能。文章详细说明了各步骤的配置方法和实现原理，包括SVG图标的样式处理、Mock数据的定义等，为项目开发提供了便捷的图标管
2025-09-14 17:58:47
372
原创 二、vue3后台项目系列——安装相关依赖、项目常用辅助开发工具
本文介绍了Vue3后台项目开发的常用工具安装指南。主要内容包括：基础工具安装（SCSS/Sass编译器、ElementPlus组件库、VueRouter路由、Vuex状态管理）；其他工具安装（Axios网络请求、Lodash工具库、ECharts数据可视化等）。文章详细说明了每个工具的安装命令和基本配置方法，并解释了开发依赖和生产依赖的区别。最后建议根据项目需求选择合适工具，并进行统一封装以提升开发效率。
2025-09-14 14:30:29
1181
原创 一、vue3后台项目系列——先从创建vue项目开始
本文介绍了两种创建Vue3项目的方法：1）使用Vue CLI脚手架，通过npm安装后创建项目；2）推荐使用Vite构建工具，提供更快的开发体验。文章详细说明了每种方式的安装命令、项目创建步骤和运行方法，并简要介绍了Vue项目的基本目录结构。作者建议开发者采用Vite方式创建Vue3项目，因其具有更快的热更新和构建速度。
2025-09-14 13:55:50
210
原创 箭头函数和普通函数的区别
箭头函数：适合简单逻辑、不需要自己的this（比如回调函数、数组方法中的函数），语法更简洁。// 数组遍历（常用箭头函数）// [2,4,6]普通函数：需要this指向调用者（比如对象方法、构造函数）、需要arguments或prototype时。// 对象方法（用普通函数，确保this指向对象）num: 10,// this指向calculator记住：箭头函数的this是 “静态” 的（定义时确定），普通函数的this是 “动态” 的（调用时确定），这是最核心的区别。
2025-08-29 14:36:32
284
原创 Vue中的事件修饰符
Vue修饰符是简化事件处理的语法糖，主要分为三类：1）事件修饰符（.stop阻止冒泡、.prevent阻止默认行为、.capture捕获模式、.self自身触发、.once单次执行）；2）表单修饰符（.trim去首尾空格、.number转数字类型、.lazy延迟更新）；3）鼠标修饰符（.left/.right/.middle限制触发按键）。这些修饰符能替代原生JS代码，使Vue开发更简洁高效，如.stop代替e.stopPropagation()，.prevent代替e.preventDefault()。
2025-08-29 11:53:59
1219
原创 withCredentials（简单说：带不带凭证）
摘要： withCredentials是跨域请求中控制是否携带Cookie等凭证的配置项，默认关闭。开启后，浏览器会自动附加当前域下的Cookie和认证信息，适用于跨域登录和权限校验场景。使用时需后端配合设置Access-Control-Allow-Credentials:true，且响应头不能使用通配符域名。该配置仅影响跨域请求，同域请求自动携带凭证无需设置。服务器通过Set-Cookie种下凭证后，浏览器会在后续请求中自动附加，无需手动处理。本质是解决“跨域身份认证”的关键开关。
2025-08-29 11:08:05
1053
原创 Formdata表单数据提交
FormData是处理表单数据提交的专用"包装器"，特别适合文件上传和传统表单模拟。相比普通JSON格式，它能处理二进制文件、多选值等复杂数据，自动生成multipart/form-data格式。主要应用场景包括文件上传、复杂表单提交和跨域请求。通过append()方法添加键值对，支持文本、数字、布尔值、日期等多种数据类型。示例展示了如何将表单数据转换为FormData并通过axios提交，适用于需要兼容传统表单格式或文件上传的场景。对于简单文本数据，直接使用JSON更为简便。
2025-08-29 10:52:07
690
原创 vue数据同步（sync修饰符）
本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。随便在父组件其他地方绑定一个事件，看看有没有获取到从子组件里面获取到的值，因为要拿选择的值过来父组件这边使用。被执行时，父组件会自动接收到这个事件并更新。
2024-08-23 12:25:46
1154
原创 标题文字设置，根据不同的操作类型
在开发后台管理系统中，较常用的写法，简洁易懂。场景是，在点击新增或者编辑的时候，往往都是用的同一个表单，但是标题会根据是点击‘新增’还是‘编辑’操作来对应显示，当点击编辑时，表单的标题是‘编辑’，点击新增时，标题是‘新增’。
2024-08-20 10:49:42
322
原创 数据依赖，执行顺序，promise，async/await
假设我的数据依赖上一个数据才能执行，也就是某个操作（例如获取数据）可能依赖于另一个操作的结果。也就涉及到了处理异步操作。
2024-08-15 12:36:20
483
原创 vue中未能及时获取到props？
我首先描述一下我遇到的问题的经过，我有一个页面，页面里面有一个组件，而组件里面还有一个组件，在最后一层的组件中，当我尝试从上一层拿传过来的props之后，在mouted中进行使用该值的某一属性进行接口调用时，发现，在mouted中，页面初始化之后，未能及时更新最新的值，导致，在接口传值的过程中，传入了一个空对象，接口获取不到。简单来说，就props中的数据未能及时的得到传递。
2024-08-15 09:47:20
975
原创 Bearer身份验证机制
Bearer 是一种身份验证机制，通常用于 Web API 中的授权。它是 OAuth 2.0 协议的一部分，用于允许客户端应用程序代表用户访问受保护的资源。
2024-08-09 17:09:56
3413
原创 react使用Lodash 库实现根据数组内对象的某属性排序
Lodash 是一个现代 JavaScript 工具库，提供了许多常用的函数和实用工具，旨在简化编程过程中的常见任务。Lodash 的核心主要集中在数组、对象和函数的处理上，帮助开发者更高效地进行数据操作和变换。
2024-08-09 15:23:40
1313
原创 uniapp开发微信小程序获取头像（使用头像和昵称填写能力）
如果使用老版一点的弹起授权框进行授权获取头像和昵称的话，会由于基础库版本问题，显示不了，并且这个接口存在调整问题，不是很好搞！目前，我暂时采用这种方式，并且这个方式在真机调试中可以正常使用，所以我就先采用了这种方式。
2024-08-08 16:41:14
1981
4
原创 uniapp获取头像文件（二进制文件显示图片）
由于在获取头像文件过程中，传递参数之后，请求成功了，但是后端给我返回了一串二进制数据流，傻傻的我，以为是乱码，跑去问后端大哥，人家跟我说这不是二进制吗，突然就觉得自己傻傻的。首先，我把他封装成一个工具，方法调用，不然每次都在页面上写一堆，因为请求头像的地方挺多。代码写的还是有些问题，还有这个方法只是其一，等发现好一点的办法再更新！
2024-08-08 16:14:07
1384
原创 vue2，v-for中动态渲染本地的图片
如果是正常在img标签的src上使用本地的url地址，是可以正常被渲染的，但是我们通过for的形式，动态渲染的话，就会通过网络请求的方式进行渲染，这个形式反而渲染不出来。加个require就行了，他这个会去请求你的图片资源，不过里面的路径还是得按照相对路径来，如果是绝对路径也是不行的。这样却不行，效果就是裂开了，我人也跟着裂开！从网络请求上来看，也是不成功的请求：304。这个效果，毋庸置疑是比较常用的，是可以的。
2024-08-07 15:01:52
576
原创 uniapp（scroll-view）设置show-scrollbar无效
在uniapp中，使用scroll-view内置组件，我这里是把他弄成一个可以滑动的导航，设置show-scrollbar="false"之后，按道理来说应该可以了，这个官方提供的一个属性可以不显示滑动条。但是，发现，在微信开发者工具中不显示的滑动条，在真机调试上就显示，及其难看。找寻了好一会，发现这个代码可行。
2024-08-05 12:23:39
1969
2
原创 u-popup，不希望出现滚动条
在开发过程中使用u-view里面的u-popup，有时候会出现滚动条，比如我只想做一个弹窗，而不想弹窗中还有滚动条，在美观上过不去。并且内容也没多到需要滚动才能显示所有。竟然没了，那就是这个鬼margin捣乱的，但是我元素没有边距了，我使用padding给他撑开一下先，界定一下边界。再试下具体的margin？
2024-07-18 14:43:43
547
原创 通过方法返回类名？
有三种颜色，根据条件的不同，显示三种颜色，要是俩种还好说，可以利用三元运算符，默认给定一个颜色，另外一个通过类名绑定上去。要是，三种，或者很多种了，就算动态绑定，绑一大推在标签上又难看死！我是这么做的，通过动态绑定的方式，不过我是绑定一个方法，通过方法去判断，然后返回不同的类名，return出去。不复杂，就是给他绑定了一个方法，通过方法返回类名，看看就能懂。根据领取的状态不同，展示不同的颜色，这里就有三种。
2024-07-18 09:32:39
205
原创 uniapp页面跳转传参和动态修改NavigationBarTitle
比如聊天界面，需要在上方展示对方的名字，我们这样需要动态数值的，就不能写在pages配置项里面。
2024-07-16 12:15:50
1030
原创 nvm安装报错（镜像问题）
安装的时候如果跟着网上早些时候的配置，调整了setting文件，配置镜像的话，可能报这个错误。这个是因为他没检索到后面的链接地址，因为镜像的地址新的已经更换了。
2024-07-09 17:12:36
808
1
原创 实现多数相加，但是传的参不固定
在 JavaScript 中，arguments 是一个类数组对象，它包含了传递给函数的所有参数。它允许你在函数内部访问所有传入的参数，即使在定义函数时没有明确列出这些参数。这对于处理不固定数量的参数特别有用。
2024-07-07 18:01:24
353
原创 vue对axios进行请求响应封装
像是在一些业务逻辑上，比如需要在请求之前展示loading效果，或者在登录的时候判断身份信息（token）等信息有没有过期，再者根据服务器响应回来的code码进行相应的提示信息。等等在请求之前，之后做的一些逻辑，都可以通过二次封装axios请求，进行实现。这里是对axios封装的一种形式，有多种形式，具体要根据具体业务需求去定。不再啰嗦，直接上具体代码吧，供参考！创建一个文件夹用于存放接口的请求，到时候用起来，只需要导出请求的方法就行，统一管理。先从我们封装好的axios里面导出具体的请求方法。
2024-07-05 17:54:38
665
原创 设置路径别名
如果想要给路径设置为别名，就是常见的有些项目前面的引入文件通过@开头的，也就是替换了一些固定的文件路径，怎么配置。如果后面path报红，那就是 缺少ts的声明配置，给他加个声明就行了。
2024-06-10 16:12:12
587
原创 uniapp（微信小程序）退出小程序方法
场景是：当用户不予授权的时候，不允许使用该小程序，在用户点击取消之后，应该关闭当前小程序，不让他继续使用。在合适的地方调用该代码即可。成功退出会直接关闭当前小程序。
2024-05-25 14:25:28
3772
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人