测试平台系列(108) 添加全局顶部进度条.md

2022/6/13 测试平台接口测试FastApiPythonReact

大家好~我是米洛
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程,希望大家多多支持。
欢迎关注我的公众号米洛的测开日记,获取最新文章教程!

# 回顾

上一节我们完成了用例统计相关内容,随着功能点的渐渐完善。我们也得更注重一下用户体验,今天我们就来讲下如何完成全局顶部进度条功能。

# 顶部进度条

经常逛github的朋友,应该都看到过这样的进度条,我们来看看gif回忆下:

注意到顶部的蓝色进度条了吗?这个就是我们今天要搞定的部分。

虽然Ant Design Pro已经有了全局的loading,但是其实我个人是觉得那个效果太粗鲁了,顶部进度条相对来说会温和一点。

# 组件选型

其实在antd官网有个精选组件的页面,大家有类似需求都可以去那边看看有没有合适的,毕竟人官网都推荐的,那肯定不会差到哪去。

我们在推荐组件里面找到这样一个组件: nprogress

既然只有一个,那就它了。(毕竟也好像没得选了)

# 研究下api

api很简单:

import后start,等页面加载完毕了调用done方法即可。

# 改造BasicLayout

因为我们整个页面虽然看起来是动态的,但其实是在不断更换BasicLayout的chidren,而登录页面虽然是UserLayout,但好像也没啥好loading的,所以我们只需要改造BasicLayout这个基本组件即可。

思路也很简单,设定一个href变量,判断当前的路由与href是否相等,如果不相等则说明url在变化,也就是页面在切换,这样的话就调用滚动条的start和done方法。

那什么时候调用done呢?

我们知道用dva的connect连接起来的组件,天然就带有dispatch方法。

而我们loading也是自带的组件,在loading变量里面有个global变量,如果为true代表页面整体还未加载完成

所以简单点说的话,我们通过设置一个变量href检测是否有页面更新操作,有的话立马调用start方法,接着等global为false,则调用done方法。

# 开始改造

如果没有安装的话,可以先安装一下nprogress:

npm install nprogress --save
1
  1. 在src/layout/BasicLayout.jsx引入Nprogress
import NProgress from "nprogress";
import 'nprogress/nprogress.css'
1
2

引入核心方法和样式

  1. 配置loading标志
NProgress.configure({showSpinner: true});
1

这一步的目的是为了在进度条最右侧展示loading标志,更明显一点,不加这步也没问题。

  1. 在connect处带入loading
export default connect(({global, settings, loading}) => ({
  collapsed: global.collapsed,
  settings,
  ld: loading,
}))(BasicLayout);
1
2
3
4
5

注意,我这里用ld变量替代了loading,因为发现变量名叫loading的话可能和umi默认的值产生冲突(umi也有全局loading判断),所以我换成ld了之后正常了。

  1. 方法体里面加入如下代码
// 设置当前路由的值,默认为空字符串
// 为空字符串的话,肯定和url不一致,所以第一次肯定会生效,后续就是修改生效
const [currentHref, setCurrentHref] = useState('');
// 从props获取到loading->ld
const {ld} = props;
// 获取当前路由
const {href} = window.location;
if (currentHref !== href) {
  // 加载进度条
  NProgress.start();
  // 当global为false,说明加载完毕,直接done
  if (!ld.global) {
    NProgress.done();
    // 更新当前路径
    setCurrentHref(href);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们来看下效果,主要也就是看切换菜单刷新页面的时候,进度条是否正常:

大致上没啥出入,作为一个要求不是很高的"前端",做到这个效果已经可以了。

想起之前是每个请求前start,请求结束执行done,对比起来确实也方便多了。

今天的内容就分享到这里了,感谢大家的收看。