草庐IT

vue-elementul

全部标签

vue3+动态路由

     动态路由,也就是不是写死的路由,根据自己的需求加载不同的页面;现在很多的后台管理项目就是根据用户角色的不同分配不同的功能菜单(页面);    根据用户登录的角色返回可以访问的页面路由,前端将路由存储到 pinia 实现持久话存储,然后在路由前置守卫用addRoute动态添加路由,对页面进行渲染。    通常的实现步骤:前端调用登录接口获取用户ID(uid)     前端用uid请求接口获取路由表(JSON)对路由表进行数据格式话形成树形结构树形结构转vue路由结构路由结构转 静态路由树形结构转 菜单组件 下面是我练习一个demo,仅用于学习与记录;服务端代码结构:     服务端在本

Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤,从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf)

目录一丶前言二、安装nginx1.准备nginx2.服务器上传nginx3.解压nginx 4.安装相关依赖库5.编译nginx6.启动nginx7.访问nginx 8.安装成系统服务三、安装Tomcat1.安装JDK(如果安装并配置环境变量了可以略过)2.准备Tomcat3.服务器上传tomcat4.解压tomcat 5.启动tomcat6.访问tomcat7.设置Tomcat开机启动 四、前端Vue打包1.配置文件.env.production2.配置vite.config.js文件3.配置reques.js4.配置router.js5.配置package.json五、后端SpringBo

Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景,处理方式也不外乎三个步骤:1.通过全局状态管理定义状态值(vuex、pinia等)。2.在程序主入口监听状态值变化,从而展示/隐藏laoding动画。3.在请求和相应拦截器中变更状态值。第一二步骤处理大同小异,但在第三步中,网上很多博文分享的方法是:在请求拦截中展示loading,在响应拦截器中判断收到成功响应时直接隐藏loading,这种方法看似可行但实际过程中却有问题。例如,假设在第0秒时同时向后台发送了两个异步请求A和B,由于网络或处理逻辑不同,A请求0.5秒秒收到成功响应,B请求2秒才收到。那在第0.5秒,响应拦截器就会把loading状态变

vue使用Axios详细流程

一、安装使用npm:npminstallaxios或使用yarn:yarnaddaxios二、配置Axios在src/plugins目录下新建axios.js文件,在该文件里对axios进行自定义配置,如下图: axios.js全部代码:"usestrict";importVuefrom'vue';importaxiosfrom"axios";//Fullconfig:https://github.com/axios/axios#request-config//axios.defaults.baseURL=process.env.baseURL||process.env.apiUrl||'';

计算机毕业设计springboot+vue基本微信小程序的汽车俱乐部系统

本文主要阐述了企业小程序系统的开发过程,从最初的系统分析、总体设计,到数据库设计,再到最后的系统的具体设计,分四大章分别做了详细的介绍。本小程序系统有着明确的设计目的和范围,简明的前台页面设计,强大的后台管理功能。前台界面主要是用微信开发工具进行设计。汽车俱乐部小程序主要是为了方便车主而建立的小程序系统。一切本着服务车主、方便车主的原则,以直观、快捷、友好的面向广大车主用户,提供了最及时的新闻,最体贴最人性化的服务,最有意思的活动,公司信息方面,则是透明的,全方位的向车主展示。后台方面,我们强大的后台管理系统也在不断的为车主们更新行业新闻和最新的公告。环境需要1.运行环境:微信开发者工具,最好

Vue基础17之配置代理

Vue基础17配置代理使用node启动两台服务器server1.jsserver2.js使用axios发送ajax请求安装axios库引入axios库发送axios请求App.vue跨域问题解决代理服务器开启:方式一代理服务器开启:方式二server1.jsserver2.jsvue.config.jsApp.vue总结:Vue脚手架配置代理方法一方法二github案例静态组件配置代理使用node启动两台服务器server1.jsconstexpress=require('express')constapp=express()app.use((request,response,next)=>{

Vue项目启动后跳转到制定路由页面

前言今天把自己的项目布局完成了,但是想在项目启动的时候默认跳转到登录页面。这其实需要借助路由实现跳转开始编写之前,大家可以看下我的布局:安装并使用路由关于如何安装并使用路由,可以参考:Vue安装并使用路由和路由器编写路由规则需要对index.js进行修改,根据需求配置需要跳转的那个组件的路由,我的需求已经很明确了,就是登录的组件。引入需要的组件//引入登录组件importLoginfrom'../pages/Login.vue'配置路由然后配置login组件的路由//登录组件路由{path:'/login',component:Login,name:"Login"},配置完login组件路由后

vue组件通信

父组件传值给子组件:props $parent 子组件传值给父组件:$emit$refs $children$attrs 进行跨层级传值,比如,爷爷组件传值孙子组件$listeners孙子传值爷爷slot 插槽传值bus 任意组件传值路由传参vuex目录1,父组件传值子组件props 2,子组件传值给父组件$emit3,通过refs进行组件传值子组件传值给父组件4,通过$parent进行父子传值5,通过$children进行子传父6,vue2.6以后插入具名插槽不包含2.60!!!!!!!!7,$attrs进行爷孙传值1、爷爷组件传递给父组件四个值2、父组件接收一个,剩余的三个不接收3、孙子组

【源码系列#01】vue3响应式原理(Proxy)

专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核💪推荐🙌欢迎各位ITer关注点赞收藏🌸🌸🌸在学习Vue3是如何进行对象的响应式代理之前,我想我们应该先去了解下ES6新增的APIProxy与Reflect,可参考【Vue3响应式入门#02】ProxyandReflect。之后我们再手写下reactive和effect的源码Reactive定义:接收一个普通对象然后返回该普通对象的响应式代理。等同于2.x的Vue.observable()constobj=reactive({count:0})响应式转换是“深层的”:会影响对象内部所有嵌套的属性。基于ES

Vue3问题:如何实现微信扫码授权登录?

昨天搞了个服务器,腾讯云的轻量应用服务器,价格还算实惠。又搞了个自己的域名,但在起名字时犯了难,想了半天都不知道叫啥,后来还是感谢对象的指点,哈哈哈。拥有了自己的服务器,接下来,就可以开始我的后端微服务学习啦,加油共勉。一、需求分析,问题描述1、需求微信扫码授权,如果允许授权,则登录成功,跳转到首页。2、问题微信扫码授权有几种实现方式?说一下这几种实现方式的原理是什么?vue中的微信扫码授权登录,与uniapp和原生小程序的微信授权登录,它们之间有共同点吗?二、解决问题,答案速览1、网页跳转式前端只需调用后端微信登录的接口即可。生成微信二维码、传递code参数等操作都在后端处理。2、网页内嵌式