Products
GG网络技术分享 2025-03-18 16:14 0
很多时候在访问网页的时候我们总是看到页面在加载中，可以却不知道要加载多久，无期限的等待总是让人烦躁不安，所以我们希望能知道网页加载的进度，这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中来。
直接在项目中执行安装命令：npm install --save nprogress
NProgress.start() // 进度条开始
NProgress.set() // 将进度设置到具体的百分比位置，取值范围是0到1.0
NProgress.inc() // 如果少量增加进度，进度将永远不会得到100%
NProgress.done() // 进度条结束消失
NProgress.configure() // 进度条参数配置
在main.js中引入nprogress插件和样式，
import NProgress from \'nprogress\' // nprogress插件
import \'nprogress/nprogress.css\' // nprogress样式
在NProgress.configure({})中我们可以对nprogress进行适当的配置，showSpinner 为 false（禁用进度环）、trickle 为 false（关闭进度条步进）、trickleRate （每次步进增长多少）、trickleSpeed （步进间隔，单位毫秒ms）、ease（动画方向）、speed （动画速度，单位毫秒ms）、minimum （最小百分比）等等。
NProgress.configure({ showSpinner: false }) //我这里只关闭进度环
在添加nprogress之前我们需要先了解Vuerouter的beforeEach与afterEach钩子函数，这是在路由跳转的时候对路由进行一些权限判断或者其他操作时定义的处理函数，Vue.beforeEach是在跳转之前执行，Vue.afterEach是在跳转之后执行判断的。
Vue.beforeEach(function(to,form,next){})函数有三个参数，Vue.afterEach(function(to,form))函数有两个参数：
to:即将进入的路由对象
from:当前导航即将离开的路由对象
next:调用该方法，进入下一个钩子函数，next(false):则中断当前的导航。
在main.js中全局钩子函数，在路由跳转前用NProgress.start()标记下进度条开始，在路由跳转后用NProgress.done()标记下结束，这样在路由跳转的时候就可以在页面顶部看到一个progress bar进度条了。
import Vue from \'vue\'
import App from \'./App.vue\'
import router from \'@/router/index.js\'
import store from \'./store\'
import Element from \'element-ui\'
import \'element-ui/lib/theme-chalk/index.css\'
import \'@/assets/icons/index.js\'
import NProgress from \'nprogress\'
import \'nprogress/nprogress.css\'
Vue.use(Element)
Vue.config.productionTip = false
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
new Vue({
router,
store,
render: h => h(App)
}).$mount(\'#app\')
如果你希望每次发送请求的时候也出现进度条的话可以在axios封装中的路由拦截中添加nprogress，如何封装axios可以参考Vue实战037：axios二次封装和使用。
// 请求拦截器(请求发出前处理一些请求)
axios.interceptors.request.use(
NProgress.start()
})
// 响应拦截器（处理响应数据）
axios.interceptors.response.use(
NProgress.done()
)
为了让结构更滑清晰简洁些，我们重新整理下代码，即然nprogress主要是用在路由跳转上，这里我将nprogress归纳放入router中，切记实例化router之后调用Vuerouter的beforeEach与afterEach钩子函数生效。
import Vue from \'vue\'
import Router from \'vue-router\'
import routers from \'./routers\'
import NProgress from \'nprogress\'
import \'nprogress/nprogress.css\'
NProgress.configure({ showSpinner: false })
Vue.use(Router)
const router = new Router({
mode: \'history\',
routes: routers
})
export default router
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
在app.vue中添加如下样式即可修改nprogress样式，记得添加 !important来覆盖原有样式
#nprogress .bar {
background: #66B1FF !important; // 自定义颜色
height: 20px !important; // 自定义高度
}
欢迎关注本人的公众号：编程手札，文章也会在公众号更新
在前段项目中，请求 api 以及请求方式进行封装，该封装为了简单，更加好的管理后端所给的接口，请求代码的复用性，代码简单化。
安装 axios
| $ npm install axios |
创建目录文件
在 src 中创建 http 目录
在 http 目录中创建 http.js 用户所以请求的方式
在 http 目录中创建 api.js 用于存放后端提供接口
在 http 目录中创建 axios.js 用户做 axios 拦截器
在根目录下面 创建 vue.config.js 用户 请求代理配置
接下里就是代码
项目 /scr/http/http.js 中代码
| import axios from \'axios\'; export default { /** * get 请求 * @param url 接口路由 * @param auth 是否需要带登录信息 * @returns {AxiosPromise<any>} */ get(url, auth = false) { if (auth) { return axios.get(url, {headers: {Authorization: \'Your back-end user authenticates information\'}}); } else { return axios.get(url); } }, /** * post 请求 * * @param url 接口路由 * @param data 接口参数 * @param auth 是否需要带登录信息 * @returns {AxiosPromise<any>} */ post(url, data, auth = false) { if (auth) { return axios.post(url, data, {headers: {Authorization: \'Your back-end user authenticates information\'}}); } else { return axios.post(url, data); } }, /** * put请求 * @param url 接口路由 * @param data 接口参数 * @param auth 是否需要带登录信息 * @returns {AxiosPromise<any>} */ put(url, data, auth = false) { if (auth) { return axios.put(url, data, {headers: {Authorization: \'Your back-end user authenticates information\'}}); } else { return axios.put(url, data); } }, /** * 删除 * @param url 接口路由 * @param auth 是否需要带登录信息 * @returns {AxiosPromise} */ del(url, auth = false) { if (auth) { return axios.delete(url, {headers: {Authorization: \'Your back-end user authenticates information\'}}); } else { return axios.delete(url); } }, /** * 上传文件 * @param url 接口路由 * @param file 接口文件 * @param auth 是否需要带登录信息 */ uploader(url, file, auth = false) { let param = new FormData(); param.append(\'file\', file) if (auth) { return axios.post(url, param, {headers: {Authorization: \'Your back-end user authenticates information\'}}) } else { return axios.post(url, param) } }, } |
可以在 项目 /scr/http/ 下面创建 一个文件 api 然后在里 根据 项目模块 创建 接口文件 方便管理
项目 /scr/http/api.js 代码
| import Goods from \'./api/goods.js\'; export default { // 首页 Index: { index: \'/index/index\' }, // 个人中心 Home: { UserInfo: \'/user/info\' }, // 当然也可以用文件方式进行管理 Goods: Goods } |
项目 /scr/http/api/goods.js 中代码
| export default { GoodsShow: \'/goods/default\' } |
项目 /scr/http/axios.js 中代码
| import axios from \'axios\'; // 请求拦截 axios.interceptors.request.use(config => { // 1. 这个位置就请求前最后的配置 // 2. 当然你也可以在这个位置 加入你的后端需要的用户授权信息 return config }, error => { return Promise.reject(error) }) // 响应拦截 axios.interceptors.response.use(response => { // 请求成功 // 1. 根据自己项目需求定制自己的拦截 // 2. 然后返回数据 return response; }, error => { // 请求失败 if (error && error.response) { switch (error.response.status) { case 400: // 对400错误您的处理\\ break case 401: // 对 401 错误进行处理 break default: // 如果以上都不是的处理 return Promise.reject(error); } } }) |
上面已经准备好了。那么接下来就是 项目 /scr/min.js 中添加代码
项目 /scr/min.js 中代码
| import Vue from \'vue\'; import App from \'./App.vue\'; import api from \'./http/api\'; import http from \'./http/http\'; // axios 拦截器 import \'./http/axios\' // 对后端接口 进行全局注册 Vue.prototype.$api = api; // 对请求方式 进行全局注册 Vue.prototype.$http = http; 那么接下来就是使用了 项目 /src/views/index/index.vue 中我们对他进行使用 <template> <div> </div> </template> <script> export default { name: \"Index\", mounted() { this.handle() }, methods: { handle(){ // 当然如果你需要带登录信息去请求这个接口 可以在 路由后面跟上 true 或者 false 来决定是否在请求的时候带登录信息 // 我们这样进行封装 就对一个 请求封装好了。 this.$http.get(this.$api.Index.index,true).then((result) => { }) } } } </script> <style scoped> </style> |
接下来是 代理配置
项目 /vue.config.js 代码
| // 后端请求地址 注意[他会根据你环境的不同从而获取的 env 文件不同] const target = process.env.APP_API_URL; module.exports = { devServer: { // 所有的接口请求代理 proxy: { \'/api\': { target: target, changeOrigin: true, ws: true, pathRewrite: { \'^api\': \'\' } } } } } |
以上就是在 Vue 里面对 Axios 进行封装的详细内容，更多请关注网站的其它相关文章！
Demand feedback
