00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去聊一聊progress进度条的一个使用。那咱们呢,先看一下的已经上线的这个项目。那么把注意力啊放在这里。那么当项目当中如果出现了发请求,那么进度条呢,会开始向前走。当服务器的数据返回成功以后,那进度条就会消失。那么如果在项目当中出现了进度条这样的业务,那咱们呢,可以利用这样的插件呢去给它完成。只要咱们的项目当中,诶有发请求,那咱们的进度条呢,就会往前走,服务器的数据成功之后就会结束。而且呢,在咱们的很多的地方都会用到这个功能。那咱呢,就是利用的是这样的一个插件去完成的。
01:02
那当然目前咱们的项目当中是没有。那所以说咱们呢,去安装这样的一个插件,那咱们安装一下。叫CNPM。淹死的。杠杠C叫做n pross进度条。那咱们呢,稍微呢,接下先来等一下它的安装,那么安装成功之后啊,打开咱们的package点接去保证咱们的进度条是有的。对吧,那所以说咱们的已经安装成功了。那接下来这个进度条该在哪里使用呢?那你想想,只要项目当中发请求。啊,我就要进度条开始往前动。那么服务器的数据返回之后啊,我进度条结束,那其实啊这呢可以在哪用呢?可以在咱们的请求和响应拦截器这里去使用。
02:04
对吧,哎,应该是这个向,哎向右。为什么呢?因为请求拦截器是在你发请求之前做一些事儿。那响应拦截器是什么呢?是当服务器的数据返回之后,你还可以做一些事情。那所以说咱们的进度条啊,就可以在这里使用。那咱们呢,去引入咱们的进度条,哎,引入进度条。那咱们引一下inmportt,叫做n pro ROS从哪引呢?从咱们的NP啊roress模块引入进来。那么他该如何使用呢?当然您可以翻看相应的GI文档,或者是NPM社区提供的文档。那这里呢,咱们呢可以打印一下,那这里咱打印一下对吧,那这里呢,咱们呢,打开咱们的控制台,咱们可以稍微看一下的,你看你引进来的N是一个什么呢?它呢是一个对象。
03:08
而这个对象的原型对象上你看啊,咱们先看这它有一个当的方法。Down代表什么呢?代表进度条结束。以及呢,在他的身上呢,还有一个叫做star的方法,Star的方法呢,代表的是进度条开始。所以说呢,一个是进度条开始,一个是进度条结束,当然它的原型对象上呢,还有很多方法,那目前咱们是使用不到的。对吧,那也就是说这里呢,老师呢,也做一下笔记,那也就是说progress的star方法代表了进度条开始。以及呢,还有个叫down方法,哎,Done这代表什么?代表进度条结束。那你要想想什么时候进度条开始动,那当然是当你请求拦截器捕获到请求的时候,那是不是得让咱们的进度条开始动?
04:04
所以说呢,这里面呢,咱们也做一下笔记,叫做进度条开始动。对吧,那就是点谁呀,点star。那么进度条什么时候结束呢?那就是当服务器返回的数据成功了,你拿到数据了,那咱的进度条也就结束了。那所以说啊,可以在咱们的响应拦截器这里,对吧,成功这里,那咱们呢,可以写一下,这是进度条结束,那就是点点当。那咱们呢,去测试一下子有没有效果刷新。那首先说啊,咱们的是有请求去发的,当然咱们的请求和响应拦截器呢也会触发,但是呢,你会发现一件事什么事根本没有进度条的效果。那这是因为什么呢?因为你没有引进咱们的进度条的样式。
05:00
所以说呢,也别忘记要引入什么呀,引入进度条的样式。这个样式是谁呢?其实咱们可以看一下子,你可以在这里搜索一下子,叫做n pros。对吧,咱们可以搜索一下子,在这个文件夹下,它呢有一个文件叫做n.CSS咱们呢是需要引进人家相应的样式的。所以说啊,咱们引入一下。它呢应该是什么?应该是n pros文件夹下的n pror啊N对吧,N proress.CSS。那这样咱们的进度条呢,才会有相应的样式。对吧,咱们呢,可以刷新看一下。是不是就有了,当然啊,这个进度条它默认的样式啊,是这样的一个,咱们可以看一下的,是这样的一个蓝色的。对吧,哎,是蓝色的,那当然有的同学说老师,那如果工作的时候啊,人家产品经理要求这个进度条,比如说是红色的绿色的,那这怎么改啊,那这很简单,就是改它的样式就行了,你看在它的样式当中,如果说你不喜欢这个颜色,你可以改。
06:18
那哪个样式是呢?就是这个叫bar。背景颜色,你看现在不是就是这种像蓝色的这个颜色吗?那假如说你不喜欢这个颜色,比如说女孩子喜欢粉色,那你就可以来一个pink。那咱们保存一下,你看那进度条是不是就变成了粉色的。所以说啊,这个进度条的这个颜色啊,你可以自己去进行设置,当然你需要修改N当中相应的样式,当然咱们采用的呢,就是这个颜色了,默认的颜色。所以说啊,这是咱们的一个进度条的一个使用,那这里呢,老师呢,也做一下笔记,也就说啊star方法代表的是进度条,哎进度条开始,那以及呢,还有叫当这个呢,是进度条结束,以及也别忘记了,就是进度条的颜色啊,哎可以修改的。
07:14
哎,修改的。哎,修改的当然,哎需要咋呢?需要哎修改人家的样式。所以说啊,这是咱们的一个进度条的一个使用。
我来说两句