思路:(安慰剂按钮)首先当触发按钮时,设置拦截器,启动进度条从0开始到100满(html进度条用数值value来控制,默认为0),设置进度条的配置函数
然后在后端返回函数中启动停止精度条的函数,为了保持返回函数和进度条效果的一致性,加入延时,达到线程同步的效果
代码如下:
首先导入jquery和axios js包
其次需要加入进度条的前端加入进度条

然后在写入:

<script>
//建立进度条对象
let pg = document.getElementById("pg"); //定义登录方法
function login(){
var username = $("#username").val();
var password = $("#password").val();
var code = $("#code").val();
//拦截器
axios.interceptors.request.use(function(config){
//启动进度条
icount = setInterval(function(){
//判断进度条的进度
if(pg.value != 100){
pg.value++;
}
else{
pg.value = 0;
}
},100);
//返回配置文件.
return config;
});
//使用axios来请求接口
//初始化传参
let param = new URLSearchParams();
//将参数传递给对象
param.append('username',username);
param.append('password',password);
param.append('code',code);
axios({
//指定请求地址
url:'/supermarket/do_login',
//请求参数
data:param,
//请求类型
method:'post',
//接口返回值类型
resposeType:"text"
})
.then(function(obj){
//停止进度条
clearInterval(icount);
//将进度条填充到100
pg.value = 100;
// //进行页面跳转
if(obj.data=="登录成功"){
//加入延时,达到线程同步的效果
setTimeout(func,500);
function func(){
alert(obj.data)
window.location.href="/supermarket/productlist";
}
}
});
}
</script>

使用axios加入进度条的更多相关文章

  1. 使用axios实现上传图片进度条

    在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在loading的话,用户都不知道什自己上传了多少,为了更直观的展现 ...

  2. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  3. ajax axios 下载文件时如何获取进度条 process

    最近项目需要做一个下载文件的进度条,看网上上传文件进度条下载,特分享出来方便大家查阅 <!DOCTYPE html> <html> <head>     <m ...

  4. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  5. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  6. vue项目上传文件以及进度条

    最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把 ...

  7. Vue中使用NProgress实现进度条

    简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...

  8. React、Vue添加全局的请求进度条(nprogress)

    全局的请求进度条,我们可以使用nprogress来实现,效果如下: 首先需要安装插件: npm i nprogress -S 然后使用的时候主要有两种方式,第一种是切换页面的时候,第二种则是请求接口的 ...

  9. 关于各种Vue UI框架中加载进度条的正确使用

    这里拿MUSE UI 中的进度条举例 <mu-circular-progress :size="40" class="icon" v-if="i ...

随机推荐

  1. mercurial的几个易用性小技巧

    其实这两年,能够采用mercurial的项目我都尽量用,甚至有些上游是git的,或者需要托管到公司内gitlab上与别人协作的,我都装上hg-git.无它,只是因为mercurial易用性比git好得 ...

  2. mongo 删除内嵌数组元素

    文档格式如下: { "_id" : ObjectId("56e2a92ccc6dd2271953e502"), "links": [ { & ...

  3. 占位 Bootstrap

    中文网  http://www.bootcss.com/

  4. mysql数据库建立的数据库在哪个文件夹?

    一般在安装目录下的data文件夹下,或者在C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.1\dat ...

  5. metroui

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Spark排序之SortByKey

    sortByKey函数作用于Key-Value形式的RDD,并对Key进行排序. package com.test.spark import org.apache.spark.{SparkConf, ...

  7. [原]Jenkins(七)---jenkins项目编译测试发布由maven构建的web项目

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/533 ...

  8. ffmpeg 视频转ts切片 生成m3u8视频播放列表

    近期做视频点播,要求将视频文件切片成ts文件.经搜索得到以下两个命令,可完成这个任务. 一  首先将视频文件转为视频编码h264,音频编码aac格式的mp4文件      1.可以预先使用ffprob ...

  9. asp.net利用存储过程分页代码

    -最通用的分页存储过程 -- 获取指定页的数据 CREATE PROCEDURE Pagination ), -- 表名 ) = '*', -- 需要返回的列 )='', -- 排序的字段名 , -- ...

  10. Linux用户及文件权限管理

    Linux用户及文件权限管理