![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
文章平均质量分 83
张乔24
软件工程25届,用心记录学习过程
展开
-
前后端分离的后台管理系统开发模板(带你从零开发一套自己的若依框架)上
目前,前后端分离开发已经成为当前web开发的主流。目前最流行的技术选型是前端vue3+后端的spring boot3,本次。就基于这两个市面上主流的框架来开发出一套基本的后台管理系统的模板,以便于我们今后的开发。前端使用vue3+element-plus开发。后端使用spring boot3+spring security作为项目的支撑,使用MySQL8.0.30作数据存储,使用redis作缓存,使用minio作为项目的存储机构。后台管理系统是非常的,本项目使用市面上最流行的RBAC模型。原创 2024-06-29 21:58:19 · 797 阅读 · 0 评论 -
在vue3项目中设置错误路径的统一跳转
在我们前端开发过程中,如果,访问到了错误的或者不存在的路径,那么会直接出现空白。在一个完整的项目中,应该给用户一些友好的提示,显示他访问到了错误的页面。我们可以专门的创建一个错误界面的.vue文件,并在创建路由时,指定所有错误的路径都直接显示这个错误界面,这样就对我们的使用人员非常友好了。当然,我这个错误页面就显得非常粗糙了,如果,你可以自己设置一个错误页面的组件。这样,当用户访问项目中不存在的路径时,就会自动跳转到 404 页面,并显示相应的错误信息。可以看到正确的显示出了,我们想要的结果。原创 2024-04-29 13:34:02 · 380 阅读 · 0 评论 -
前后端分离项目中实现图形验证码
图形验证码在我们的日常生活中时经常用到的,一般用于用户的登录、注册等。图形验证码在互联网应用中的作用是提高安全性、防止滥用和保护用户隐私。它是一种简单而有效的人机验证技术,帮助保护系统和用户免受自动化攻击的影响。本次我们通过spring boot后端项目生成图形验证码,通过vue3前端项目来展示验证码;在vue3前端项目中新建一个Captcha.vue文件,用来展示图形验证码。新建一个spring boot后端项目,并引入hutool依赖,来提供图形验证码。原创 2024-01-22 14:03:18 · 2067 阅读 · 0 评论 -
vue3中路由守卫的快速上手
路由守卫或者说路由拦截,在我们实际开发前端项目中是经常用到的操作;通过路由守卫,可以在用户访问某个路由之前进行权限验证。(全局前置守卫)例如,可以检查用户是否登录,是否具有访问该路由的权限,如果不满足条件,则可以将用户重定向到其他页面或显示相应的提示信息。原创 2024-01-09 22:56:05 · 1417 阅读 · 0 评论 -
vue3中路由的使用(详细讲解)
在前端或者vue3项目中路由主要用于构建单页面应用程序(SPA),其中所有的页面都在同一个HTML文件中加载,通过JavaScript动态地切换显示不同的内容。路由器(Router):路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。请着重注意,路由器(Router)与路由(Route)的区别。路由器是用来管理路由的,你也可以理解为路由的集合。如果将一个一个的路由比作学生,那么路由器就是老师,负责管理所有的路由。原创 2024-01-08 10:32:01 · 8353 阅读 · 5 评论 -
vue3项目中axios的常见用法和封装拦截(详细解释)
Axios是一个基于Promise的HTTP客户端库,用于浏览器和Node.js环境中发送HTTP请求。它提供了一种简单、易用且功能丰富的方式来与后端服务器进行通信。能够发送常见的HTTP请求,并获得服务端返回的数据。此外,Axios还提供了许多其他功能,例如设置请求头、处理并发请求、拦截请求和响应等。你可以在Axios的官方文档中了解更多详细信息:注意:在发送真实的HTTP请求时,请使用适当的URL,并根据需要进行错误处理和数据处理。Axios的官网:Axios。原创 2024-01-05 17:16:19 · 2395 阅读 · 0 评论 -
vue3中pinia的使用及持久化(详细解释)
Pinia的核心思想是将所有状态存储在单个store中,并且将store的行为和数据暴露为可响应的API。新建一个counter.ts文件,在这个文件中定义一个变量count,使这个count变量能被所有的组件共享,并修改其值;引入了pinia的持久化插件之后,我们再刷新页面,那么piniade的store函数中的数据也就持久的保存了。:是pinia使用中必须要引入的一个函数,它是用于定义一个新的store的函数。函数进行定义,并传入一个配置对象来描述store的行为和数据。原创 2023-12-31 15:43:44 · 2098 阅读 · 0 评论 -
vue2和vue3生命四种周期函数的比较(详细讲解)
vue组件实例在创建时要经历一系列的初始化步骤,在这个过程中vue会在合适的时刻,调用特定的函数,从而让开发者有机会在特定的阶段运行自己的代码,这些特定的函数称为:生命周期函数生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁。每个阶段都有两个钩子,一前一后。vue3中“创建”只有一个函数了,并且要用到的生命周期函数都要自己先进行引入才能使用。常用的生命周期函数也就:onMounted(挂载完毕)onUpdated(更新完毕)onBeforeUnmount(卸载完毕)原创 2023-12-24 15:00:18 · 1360 阅读 · 0 评论 -
vue3的两种写法(组合式和选项式)
数据、方法、计算属性等,是分散在:data、methods、computed中的,如果想新增或者修改一个需求,就需要分别修改:data、methods、computed。相比较于传统的vue2的“选项式”写法,“组合式”更加的简便。总结来说:组合式写法更加灵活和可维护,我们在书写复杂的项目时,应该首选组合式写法,这也是vue官方推荐的写法。其他的组件都会直接或间接的被导入到App.vue组件中,这时就可以继续追踪其他的组件或直接显示其组件的内容了。记数: {{ count }}姓名: {{ name }}原创 2023-12-19 20:50:11 · 2079 阅读 · 0 评论 -
使用node.js创建一个vue3前端项目(详细入门)
本次演示如何使用node.js来创建一个vue3前端项目,并能在VScode中打开并编辑。原创 2023-12-17 15:34:49 · 3703 阅读 · 1 评论