axios攔截器、ElementUI組件的使用方法
一、axios攔截器
1、axios模塊的作用
是對基于http請求的封裝。在瀏覽器對異步請求對象XMLHttpRequest進行封裝
2、攔截器
? (1)請求攔截器:對客戶端發(fā)起的請求進行統(tǒng)一的前期處理(token、時間戳、cookie等)
? (2)響應(yīng)攔截器:對服務(wù)器端響應(yīng)給客戶端的數(shù)據(jù)統(tǒng)一進行處理之后再發(fā)給客戶端

3、使用方法
import axios from "axios";
//1. 創(chuàng)建axios的實例,配置基礎(chǔ)路徑
const axiosInstance = axios.create({
baseURL: 'http://localhost:8089',
timeout: 5000
})
//2. 定義請求攔截器:給所有請求都帶上token
axiosInstance.interceptors.request.use((req)=>{
let token = sessionStorage.getItem('Auth') //獲取頁面存儲中的token信息
if(token){ //若token存在
req.headers['Auth'] = token
}
return req;
},(err)=>{
return Promise.reject(err)
})
//3.響應(yīng)攔截器:對服務(wù)器響應(yīng)給客戶端的數(shù)據(jù)進行統(tǒng)一的處理
axiosInstance.interceptors.response.use((res)=>{
//1.對響應(yīng)數(shù)據(jù)進行處理
let result = res.data
let code = result.code
if (code == 200){
return result
}else{
return Promise.reject(result)
}
},(err)=>{
return Promise.reject(err)
})
export default axiosInstance二、ElementUI
1、簡介:是’餓了么’公司推出的基于Vue2.0的組件庫
2、使用方法
? (1)安裝:npm install element-ui
? (2)在main.js文件中進行全局的配置
import ElementUI from ‘element-ui' //導(dǎo)入element-ui庫 import ‘element-ui/lib/theme-chalk/index.css' //導(dǎo)入element-ui的樣式文件 Vue.use(ElementUI)
3、UI組件的使用:所有的DOM元素都帶有前綴 el-
? (1)按鈕:< el-button >
plain:懸浮后顏色變深
circle:圓形或橢圓
disabled:按鈕不可用
//1.1 按鈕的類型
<el-button>普通按鈕</el-button>
<el-button type="primary">Primary按鈕</el-button>
<el-button type="info">Info按鈕</el-button>
<el-button type="success">Success</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
//1.2 帶邊框的按鈕(鼠標懸浮效果)
<el-button plain>普通按鈕</el-button>
<el-button type="primary" plain>Primary按鈕</el-button>
<el-button type="info" plain>Info按鈕</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
//1.3 圓角按鈕
<el-button round>普通按鈕</el-button>
<el-button type="primary" round>Primary按鈕</el-button>
<el-button type="info" round>Info按鈕</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
//1.4 帶圖標的圓形按鈕
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="info" icon="el-icon-delete" circle></el-button>
//1.5 按鈕不可用:disabled
//1.6 文字按鈕:type='text'
//1.7 按鈕組:
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一個</el-button>
<el-button type="primary">下一個<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
//1.8 加載中按鈕:設(shè)置loading屬性
<el-button type="primary" :loading="true">加載中</el-button>
//1.9 按鈕的尺寸:設(shè)置按鈕的size屬性:medium(中等)、small(小型)、mini(超小)
<el-button>默認按鈕</el-button>
<el-button size="medium">中型按鈕</el-button>
<el-button size="small">小型按鈕</el-button>
<el-button size="mini">超小按鈕</el-button>
icon:圖標
<el-button icon="el-icon-search" circle></el-button>
<el-button icon="el-icon-edit" circle></el-button>
<el-button icon="el-icon-remove" circle></el-button>
<el-button icon="el-icon-delete" circle></el-button>
<el-button icon="el-icon-user" circle></el-button>? (2)布局組件:Layout(采用柵格布局方式,把一行分成24欄),用el-row表示行,
? A、用el-col表示列,每列有span屬性,用來指定列的欄數(shù),offset屬性設(shè)置分欄之間的間隔
? B、給el-row設(shè)置gutter屬性,可以指定每行的欄數(shù),設(shè)置type=’flex’表示行的布局方式是flex
? (3)布局容器:Container(搭建頁面的基本結(jié)構(gòu))
? A、<el-container>:外層容器,可以嵌套
? B、<el-header>:頂欄容器。 有height屬性設(shè)置高度,默認值為60px
? C、<el-aside>:側(cè)邊欄容器。有width屬性設(shè)置寬度,默認值為300px
? D、<el-main>:主要區(qū)域容器。
? E、<el-footer>:底欄容器。有height屬性設(shè)置高度,默認值為60px
? (4)Table 表格:< el-table >
? A、屬性包括:data(綁定表格的數(shù)據(jù))、style(設(shè)置表格的樣式)
? B、列:< el-table-column>,prop屬性綁定的數(shù)據(jù)的鍵(key)、label屬性(在頁面中顯示的列名)、width屬性表示列寬
到此這篇關(guān)于axios攔截器、ElementUI組件的使用方法的文章就介紹到這了,更多相關(guān)axios攔截器ElementUI組件使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
window.print打印指定div指定網(wǎng)頁指定區(qū)域的方法
這篇文章主要介紹了window.print打印指定div指定網(wǎng)頁指定區(qū)域的方法,需要的朋友可以參考下2014-08-08
JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢,今天給大家通過多種寫法來實現(xiàn)這一功能,具體實例代碼跟隨小編一起看看吧2021-06-06
網(wǎng)站導(dǎo)致瀏覽器崩潰的原因總結(jié)(多款瀏覽器) 推薦
對于訪客,如果登錄您網(wǎng)站,瀏覽器就立刻崩潰,我想這對誰都是無法容忍的,對此總結(jié)了網(wǎng)站導(dǎo)致瀏覽器崩潰的原因2010-04-04
Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用
這篇文章主要為大家介紹了Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07

