思路:(安慰剂按钮)首先当触发按钮时,设置拦截器,启动进度条从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. java中的数据加密1 消息摘要

    消息摘要(Message Digest) 又称为数字摘要(Digital Digest).它是一个唯一对应一个消息或文本的固定长度的值,它由一个单向Hash加密函数对消息进行作用而产生.如果消息在途中 ...

  2. Java知多少(71)文件与目录管理

    目录是管理文件的特殊机制,同类文件保存在同一个目录下不仅可以简化文件管理,而且还可以提高工作效率.Java 语言在 java.io 包中定义了一个 File 类专门用来管理磁盘文件和目录. 每个 Fi ...

  3. Java知多少(74)基础类库

    Java 的类库是 Java 语言提供的已经实现的标准类的集合,是 Java 编程的 API(Application Program Interface),它可以帮助开发者方便.快捷地开发 Java ...

  4. circRNA 中的ALU 重复元件

    circRNA 最初研究的很少,只有很小一部分基因有检测到circRNA, 当时都认为是剪切错误形成的,对于其功能也没人去研究:学者对人类的成纤维细胞进行转录组测序,构建去核糖体文库, 同时采用了RN ...

  5. 爱快路由计费系统easyradius隆重发布,支持V2版本,欢迎大家测试使用

    随着PA.BV接口的发布的临近,我们已经对ROS及爱快V2接口进行大量的升级工作 经用户测试,各方便已满足用户需求. 其实很早以前我们就有支持爱快路由的打算,但是由于各方便原因,通讯接口做好了,但是并 ...

  6. 12外观模式Facade

    一.什么是外观模式 Facade模式也叫外观模式,是由GoF提出的 23种设计模式中的一种.Facade模式为一组具 有类似功能的类群,比如类库,子系统等等,提供一个一致的简单的界面.这个一致的简单的 ...

  7. traff.sh

    #!/bin/bash #网络监控 while [ "1" ] do eth=$1 RXpre=$(cat /proc/net/dev | grep $eth | tr : &qu ...

  8. Oracle数据库入门——目录结构

    一.Oracle_Home目录 Oracle_Home主目录位于D:\dev\oracle\product\10.2.0(oracle安装路径)下,它包含Oracle软件运行有关的子目录和网络文件以及 ...

  9. Slapper帮助Dapper实现一对多

    Dapper的Query的方法提供了多个泛型重载可以帮助我们实现导航属性的查询 1对1 public class Employees4List { public int Id { get; set; ...

  10. [Asp.net]缓存简介

    写在前面 针对一些经常访问而很少改变的数据,使用缓存,可以提高性能.缓存是一种用空间换取时间的技术,说的直白点就是,第一次访问从数据库中读取数据,然后将这些数据存在一个地方,比如内存,硬盘中,再次访问 ...