安裝 Mock.js
為了模擬后台接口提供頁面需要的數據,我們引入 Mock.js 為我們提供模擬數據,而不用依賴於后台接口的完成。
安裝依賴
執行如下命令,安裝依賴包。
yarn add mockjs --dev
安裝完成之后,我們寫個例子測試一下。
在 src 目錄下新建一個 mock 目錄,創建 mock.js,在里面我們模擬了兩個接口,分別攔截用戶和菜單的請求,並返回相應的數據。
如下圖所示:
修改 Home.vue,在頁面放置兩個按鈕,分別觸發用戶和菜單的處理請求,成功后彈出獲取結果。
瀏覽器訪問:http://localhost:8080/#/,分別點擊兩個按鈕,mock 會根據請求 url 攔截對應請求並返回模擬數據。
獲取用戶信息
獲取菜單信息
OK,mock 已經成功集成進來了。