欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

axios攔截器、ElementUI組件的使用方法

 更新時間：2023年01月11日 16:30:20   作者：須臾不敢忘  
大家都知道ElementUI是"餓了么"公司推出的基于Vue2.0的組件庫，這篇文章主要介紹了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的實例，配置基礎路徑
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 加載中按鈕：設置loading屬性
   <el-button type="primary" :loading="true">加載中</el-button>
//1.9 按鈕的尺寸：設置按鈕的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屬性設置分欄之間的間隔

        ? B、給el-row設置gutter屬性，可以指定每行的欄數(shù)，設置type=’flex’表示行的布局方式是flex

? （3）布局容器：Container（搭建頁面的基本結構）

        ? A、<el-container>：外層容器，可以嵌套

        ? B、<el-header>：頂欄容器。 有height屬性設置高度，默認值為60px

        ? C、<el-aside>：側邊欄容器。有width屬性設置寬度，默認值為300px

        ? D、<el-main>：主要區(qū)域容器。

        ? E、<el-footer>：底欄容器。有height屬性設置高度，默認值為60px

? （4）Table 表格：< el-table >

        ? A、屬性包括：data（綁定表格的數(shù)據(jù)）、style（設置表格的樣式）

        ? B、列：< el-table-column>，prop屬性綁定的數(shù)據(jù)的鍵(key)、label屬性（在頁面中顯示的列名）、width屬性表示列寬

到此這篇關于axios攔截器、ElementUI組件的使用方法的文章就介紹到這了,更多相關axios攔截器ElementUI組件使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論