【第三步】vue中使用mockjs

一. 簡單使用

1. 安裝mockjs：npm install --save mockjs

2. 創建一個js文件寫mock模擬數據，例：

import Mock from 'mockjs';
 
Mock.mock({ "string|1-10": "★" })

3. 在main.js入口處引入這個js文件

如果模擬數據的代碼是單獨定義在一個 js 文件里的，一定要先運行定義模擬數據的 js，再發起請求，請求才會被mock.js 攔截。一般在入口頁面運行定義模擬數據的 js

 

好處：可以起到攔截ajax請求，返回數據，

缺點：network看不到請求

原因：

　　1. 源碼中首先查找是否在 Mockjs 中定義了該請求，有則進行攔截，然后使用其模擬請求對象 MockXMLHttpRequest 進行響應，即此時不發送 XHR 請求；

　　2. 否則使用本地標准 XHR 對象進行請求，此時可以在控制台 network 中看到請求信息

 

 

二. 中級使用

1. 編寫mock返回數據js文件

const Mock = require('mockjs')

module.exports = function (app) {

  // 監聽請求
  app.post('/dev-api/vue-admin-template/user/login', (rep, res) => {

    // 響應時，返回 mock data的json數據
    // 將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器

    res.json(Mock.mock({
      code: 20000,
      data: 'admin-ton'
    }))

  })

}

2.  修改 vue.config.js配置。

在文件中的devServer屬性中新添加一個before鈎子函數,用來監聽來自web的http請求。

優點：可以在network看到請求了

缺點：不能熱更新代碼

 

三. 高級使用

1. 將中級使用的js文件利用webpack的中間件，使用路由導入

2. 利用chokidar模塊實現熱更新