-
2018-04-08 16:29:25
现象描述
当页面加载的时候,一直显示“数据加载中”的loading。
解决方案之一
出现这样的原因,可能是该页面同时在加载两个或者两个以上的api数据请求,即多次调用后台接口。
解决思路: 同步执行,即是一个方法接一个方法的执行。
示例
(一)一直出现 数据加载loading 示例代码:
mounted() { this.bug1(); this.bug2(); this.bug3(); }, //连接api函数 bug1() { this.$http.post(this.HOST + '/cust/action1.do', { 'projid': this.$store.state.core.loginFormInfo.projId, 'custid': this.clientId }, { emulateJSON: true }).then((response) => { if(response.data.success) {} if(!response.data.success) {} }) }, bug2() { this.$http.post(this.HOST + '/cust/action2.do', { 'projid': this.$store.state.core.loginFormInfo.projId, 'custid': this.clientId }, { emulateJSON: true }).then((response) => { if(response.data.success) {} if(!response.data.success) {} }) }, bug3() { this.$http.post(this.HOST + '/cust/action3.do', { 'projid': this.$store.state.core.loginFormInfo.projId, 'custid': this.clientId }, { emulateJSON: true }).then((response) => { if(response.data.success) {} if(!response.data.success) {} }) },
(二)解决方案 示例代码:
mounted() { // 1.先执行第一个 this.bug1(); }, bug1() { this.$http.post(this.HOST + '/cust/action1.do', { 'projid': this.$store.state.core.loginFormInfo.projId, 'custid': this.clientId }, { emulateJSON: true, async: false, }).then((response) => { // 2.执行第二个 this.bug2() } if(!response.data.success) {} }) }, bug2() { this.$http.post(this.HOST + '/cust/action2.do', { 'projid': this.$store.state.core.loginFormInfo.projId, 'custid': this.clientId }, { emulateJSON: true, async: false, }).then((response) => { // 3.执行第三个 this.bug3() } if(!response.data.success) {} }) }, bug3() { this.$http.post(this.HOST + '/cust/action3.do', { 'projid': this.$store.state.core.loginFormInfo.projId, 'custid': this.clientId }, { emulateJSON: true, async: false, }).then((response) => { if(response.data.success) {} if(!response.data.success) {} }) },
即是:三个在
mounted()
中的执行的请求后台api函数 依次 一个一个 执行。更多相关内容 -
VUE UI项目管理器一直加载
2022-03-10 20:34:23初学vue时,遇到了项目管理器一直加载的问题,如图所示: 网上搜到的修改.vuerc文件中的"useTaobaoRegistry": true为false没能解决问题。经过反复尝试后,发现是在因为以管理员身份运行了命令提示符。如果不以管理...初学vue时,遇到了项目管理器一直加载的问题,如图所示:
网上搜到的修改.vuerc文件中的"useTaobaoRegistry": true为false没能解决问题。经过反复尝试后,发现是在因为以管理员身份运行了命令提示符。如果不以管理员身份运行cmd.exe,就能很快地完成加载。
-
安装vue后执行vue ui后在进入vue管理器后一直加载
2021-07-01 23:08:18安装vue和客户端后,在cmd里执行vue ui后一直在这加载,跪求大神告知,救救孩子吧 -
详解vue 项目白屏解决方案
2021-01-21 12:14:49在做的项目是使用 vue-cli 脚手架为基础的,只能使用微信浏览器打开的。在某次更新功能代码后,被反馈在一些手机上会出现白屏。经过一番探索,多管齐下解决了问题 白屏可能的原因: es6 代码没有被编译成 es5 ; ... -
vue-router路由懒加载和权限控制详解
2020-08-28 13:42:55主要介绍了vue-router路由懒加载和权限控制的相关资料 -
VUE页面中加载外部HTML的示例代码
2020-08-29 08:50:40本篇文章主要介绍了VUE页面中加载外部HTML的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
今天使用vue可视化工具创建vue项目时,一直卡住不动,无法创建的解决办法
2020-09-01 12:38:29今天使用vue可视化工具创建vue项目时,一直卡住不动,无法创建的解决办法: 步骤一:根据以下路径找到以下文件(我的node.js是默认安装在了c盘) 步骤二:打开此文件,修改useTaobaoRegistry为true,保存关闭,重新... -
已经配置好的空vue项目.zip
2021-04-06 18:28:45已经配置好 路由管理/vuex/饿了么ui等,下载好直接 npm install 加载依赖包即可运行 -
vue项目中触底加载的实现
2021-07-25 21:49:24通过vue开发的移动端项目中,经常会有触底加载的需求。该需求可以通过vue-scroller实现。 安装 通过下面的命令来进行安装: npm install vue-scroller -S 配置 安装完成后可以通过下面的方式在项目中进行配置。 在...说明
通过
vue
开发的移动端项目中,经常会有触底加载的需求。该需求可以通过vue-scroller
实现。安装
通过下面的命令来进行安装:
npm install vue-scroller -S
配置
安装完成后可以通过下面的方式在项目中进行配置。
在
main.js
中配置方式如下:import VueScroller from 'vue-scroller' // 触底加载 Vue.use(VueScroller) // 使用组件
使用方式
使用方式非常简单,只需要使用
scroller
放在所有的组件外层。
如下:<scroller :on-refresh="refresh" :on-infinite="infinite"> <!-- content goes here --> </scroller>
可以在methods里面设置好callback。
refresh() { console.log(123) }, infinite(done) { // console.log(456) setTimeout(function() { console.log(456) done(456) }, 1000) }
完整的参数如下:
点击这里查看更多详细的内容。
-
vue项目首屏打开速度慢的解决方法
2020-12-07 06:13:19最近接手了一个后台管理系统,技术栈主要是vue全家桶+elementui,老大打开测试环境页面的时候,说看到首页需要6秒钟,那如何进行优化呢? 首先我们需要安装webpack-bundle-analyzer // webpack.prod.conf.js if ... -
vue项目加载之前添加加载动画
2019-04-26 13:35:24如何在组件页面添加加载之前的动画是加不了的,因为动画也是基于html,css,所以需要在index.html文件里面添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=... -
vue初始化项目.txt
2020-08-04 21:38:312、npm包管理器,是集成在node中的,所以安装了node也就有了npm npm -v 验证 3、安装cnpm npm install -g cnpm --registry=http://registry.npm.taobao.org (完成之后,我们就可以用cnpm代替npm来安装依赖包了... -
vue项目优化首屏加载速度
2022-04-26 16:30:15背景:后台管理系统部署到线上环境后,清空浏览器缓存,第一次加载时,加载速度达到了9秒之久。 从上面请求的接口可以看出来,第一次请求主要是app.js文件和chunk-libs.js文件,和一些element的第三方组件库请求... -
基于Vue的信息管理系统
2019-06-20 14:17:55插件:vue-preview (vue图片预览组件 ) vue点击图片预览放大(可旋转、翻转、缩放、上下切换、键盘操作) 插件viewerjs GitHub地址:https://github.com/fengyuanchen/viewerjs 加入全局方式的loading: ... -
使用Vue ui创建项目,一直刷新
2021-12-23 19:02:22进入D盘,再启动 vue ui -
vue 项目首次打开时加载速度很慢的优化方案
2019-02-20 09:36:211、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题 当你的 SPA(单页应用程序)变得很复杂时,打包构建后的 js 包会变得非常大,以至于严重影响页面的加载时间。vue-router 支持 webpack 内置的... -
VUE项目初加载页面闪烁问题
2022-03-24 17:02:09写项目的会经常使用到v-if进行判断,但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题; 二、解决办法 使用v-cloak,我的理解是:只有编译没完成时才有,用了css将它隐藏,这样编译成功后才显示,所以... -
基于Vue项目的用户浏览器加载资源文件的性能优化
2018-10-22 18:42:32本项目是一个基于Vue的前端项目,生产环境下的还需保留的依赖如下所示 package.json文件: &amp;quot;dependencies&amp;quot;: { &amp;quot;axios&amp;quot;: & -
这是一个全栈完整项目uniapp小程序+vue后台管理系统+node.js完整项目+mysql数据库
2021-07-09 17:18:52**开发技术块:**设计vue+webpack+element-ui创建项目配置及、项目结构分配、模块定义;模块封装,组件定义、sass布局、过滤器整体封装、axios二次封装;token权限判断、不同的动态加载接入、动态导航导航数据及漏卫... -
VUE项目起步时加载不出页面,router-view渲染不出页面
2019-02-26 22:49:09@VUE项目起步时加载不出页面,router-view渲染不出页面 app.vue如下: main.js: router.js: 发现问题了吗?router->routes,一定要细心哇 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所... -
基于Vue+Vant+SSM图书管理系统设计毕业论文源码
2021-06-17 15:25:244 客户端列表页实现了下拉刷新,上拉加载更多分页显示,文件上传,富文本编辑器,图片懒加载,Token访问令牌生成! 基于Vue图书管理app实体对象: 图书类型:图书类别,类别名称,可借阅天数 图书:图书条形码,... -
vue-automation:一款开箱即用的 Vue 项目模版
2021-04-28 19:29:57vue-automation 这是什么 一款开箱即用的 Vue 项目模版,基于 Vue CLI 特点 默认集成 vue-router 和 vuex 全局 SCSS 资源自动引入 ...支持 SVG 图标,CSS 精灵图自动合成 ...一款开箱即用的 Vue 中后台管理系统框架 -
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-...vue项目管理器;配置文件的配置在哪,以及如何配置
2021-03-09 15:28:26文章目录前言一、Runtime-Compiler和Runtime-... 脚手架3版本六、vue项目管理器七、脚手架3版本创建项目的配置文件配置1. vue项目管理器配置2. 脚手架2版本配置3. `vue.config,js` 前言 一、Runtime-Compiler和Runtime- -
vue 判断页面加载完成_Vue 项目里戳中你痛点的问题及解决办法(下)
2020-11-19 23:08:46https://juejin.im/post/5b174de8f265da6e410e0b4e前言 最近要求使用vue进行前后端分离开发微信公众号,不断摸索踩坑之后,总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬,请忽略小弟的愚见V... -
vue项目权限管理实现
2022-01-06 10:57:01a、创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。 b、当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。 c... -
vue项目首次加载慢的解决方案及webpack优化
2020-12-07 15:00:31场景:后台管理系统,遇到首页加载很慢的问题,技术栈是 vue全家桶 + elementUI + echarts 。首次加载大概需要40s,页面才能出来。 解决方案: 1、 vue-router 路由懒加载 2、使用CDN加载 首先,在index.html下... -
Vue后台管理系统项目总结
2021-06-16 21:00:14项目背景: 对于一家企业来说,拥有一个完整网站是很重要的事情,网站包括前端设计和后端的信息管理。简单来说,前端就是我们当我们打开一个网站的时候,肉眼所能看到的一切,而后台则是我们所看不到的一个信息管理... -
Vue项目:学生管理系统
2022-02-28 21:54:54查询学生 步骤1:设置导航 步骤2:添加路由 ... 步骤3:页面加载成功时,查询第一页 步骤4:遍历结果 <template> <div> 班级: <select v-model = "studentVo.cid"&... -
PowerShell中创建vue项目提示无法加载文件
2019-09-03 16:53:17创建Vue项目出错,提示vue : 无法加载文件C:\Users\xxx\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 解决方法 1. 以管理员... -
SpringBoot+Vue+Element-UI (物资管理系统) 纯前后端分离项目包含数据库脚本文件.zip
2021-06-01 10:15:02xinguan-business: 业务模块,所有与业务相关的代码放在此工程中。...xinguan-vue: 前端项目, npm install 安装依赖后, npm run serve 启动该项目。 xinguan-web: 处理前端请求的Controller,放在此工程中。
收藏数
35,118
精华内容
14,047