axios攔截器、ElementUI組件的使用方法
一、axios攔截器
1、axios模塊的作用
是對(duì)基于http請(qǐng)求的封裝。在瀏覽器對(duì)異步請(qǐng)求對(duì)象XMLHttpRequest進(jìn)行封裝
2、攔截器
? （1）請(qǐng)求攔截器：對(duì)客戶端發(fā)起的請(qǐng)求進(jìn)行統(tǒng)一的前期處理（token、時(shí)間戳、cookie等）
? （2）響應(yīng)攔截器：對(duì)服務(wù)器端響應(yīng)給客戶端的數(shù)據(jù)統(tǒng)一進(jìn)行處理之后再發(fā)給客戶端
3、使用方法
import axios from "axios";
//1. 創(chuàng)建axios的實(shí)例，配置基礎(chǔ)路徑
const axiosInstance = axios.create({
baseURL: 'http://localhost:8089',
timeout: 5000
})
//2. 定義請(qǐng)求攔截器:給所有請(qǐng)求都帶上token
axiosInstance.interceptors.request.use((req)=>{
let token = sessionStorage.getItem('Auth') //獲取頁(yè)面存儲(chǔ)中的token信息
if(token){ //若token存在
req.headers['Auth'] = token
}
return req;
},(err)=>{
return Promise.reject(err)
})
//3.響應(yīng)攔截器：對(duì)服務(wù)器響應(yīng)給客戶端的數(shù)據(jù)進(jìn)行統(tǒng)一的處理
axiosInstance.interceptors.response.use((res)=>{
//1.對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理
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、簡(jiǎn)介：是’餓了么’公司推出的基于Vue2.0的組件庫(kù)
2、使用方法
? （1）安裝：npm install element-ui
? （2）在main.js文件中進(jìn)行全局的配置
import ElementUI from ‘element-ui' //導(dǎo)入element-ui庫(kù) 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 帶邊框的按鈕(鼠標(biāo)懸浮效果)
<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 帶圖標(biāo)的圓形按鈕
<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">上一個(gè)</el-button>
<el-button type="primary">下一個(gè)<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>默認(rèn)按鈕</el-button>
<el-button size="medium">中型按鈕</el-button>
<el-button size="small">小型按鈕</el-button>
<el-button size="mini">超小按鈕</el-button>
icon:圖標(biāo)
<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屬性，用來(lái)指定列的欄數(shù)，offset屬性設(shè)置分欄之間的間隔
? B、給el-row設(shè)置gutter屬性，可以指定每行的欄數(shù)，設(shè)置type=’flex’表示行的布局方式是flex
? （3）布局容器：Container（搭建頁(yè)面的基本結(jié)構(gòu)）
? A、<el-container>：外層容器，可以嵌套
? B、<el-header>：頂欄容器。 有height屬性設(shè)置高度，默認(rèn)值為60px
? C、<el-aside>：側(cè)邊欄容器。有width屬性設(shè)置寬度，默認(rèn)值為300px
? D、<el-main>：主要區(qū)域容器。
? E、<el-footer>：底欄容器。有height屬性設(shè)置高度，默認(rèn)值為60px
? （4）Table 表格：< el-table >
? A、屬性包括：data（綁定表格的數(shù)據(jù)）、style（設(shè)置表格的樣式）
? B、列：< el-table-column>，prop屬性綁定的數(shù)據(jù)的鍵(key)、label屬性（在頁(yè)面中顯示的列名）、width屬性表示列寬
到此這篇關(guān)于axios攔截器、ElementUI組件的使用方法的文章就介紹到這了,更多相關(guān)axios攔截器ElementUI組件使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
console對(duì)象是JavaScript的原生對(duì)象，它有點(diǎn)像Unix系統(tǒng)的標(biāo)準(zhǔn)輸出stdout和標(biāo)準(zhǔn)錯(cuò)誤stderr，可以輸出各種信息用來(lái)調(diào)試程序，而且還提供了很多額外的方法，供開(kāi)發(fā)者調(diào)用。它的常見(jiàn)用途有兩個(gè)。顯示網(wǎng)頁(yè)代碼運(yùn)行時(shí)的錯(cuò)誤信息。提供了一個(gè)命令行接口，用來(lái)與網(wǎng)頁(yè)代碼互動(dòng)。2016-08-08
createElement與createDocumentFragment的點(diǎn)點(diǎn)區(qū)別小結(jié)
在DOM操作里，createElement是創(chuàng)建一個(gè)新的節(jié)點(diǎn)，createDocumentFragment是創(chuàng)建一個(gè)文檔片段2011-12-12
在日常前端開(kāi)發(fā)中,大屏項(xiàng)目是每個(gè)前端開(kāi)發(fā)者必備技能,但是目前設(shè)備尺寸大小和分辨率都不相同,所以大屏適配成了一個(gè)頭疼的問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于前端大屏適配的三種解決方案,需要的朋友可以參考下2024-03-03
最近使用到了jstree，感覺(jué)是一款靈活的、可多項(xiàng)定制的tree插件。下面通過(guò)本文給大家詳細(xì)介紹下jstree的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2016-12-12
js解決pdf使用iframe打印報(bào)跨域錯(cuò)誤問(wèn)題的方法示例
這篇文章主要給大家介紹了關(guān)于js解決pdf使用iframe打印報(bào)跨域錯(cuò)誤問(wèn)題的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-03-03
JS對(duì)象與json字符串相互轉(zhuǎn)換實(shí)現(xiàn)方法示例
這篇文章主要介紹了JS對(duì)象與json字符串相互轉(zhuǎn)換實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了js對(duì)象與json字符串相互轉(zhuǎn)換的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-06-06
UniApp使用vue.config.js進(jìn)行配置的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于UniApp使用vue.config.js進(jìn)行配置的詳細(xì)教程,uniapp是一套基于Vue語(yǔ)法的框架,同樣也支持Vue.config.js配置,一般常用的莫過(guò)于路徑的名稱,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多張照片上傳功能,當(dāng)服務(wù)器的狀態(tài)碼為200且圖片上傳完畢后將圖片的src轉(zhuǎn)化為Json字符串存在數(shù)組中以便將其添加到數(shù)據(jù)庫(kù),本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
JavaScript函數(shù)重載操作實(shí)例淺析
這篇文章主要介紹了JavaScript函數(shù)重載操作,結(jié)合一次面試經(jīng)歷分析了JavaScript函數(shù)重載相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05