vue+axios+element ui 實現全域性loading載入
實現全域性loading載入
分析需求
,我們只需要在請求發起的時候開始loading,響應結束的時候關閉loading,就這麼簡單 對不對?
import axios from 'axios';
import { Message, Loading } from 'element-ui';
import Cookies from 'js-cookie';
import router from '@/router/index'
let loading //定義loading變數
function startLoading() { //使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '載入中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading() { //使用Element loading-close 方法
loading.close()
}
//那麼 showFullScreenLoading() tryHideFullScreenLoading() 要乾的事兒就是將同一時刻的請求合併。
//宣告一個變數 needLoadingRequestCount,每次呼叫showFullScreenLoading方法 needLoadingRequestCount + 1。
//呼叫tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount為 0 時,結束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
//http request 攔截器
axios.interceptors.request.use(
config => {
var token = ''
if(typeof Cookies.get('user') === 'undefined'){
//此時為空
}else {
token = JSON.parse(Cookies.get('user')).token
}//注意使用的時候需要引入cookie方法,推薦js-cookie
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json'
}
if(token != ''){
config.headers.token = token;
}
showFullScreenLoading()
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 攔截器
axios.interceptors.response.use(
response => {
//當返回資訊為未登入或者登入失效的時候重定向為登入頁面
if(response.data.code == 'W_100004' || response.data.message == '使用者未登入或登入超時,請登入!'){
router.push({
path:"/",
querry:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉
})
}
tryHideFullScreenLoading()
return response;
},
error => {
return Promise.reject(error)
}
)
相關推薦
vue+axios+element ui 實現全域性loading載入
實現全域性loading載入 分析需求,我們只需要在請求發起的時候開始loading,響應結束的時候關閉loading,就這麼簡單 對不對? import axios from 'axios'; import { Message, Load
vue+axios+element ui實現全域性配置loading.
背景 業務需求是這樣子的,每當發請求到後端時就觸發一個全屏的 loading,多個請求合併為一次 loading。 現在專案中用的是 vue 、axios、element等,所以文章主要是講如果使用 axios 和 element 實現這個功能。 效果如下: 要點分析=重點 首
vue+axios+element-ui 實現ajax請求攔截和路由攔截
原文連結 https://www.cnblogs.com/parkboyoung/p/6761863.html ajax攔截器: 結合element-ui中loading和message元件來處理的,我們可以單獨建立一個http的js檔案處理axios,再到main.js中引入,統一處理
Vue結合Element-UI實現多級選單導航欄
在需要加入導航欄的元件內新增麵包屑導航欄,構建出一個可以根據路由動態改變其值的資料變數 { levelList },迴圈levelList,為每一個item設定點選時的跳轉路由 <el-breadcrumb class = "app-breadcrumb" separator =
vue.js + element UI實現表格、列表的拖動 推拽效果
表格、列表的拖動、拖拽效果 在開發使用vue.js、elementUI開發專案時,客戶提出將表格中的內容可隨意拖動實現排序功能。 於是專案中採用sortablejs來實現該功能。 1.引入sortablejs $ npm install sortablejs --save
vue 使用mint-ui實現上拉載入和下拉重新整理
效果 詳細程式碼,裡面有詳細標註 <template> <div class="tmpl"> <nav-bar title="商品列表">
用Vue、element-ui、axios實現省市區三級聯動
現在大部分電商的網站、app都需要使用者或者管理者去選擇設定地區等位置資訊。下面我就介紹一下前端開發者用vue,axios,element-ui開發一個省市區三級聯動的元件。 1.準備工作,首先我們需要全中國的省市區資源的json資料(科普一下:前六位數字是身份證前六位)
用Netty、Vue+Element-UI實現的IM
test element 驗證 情況下 tro 內置 http服務 消息處理 時間 之前工作接觸了幾個開源的IM產品,再加上曾經用Netty實現過幾個服務,於是就有了用Netty實現一個IM的想法,於是用業余時間寫了一個IM,和喜歡Netty的程序員們分享。 考慮到方便擴
VUE+Element UI實現簡單的表格行內編輯效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入樣式 --> <link rel="stylesheet" href="https://
Element UI 框架中Loading 區域載入的使用方法
Loading 載入用於載入資料時顯示動效 Element UI中的Loading元件預設是全屏顯示,大多時候出於美觀考慮我們並不需要這種功能 而是讓它顯示在我們需要的地方,比如一個後臺管理系統,我們和後臺進行網路傳輸的時候,我們並不需要把導航欄和系統的頭部覆蓋住,只需要內容部分顯
Vue+element UI實現表格資料匯出Excel元件
介紹 這是一個可以將頁面中的表格資料匯出為Excel檔案的功能元件,該元件一般與表格一起使用,將表格資料傳給元件,然後通過點選元件按鈕可將表格中的資料匯出成Excel檔案。 使用方法 由於封裝該元件內部引用了xlsx.js,file-saver.js和elementUI,因此在使用該元件時,請先安裝如下
Vue+element UI實現“回到頂部”按鈕元件
介紹 這是一個可以快速回到頁面頂部的元件,當用戶瀏覽到頁面底部的時候,通過點選按鈕,可快速回到頁面頂部。 使用方法 由於該元件是基於element-UI進行二次封裝的,所以在使用該元件時請務必安裝element-UI(安裝方式猛戳這裡),安裝好element-UI後,只需將該元件資料夾BackToTop
vue+element-ui實現表格checkbox單選
公司平臺利用vue+elementui搭建前端頁面,因為本人第一次使用vue也遇到了不少坑,因為我要實現的效果如下圖所示 實現這種單選框,只能選擇一個,但element-ui展示的是多選框,checkbox自己也可以寫,但不想寫,還是想用element-ui實現表格單選,於是
vue + element-ui實現簡潔的匯入匯出功能
眾所周知,ElementUI,是一個比較完善的UI庫,但是使用它需要有一點vue的基礎。在開始本文的正文之前,我們先來看看安裝的方法吧。 安裝ElementUI模組 ? 1 cnpm install element-ui -S
vue element-ui table表格滾動載入
新增全域性註冊事件,用來監聽滾動事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap =
【git】--------------vue+element-ui實現分頁效果-------------【劉】
管理 nta git nat 。。 layout item spa style 當從後臺請求到大量數據的時候,並要在頁面展示出來,請求的數據可能上百條數據或者更多的時候,並不想在一個頁面展示,這就需要使用分頁功能來去完成了。 1.這次使用的是vue2.0+element-
vue+element-ui實現顯示隱藏密碼
confirm export form rip data cursor inter show chang <template> <el-form :model="cuser_info" label-width="115px" label
基於Vue element-ui實現支持多級縱向動態表頭的仿表格布局
== handle tid 排名 表頭 好評 out disabled 動態表 [本文出自天外歸雲的博客園] 需求圖示如下,多級縱向動態表頭表格: 我的思路是用element-ui的layout實現,做出一個仿造表格,能夠支持動態的、多級的、縱向的表頭: &l
Vue + Element UI 實現權限管理系統(搭建開發環境)
根據 code ... mar 之前 打包工具 訪問速度 rem windows系統 技術基礎 開發之前,請先熟悉下面的4個文檔 vue.js2.0中文, 優秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 應用狀態管理庫
Vue+Element UI 實現視訊上傳
一、前言 專案中需要提供一個視訊介紹,使使用者能夠快速、方便的瞭解如何使用產品以及注意事項。 前臺使用Vue+Element UI中的el-upload元件實現視訊上傳及進度條展示,後臺提供視訊上傳API並返回URL。 二、具體實現 1、效果圖展示&nb