import axios from 'axios'
?
// 設(shè)置超時(shí)時(shí)間
axios.defaults.timeout = 5000
?
// 創(chuàng)建axios實(shí)例
const service = axios.create({
    baseURL: 'http://localhost:8000', // 所有的請(qǐng)求地址前綴部分
    timeout: 60000, // 請(qǐng)求超時(shí)時(shí)間毫秒
    withCredentials: true, // 異步請(qǐng)求攜帶cookie
    headers: {
        // 設(shè)置后端需要的傳參類(lèi)型
        'Content-Type': 'application/json',
        'token': 'your token',
        // 'X-Requested-With': 'XMLHttpRequest',
    },
})
?
// 導(dǎo)出
export default service

如上，我們對(duì)axios進(jìn)行簡(jiǎn)單的封裝，已經(jīng)能夠?qū)崿F(xiàn)統(tǒng)一URL、超時(shí)時(shí)間和請(qǐng)求頭。

關(guān)于請(qǐng)求攔截等后續(xù)再進(jìn)行講解。

2.3、設(shè)計(jì)接口

首先在src下新建apis/bugs.js文件，然后設(shè)計(jì)一個(gè)方法（接口）去調(diào)用后端接口。

// 導(dǎo)入axios實(shí)例
import httpRequest from '@/request/svc'
?
// 獲取BUG信息
export function apiGetBugs() {
    return httpRequest({
        url: 'bug3',
        method: 'get',
        params: {'dd': 'xxx'},
    })
}

如上，我們?cè)诮涌谖募姓{(diào)用封裝的axios實(shí)例對(duì)后端的接口發(fā)起請(qǐng)求，并將請(qǐng)求相應(yīng)對(duì)象返回。

2.4、設(shè)計(jì)視圖

有了上面的基礎(chǔ)，我們可以在vue的視圖中直接導(dǎo)入bugs.js中的接口，然后在實(shí)例的onMounted階段去異步調(diào)用接口，當(dāng)接口返回后再去更新頁(yè)面。

<template>
    <!-- 上節(jié)的內(nèi)容 -->
    <lay-button type="primary">原始按鈕</lay-button>
    <lay-button>默認(rèn)按鈕</lay-button>
    <lay-button type="normal">百搭按鈕</lay-button>
    <lay-button type="warm">暖色按鈕</lay-button>
    <lay-button type="danger">警告按鈕</lay-button>
    <hr>
    <!-- 本節(jié)內(nèi)容 -->
   <lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
</template>
?
<script>
    // 本節(jié)內(nèi)容
import { onMounted,reactive } from 'vue'
import { apiGetBugs } from '@/apis/bugs'
?
export default {
  setup() {
        console.log('do something...')
        
        // 聲明表格數(shù)據(jù)變量未聲明式
        let dataSource1=reactive([])
        
        // 掛載階段異步調(diào)用接口
        onMounted(async()=>{
            let res = await apiGetBugs()
            const ret = res.data
            console.log(ret)
            
            // 將接口返回的數(shù)據(jù)push到響應(yīng)式變量中
            dataSource1.push(...[{close:ret[0][0],fixing:ret[0][1],refused:ret[0][2],fixed:ret[0][3],reopen:ret[0][4]},])
        })
        
        // 表頭
        const columns1 = [
            {
                title:"關(guān)閉",
                width:"200px",
                key:"close"
            },
            {
                title:"修復(fù)中",
                width:"200px",
                key:"fixing"
            },
            {
                title:"拒絕",
                width:"200px",
                key:"refused"
            },
            {
                title:"已修復(fù)",
                width:"200px",
                key:"fixed"
            },
            {
                title:"重新打開(kāi)",
                width:"200px",
                key:"reopen",
                ellipsisTooltip: true
            }
        ]
   
        // 完整的layui-vue的表格數(shù)據(jù)結(jié)構(gòu)
        return {
          columns1,
          dataSource1
        }
  }
}
?
</script>?
<style>
</style>