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') //獲取頁面存儲(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、簡介:是’餓了么’公司推出的基于Vue2.0的組件庫
2、使用方法
? (1)安裝:npm install element-ui
? (2)在main.js文件中進(jìn)行全局的配置
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 帶邊框的按鈕(鼠標(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屬性,用來指定列的欄數(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è)置高度,默認(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屬性(在頁面中顯示的列名)、width屬性表示列寬
到此這篇關(guān)于axios攔截器、ElementUI組件的使用方法的文章就介紹到這了,更多相關(guān)axios攔截器ElementUI組件使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS獲取計(jì)算機(jī)mac地址以及IP的實(shí)現(xiàn)方法
本篇文章主要是對(duì)利用JS獲取計(jì)算機(jī)mac地址以及IP的實(shí)現(xiàn)方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01Bootstrap 實(shí)現(xiàn)查詢的完美方法
Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)查詢的完美方法,需要的朋友可以參考下2016-10-10window.print打印指定div指定網(wǎng)頁指定區(qū)域的方法
這篇文章主要介紹了window.print打印指定div指定網(wǎng)頁指定區(qū)域的方法,需要的朋友可以參考下2014-08-08JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢,今天給大家通過多種寫法來實(shí)現(xiàn)這一功能,具體實(shí)例代碼跟隨小編一起看看吧2021-06-06網(wǎng)站導(dǎo)致瀏覽器崩潰的原因總結(jié)(多款瀏覽器) 推薦
對(duì)于訪客,如果登錄您網(wǎng)站,瀏覽器就立刻崩潰,我想這對(duì)誰都是無法容忍的,對(duì)此總結(jié)了網(wǎng)站導(dǎo)致瀏覽器崩潰的原因2010-04-04Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用
這篇文章主要為大家介紹了Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07JavaScript實(shí)現(xiàn)異步圖像上傳功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)異步圖像上傳功能,本文展示了一種使用代碼示例立即顯示圖像的方法(使用圖像的Base64編碼版本),同時(shí)將其上載到服務(wù)器,而無需等待操作完成。需要的朋友可以參考下2018-07-07