axios攔截器、ElementUI組件的使用方法
一、axios攔截器
1、axios模塊的作用
是對基于http請求的封裝。在瀏覽器對異步請求對象XMLHttpRequest進行封裝
2、攔截器
? (1)請求攔截器:對客戶端發(fā)起的請求進行統(tǒng)一的前期處理(token、時間戳、cookie等)
? (2)響應攔截器:對服務器端響應給客戶端的數(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.響應攔截器:對服務器響應給客戶端的數(shù)據(jù)進行統(tǒng)一的處理 axiosInstance.interceptors.response.use((res)=>{ //1.對響應數(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' //導入element-ui庫 import ‘element-ui/lib/theme-chalk/index.css' //導入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-08JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢,今天給大家通過多種寫法來實現(xiàn)這一功能,具體實例代碼跟隨小編一起看看吧2021-06-06網(wǎng)站導致瀏覽器崩潰的原因總結(jié)(多款瀏覽器) 推薦
對于訪客,如果登錄您網(wǎng)站,瀏覽器就立刻崩潰,我想這對誰都是無法容忍的,對此總結(jié)了網(wǎng)站導致瀏覽器崩潰的原因2010-04-04Websocket通信協(xié)議在數(shù)字孿生中的應用
這篇文章主要為大家介紹了Websocket通信協(xié)議在數(shù)字孿生中的應用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07