- 博客(137)
- 收藏
- 关注
RSS订阅原创 实现基于Vue的后台管理系统权限控制与动态路由
在开发后台管理系统时，权限控制是不可或缺的一部分。本文将详细介绍如何使用Vue实现根据不同角色动态生成路由，从而控制用户访问权限。
2025-03-31 17:51:47
353
原创 vue搭建一个树形菜单项目
首先搭建项目需要先通过步骤搭建一个vue的项目，然后创建一个component文件，里面新建一个index.vue页面来。这是引入的element-ui组件库里的组件，来实现我的路由，渲染的是我存储的动态路由，所以需要先安装并且引用。这部分代码是用来布局菜单框架结构的，然后我们在路由部分引入这个文件的路由即可。
2025-03-29 17:54:52
547
原创 vue如何实现前端控制动态路由
在 Vue.js 中，动态路由是一种根据不同用户权限或其他因素动态改变路由列表的功能。这种机制允许开发者根据后端提供的权限数据动态渲染前端路由，实现多用户权限系统，不同用户展示不同的导航菜单。通常，动态路由的数据存储在数据库中，前端通过接口获取当前用户对应的路由列表并进行渲染。最后，总结整个流程，强调关键点，帮助用户全面理解路由守卫的工作机制和实现动态路由加载的正确方法。动态添加路由，先清空已有的动态路由，然后再调用添加路由的函数进行添加，：在用户登录后，前端调用后端接口获取用户对应的权限类型role。
2025-03-29 15:22:22
354
原创 uniapp通过概率实现一个随机抽奖
在很多电商平台或者活动中，都会有类似“抽奖赢优惠券”的功能。这个功能通常要求用户通过某些随机算法来决定是否中奖以及获得的优惠券内容。实现这一功能时，如何正确地处理中奖概率、抽取优惠券并返回抽奖结果是一个常见的问题。本文将介绍如何通过一些代码操作逻辑实现一个抽奖系统，模拟从接口获取优惠券，并基于优惠券的中奖概率来判断是否中奖。首先需要从接口获取优惠券数据。然后通过生成一个随机数，并与优惠券的中奖概率进行比较来判断是否中奖。如果中奖，渲染相应的优惠券信息；否则显示未中奖消息。
2025-02-24 13:54:56
430
原创 微信自定义键盘-仿制微信数字的光标支付键盘
自制一个uniapp仿制微信的光标支付键盘，在制作聚合支付项目时需要用到这个支付的键盘，在写这部分的时候改了好多遍问题，所以特地用博客记录下来。写的代码判断的有点多可能逻辑不是很好，但是功能是都实现了的。我是一个数组来循环页面上的金额，通过绑定点击事件后可以获取当前金额的下标位置，通过这个位置向其数组添加和删除光标。在这里我就不写过多样式了，我就把金额显示的部分和键盘部分展示出来。效果就是可以通过设置光标的位置进行添加减，键盘的滑动弹出和隐藏的动画。
2025-02-24 09:41:18
318
原创 uniapp实现网页（H5）的微信支付功能
首先，代码通过发送一个 POST 请求到后端的接口，向后端传递必要的参数。这些参数是支付请求的基础信息，后端返回的数据会包含微信支付需要的具体信息。如果该对象存在，说明是在微信环境中运行，这时可以直接调用微信的支付接口；在这个请求成功后，后端会返回一个包含支付所需参数的响应数据（appId。例如，在请求支付接口时，使用。支付时，需要确保当前的环境是微信浏览器，所以需要判断。注：这是我在请求支付的接口成功之后再进行判断环境的。这些信息是微信支付接口调用时所必需的。函数，传入从后端获取的支付参数，调用。
2025-02-23 17:41:34
907
原创 微信小程序开发笔记（一）如何使用downloadFile下载文件
比如提示用户下载会受到浏览器限制，或者直接跳转到下载链接等就直接使用浏览器打开window.open(courseDetail.file, '_blank');在浏览器打开的项目下载文件时就会遇到这个跨域问题，但是在移动端就就不会出现，因为这个打开的我也不是h5平台。下载的点击事件 ，实现下载文件（docx，mp4，pdf等文件），下面来具体分析一下代码步骤。这是完整的一个文件下载代码。以下代码分步骤是实现了文件的下载，使用downloadFile的接口。需要在函数外部被定义，并且包含有效的下载链接。
2025-01-10 08:58:12
1389
原创 在uniapp中如何自定义一个图标
然后还有就是图标它可能会变成一个方块，我在项目中遇到过这个问题，于是我把标签内带有custom-prefix="custom-icon"的这个属性给删掉了，它也就恢复到原本的样式了。不知道什么原因但是这也算是一个解决办法。在我的自定义图标中type是icon-xiaolian文件的css是这个样子，我上面下载过来的是其他的图标文件，只不过里面有直接引入的路径地址，给大家演示步骤的时候比较典型。已经收录了日常开发中常用的图标 ，但是因为体积问题 ，不可能一直无限添加新图标 ，所以。也提供了扩展的方法。
2024-12-27 08:12:14
685
原创 如何解决“Error: xxx.js 已被代码依赖分析忽略，无法被其他模块引用”报错？
然后来回勾选几次就可以了，如果还是不行，就把微信公众平台给关了，重启重新打开一下就可以了。最简单直接的办法就是打开微信开发平台，然后。
2024-12-25 20:43:22
1008
原创 在react中使用组件的标签页写订单管理页面
首先呢我需要一个来渲染标签标题的一个数组。但是可以更便捷的方法就是直接将数组写入tabs标签内就进行遍历渲染。在制作商城类的项目中，成功购物后，会生成订单，我们跳转到订单页面后就会需要使用这个标签页的组件。属性绑定一个函数，该函数在标签被点击时调用，并传入当前遍历到的标签配置对象。这样，用户就可以通过点击不同的标签来查看不同状态下的订单信息。：首先，通过定义一个数组，其中每个元素都是一个对象，包含。属性或用户点击事件来显示或隐藏不同的。属性分别由当前遍历的元素决定。属性，来定义不同的标签。
2024-12-22 18:36:58
229
原创 微信小程序实现二维码海报保存分享功能
首先在写这个二维码分享海报的时候试过很多方法，比如：canvas中的这个createCanvasContext创建上下文的方法，去网上一搜就是一大堆，但其实这个方法已经被废弃了。二维码的话我是使用qrcode库来绘制的，首先需要下载一个weapp.qrcode.esm文件，然后在我需要绘制二维码页面的js中引入。然后引入进去之后先写我们的wxml，绘制二维码的canvas需要设置canvas-id，这个不能相同。这是绘制背景图的时候用到的这个方法，下面首先看我的二维码是如何实现的。
2024-12-22 13:20:19
727
原创 微信小程序实现蓝牙开启自动播放BGM
然后大概就没有什么了，在搜索蓝牙时蓝牙未开启，我给的提示是一个确认取消弹窗用的是 wx.showModal，在上面完整实例中，自行查看。然后在点击确认和取消的时间处理，是在它返回的success成功回调函数中，再判断是确认还是取消就继续自己的代码操作即可。然后下面这串代码我是写的一个在项目和总完整的一个流程，写在onload中的，接口请求的是一个需要播放音频的一个数据，但是音频是无法播放的，所以最后mp3还是自己找了一个音频。（写在onload中）监听手机蓝牙状态的改变，也可以调用蓝牙模块的所有API。
2024-12-22 08:29:19
1281
原创 vue中如何实现商品多规格添加（后台商城管理系统）
在制作商城类的后台管理系统中会遇到多规格商品的添加，需要向固定的数组内添加，通过查看数据结构正确的向数组中添加数据。
2024-12-21 08:11:45
435
原创 vue中验证码的实现方式
我在写登录页的时候通过将登录框，验证码分开页面来写，最后将它们变成标签来导入到我的样式页面中，这样写不仅方便，更容易修改代码，很便捷。然后changeCode就是每次触发验证码的事件，它都会重新生成一个新的验证码，当然如果在输入验证码错误的时候就需要调用这个验证码重新生成。然后下面这里是验证码的逻辑，比如验证码的初始值或者它的生成范围，可以只生成数字或者字母。最主要的就是这一生成验证码的部分，直接复制就可以，它是通过canvas来进行绘制的。然后将验证码绘制的图形，通过组件的形式放入输入框的页面中。
2024-12-21 08:10:52
757
原创 关于渲染图片后发生加载失败如何解决
接着再进行判断接口数据中的路径里是否含有错误的路径，当这个判断成立时就使用replace这个方法，替换成正确的路径。当然如果接口数据里多了一个路径的话，那么使用replace第二个参数就可以为空，这样可以直接删掉错误的路径。如上述代码来看，我是直接写在了行内，defaultImage这个变量，是我在页面上直接导入了一张图片路径。这个getAvatar这个函数我写在了动态src中，然后里面传递了一个参数，传了当前这条数据的，然后在这个函数内可以获取到当前这个图片avatar。如果不正确就需要先尝试替换路径。
2024-12-21 08:10:05
199
原创 在react中使用组件的标签页写订单管理页面
首先呢我需要一个来渲染标签标题的一个数组。但是可以更便捷的方法就是直接将数组写入tabs标签内就进行遍历渲染。在制作商城类的项目中，成功购物后，会生成订单，我们跳转到订单页面后就会需要使用这个标签页的组件。属性绑定一个函数，该函数在标签被点击时调用，并传入当前遍历到的标签配置对象。这样，用户就可以通过点击不同的标签来查看不同状态下的订单信息。：首先，通过定义一个数组，其中每个元素都是一个对象，包含。属性或用户点击事件来显示或隐藏不同的。属性分别由当前遍历的元素决定。属性，来定义不同的标签。
2024-12-10 16:59:59
378
原创 JavaScript中every方法（解析与示例）
这个every方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。如果有任何一项测试未通过都会返回false值。
2024-12-10 15:42:36
3009
原创 JavaScript中every方法（解析与示例）
这个every方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。如果有任何一项测试未通过都会返回false值。
2024-12-09 20:11:14
331
原创 React介绍
在React中，组件是构建用户界面的基本单元，它们可以是函数或类，负责接收输入（通常是“props”）并返回React元素树，描述了屏幕上应该看到的内容。这是使用JavaScript函数定义的组件。通过更新组件的状态，可以触发组件的重新渲染，从而更新用户界面。生命周期方法：类组件具有生命周期方法，这些方法在组件的不同阶段（如挂载、更新和卸载）被调用，允许开发者在这些阶段执行特定的操作。总的来说，React组件是构建React应用程序的基础，通过组合和重用组件，开发者可以高效地创建出复杂且动态的用户界面。
2024-12-09 08:05:03
554
原创 Vue--------导航守卫（全局，组件，路由独享）
全局前置->路由独享->进入组件前->路由改变但是组件复调用->离开组件之前->全局后置守卫。beforeRouteUpdate 路由改变但是组件复调用。beforeRouteEnter 进入组件前。beforeRouteLeave 离开组件之前。afterEach 全局后置守卫。beforeEach 全局前置守卫。beforeEnter 路由独享守卫。
2024-12-09 08:03:53
191
原创 element plus 可选择树形组件(el-tree) 怎样一键展开/收起？实现方法详解
的store中找到 _getAllNodes 属性。打印上面的 folderTreeRef ，可以从。在ref中绑定folderTreeRef。
2024-12-07 20:05:45
599
原创 vue渲染时闪光白屏问题怎么解决（笔记）
Vue渲染时出现闪光白屏问题，可能是因为页面内容需要较长时间才能加载完成，而在加载期间，页面会显示白屏或者空白内容，给。在样式中写 v-clock {displa：none！
2024-12-07 20:05:13
324
原创 vue -- 单页面应用和多页面应用区别及优缺点
Vue单页面应用（SPA）和多页面应用（MPA）是两种常见的前端应用架构模式，它们在开发方式、性能以及用户体验方面有着不同的特点。
2024-12-07 20:04:36
496
原创 项目上传至宝塔报错“Failed to load resource: the server responded with a status of 404 (Not Found)”
在使用vue-next-admin这个框架的时候，将项目打包上传到宝塔上过后，也配置反向代理了，但是打开就是空白页面，并且报错。在项目中搜到了这个名字，env文件夹里我注释了这段代码过后，又重新打包上传了一下宝塔，项目就可以正常显示了。注意：如果路径错误，可以根据实际情况修改路径。确保资源文件存在：检查资源文件是否存在于指定的路径中。这个文件路径，我没有这个文件为这个，所以我在项目中搜了一下这个名字。翻译为：加载资源失败：服务器响应404（未找到）状态。可能就是因为图片路径错误，看了后面路径，它多了一个。
2024-11-24 21:54:11
1824
原创 如何声明一个类？类如何继承？
在上面的示例中，我们首先声明了一个 Animal 类，包含了一个构造函数和一个 speak 方法。在子类的构造函数中，通过 super() 调用父类的构造函数，并可以在子类中重写父类的方法。需要注意的是，在子类的构造函数中必须先调用 super()，这样才能正确地初始化父类的属性。另外，如果子类定义了与父类同名的方法，在子类实例调用该方法时会优先调用子类的方法而不是父类的方法（即发生方法覆盖）。通过继承，子类可以复用父类的属性和方法，并且可以添加自己特有的属性和方法。这样可以提高代码的可维护性和可扩展性。
2024-11-23 23:41:35
133
原创 vue中v-if和v-for优先级
注意，如果想要根据每个元素的不同条件进行渲染，可以在。的父元素上，这样可以根据每个元素的不同条件进行渲染。这意味着在同一个元素上使用。将首先被解析，然后是。
2024-11-23 23:40:20
294
原创 vue中常用的指令和自定义指令
在Vue中，常用的指令有v-bind、v-on、v-for、v-if、v-show等。自定义指令可以通过Vue.directive()方法来创建。以上代码示例中，v-highlight是自定义的指令，它会将元素的背景颜色设置为指令的参数值。v-show：用于根据条件展示或隐藏元素。v-bind：用于动态绑定HTML属性。v-on：用于监听DOM事件。v-for：用于循环渲染列表。v-if：用于条件渲染。
2024-11-23 23:39:42
158
原创 使用moment回显出现Invalid Date的问题如何解决？
一般在使用 moment 后遇到的问题，这通常是意味着传递给 moment 的日期字符串格式与 moment 所期望的格式不匹配（通俗来讲就是你传递的格式与你数据的格式不一致而导致的）又或者说是日期字符串它本身就是无效的。
2024-11-21 21:49:14
680
原创 React中Ant Design组件日期编辑回显
通常， RangePicker 组件期望接收一个数组作为值，这个数组包含两个元素:开始时间和结束时间(都是 moment对象或者可以被 moment 解析的字符串格式)。具体报错我下一篇博客会写到，这些都是我在写项目中遇到的问题，虽然算不上什么大问题，但是在制作项目时也是印象深刻，为了避免以后再因为忘记或者粗心遇到此类问题，就先记录下来！这个编辑事件绑定后，为了将日期数据会先到RangePicker组件，需要确保itemDate字端被正确设置，其格式应该和itemDate组件的格式是一样的。
2024-11-21 21:05:40
1033
1
原创 高阶组件怎么实现？
在上述代码中，我们定义了一个名为withBackgroundColor的高阶组件函数。这样，WrappedComponent就具有了额外的功能，即设置背景颜色，并将其传递给被包装的MyComponent组件。它本质上是一个接收一个组件作为参数，并返回一个新的包装组件的函数。在高阶组件内部，我们返回一个匿名类组件，该组件会渲染一个带有指定背景颜色的div元素，并将传递给高阶组件的props传递给被包装的组件。然后，我们定义了一个普通的组件MyComponent，它接收一个name属性并渲染相应的内容。
2024-11-17 09:00:00
270
原创 vue路由的钩子函数?
beforeEach(to, from, next)：在路由切换开始时被调用，可以用来进行全局的导航守卫，如权限验证等。调用 next() 继续导航，调用 next(false) 中止导航，调用 next('/path') 跳转到新的路径。在 Vue 中，路由的钩子函数可以用来在导航过程中执行一些操作，比如进行权限验证、页面加载前后的处理等。beforeResolve(to, from, next)：在导航被确认之前和所有组件内守卫和异步路由组件被解析之后调用。详细的用法和更多选项可以查阅。
2024-11-17 02:24:29
495
原创 vue组件的select怎么赋值？
在上面的示例中，我们定义了一个 selectedFruit 数据，用于保存用户选择的水果。在 HTML 模板中，我们使用了 <select> 元素，并通过 v-model="selectedFruit" 将用户的选择与 selectedFruit 数据进行了双向绑定。当用户进行选择时，Vue 会自动更新 selectedFruit 的值，从而实现了赋值的功能。在 HTML 模板中使用 <select> 元素，并通过 v-model 指令将用户的选择与定义的数据进行绑定。
2024-11-17 02:19:28
273
原创 React项目创建成功后启动白屏问题
我安装这个框架选择安装complate（完整版），安装过后启动发现是白屏，然后旁边还有报错。把最顶部config文件夹里的rourte.ts路由中的register下面的。给注释掉或者删除然后就ok了。
2024-11-14 17:55:43
450
原创 如何创建React项目步骤及问题
我在选择过后回车它会出现一串红色的英文句子‘No change to package... ...’这样的我们直接安装依赖即可。出现这样的模式就是创建并且初始化好了，然后通过打开命令npm statr运行就好了。下面那很大的一个报错我每次创建的时候都踩坑，注意我是的文件路径是在。等待它运行完之后会出现这个选项（简单/复杂）进行选择然后回车就好。，安装依赖要在你通过以上操作创建的文件里安装，所以要格外小心。在此我前进了一个文件后输入命令安装依赖了然后就正常运行了。中，这个是我要放创建的文件的一个文件。
2024-11-14 16:47:26
302
原创 关于报错‘cross-env‘ 不是内部或外部命令，也不是可运行的程序
'cross-env' 不是内部或外部命令，也不是可运行的程序 或批处理文件。在使用ANT DESIGN PRO这个react框架时出现了。
2024-11-12 16:31:12
902
原创 vue单页面应用？
在 Vue.js 中，单页面应用 (SPA) 是一种 Web 应用程序，它在加载初始页面后，通过动态地更新页面的内容而不是通过重新加载整个页面来实现用户导航和交互。组件通信：通过 props 和 events 实现组件之间的通信，父组件可以向子组件传递数据，子组件可以通过 events 向父组件发送消息。总的来说，Vue.js 提供了丰富的工具和功能来帮助开发者构建高效的单页面应用，同时也提供了良好的文档和社区支持，使得开发过程更加顺畅。这样可以使代码更加清晰，易于维护和复用。
2024-10-15 23:53:39
193
原创 ref和reactive的区别？
在响应式编程中，数据的变化会自动地传播给依赖于该数据的其他部分，从而实现数据的自动更新和同步。Reactive 编程通常使用观察者模式或者流式编程来实现，比如在 Vue.js 中就使用了响应式数据和计算属性来实现数据的自动更新。在编程中，我们可以通过引用来访问、修改特定的数据。Ref 通常用于管理和操作数据的引用，比如在 React 中使用 Ref 来访问和操作 DOM 元素。因此，Ref 主要是对数据的引用进行操作，而 Reactive 则是一种编程范式，强调数据之间的依赖关系和自动更新。
2024-10-13 14:45:00
280
原创 webpack和vite的区别？
综上所述，Webpack适用于复杂的项目和需要更多配置和插件支持的场景，而Vite则适用于快速原型开发、小型项目或者对构建速度要求较高的场景。内置了一个基于原生 ES 模块的开发服务器，它使用浏览器原生的模块解析，无需打包，可以直接运行源代码，从而提供了更快的开发环境。采用了即时编译的方式，通过利用现代浏览器的原生 ES 模块支持，可以实现秒级启动和热更新的开发体验，因此在开发过程中更快。的配置更为简单，它的默认配置已经足够满足大多数项目的需求，无需过多的配置。相对较新，生态系统和插件支持相对较少。
2024-10-13 12:30:00
334
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人