Vue--會員管理列表頁面，抽取BASE_URL

會員管理頁面接口調通

現在來開發我們的會員管理頁面，我們獲取會員數據的接口格式如下

{
    "code": "2001",
    "success": true,
    "msg": "",
    "total": 78,
    "data": [
        {
            "id": 30,
            "update_time": "2020-06-11 23:00:04",
            "create_time": "2020-06-11 23:00:04",
            "member_card": "123",
            "member_name": "是打算",
            "member_birthday": "1992-02-12",
            "phone_number": 17693638363,
            "card_money": 234234,
            "Available_integral": 342342,
            "pay_type": 1,
            "member_address": "甘肅省"
        },
        {
            "id": 29,
            "update_time": "2020-06-11 22:55:10",
            "create_time": "2020-06-11 22:55:10",
            "member_card": "123",
            "member_name": "溫熱",
            "member_birthday": "1992-02-12",
            "phone_number": 345634563456,
            "card_money": 21312,
            "Available_integral": 21312,
            "pay_type": 3,
            "member_address": "額我認為而我而我"
        },
        
    ]
}

在 src/api 下新建一個文件，叫 member.js ，將會員相關的接口都放在這個下面，但是現在有個問題，我們的 主機名和域名是在 src/login.js 里寫的一個變量，不能引用到 member.js 里面，我們可以將變量提取出來，在 src/utils下創建一個common.js 的文件，寫入如下代碼

const baseurl = 'http://127.0.0.1:8081'

export default baseurl  // 導出自定義baseurl

這樣我們就可以在其他地方引用這個變量了，如果想改，只需要改這一處就可以了

在member.js 里寫如下代碼

// 會員管理接口

import request from '@/utils/request'
import BASE_URL from '@/utils/common'


export default {
    // 獲取會員列表數據
    getList(token){
        return request({
            url: BASE_URL +'/api/manage/member',
            method: 'get',
            headers:{
                "Authorization":"JWT "+token
            }

        })
    },

    
}

然后再 src/views/member/index下寫如下代碼

<template>
    <div>

    </div>
</template>

<script>
import memberApi from "@/api/member"

export default{

    created() {
        // 調接口請求數據，將調接口定義一個方法，在created里調用這個方法
        
        this.fetchData()
    },

    methods: {
        fetchData(){
            // 獲取token
            const token = localStorage.getItem('zz-token')
            console.log(token)
            memberApi.getList(token).then( response=>{
                const res = response.data
                console.log(res)
            })

            
        }
        
    },
}
</script>

刷新頁面，查看控制台是否可以輸出數據

vue-router的bug

這樣會有一個問題，當在點擊會員管理時，會報如下錯誤

 這是vuerouter的bug，只需要升級一下vue-router就可以了

npm i vue-router@3.0 -S

重啟項目，多次點擊也不會報錯了