1. mock.js源碼：https://github.com/nuysoft/Mock
2. 替換原生的XMLHttpRequest，使用簡(jiǎn)便，不需要改變現(xiàn)有的請(qǐng)求代碼
3. 本項(xiàng)目采用axios做網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)，請(qǐng)求完畢后，代碼在線上和線下都是一樣的，不需要去替換，在線下本地調(diào)試的時(shí)候，axios請(qǐng)求完，mockjs會(huì)把原生的XMLHttpRequest做一個(gè)替換，然后返回mock.js的接口
4. 提供豐富的數(shù)據(jù)類型
5. 無(wú)法支持blob類型，無(wú)法模擬下載（我們的電子書下載的時(shí)候會(huì)使用Blob類型）

使用mock.js

• 安裝mock.js

npm i mockjs --D

• 安裝axios

npm i axios --save

• 創(chuàng)建mock文件夾，提供原數(shù)據(jù)（一些json文件，用來(lái)做接口數(shù)據(jù)的模擬）

  
  
  image.png

• mock文件夾下創(chuàng)建index.js 并在項(xiàng)目的main.js中引入

• 在index.js中做初始化

import Mock from 'mockjs'
import home from './bookHome' // 首頁(yè)的所有數(shù)據(jù)
import shelf from './bookShelf' // 書架的所有數(shù)據(jù)
import list from './bookList' // 圖書的所有列表
import flatList from './bookFlatList' // 方便做查詢用的

// 第一個(gè)參數(shù)，正則表達(dá)式匹配所請(qǐng)求的URL
Mock.mock(/\/book\/home/, 'get', home) // 前端請(qǐng)求/book/home的時(shí)候，就會(huì)請(qǐng)求home里的數(shù)據(jù)
Mock.mock(/\/book\/shelf/, 'get', shelf)
Mock.mock(/\/book\/list/, 'get', list)
Mock.mock(/\/book\/flat-list/, 'get', flatList)

• 在src目錄下創(chuàng)建api目錄，創(chuàng)建store.js利用axios做數(shù)據(jù)請(qǐng)求

import axios from 'axios'
export function home() {
  return axios({
    method: 'get',
    url: `${process.env.VUE_APP_BASE_URL}/book/home`
  })
}

這樣做就可以請(qǐng)求mock里Home中的數(shù)據(jù)

• 在StoreHome組件中調(diào)用接口home(),這里異步拿到的response就是Home中的數(shù)據(jù)

mounted () {
      // 發(fā)送請(qǐng)求 異步方式拿到結(jié)果
      home().then(response => {
        if (response && response.status === 200) {
          const data = response.data
          const randomIndex = Math.floor(Math.random() * data.random.length)
          this.random = data.random[randomIndex]
          this.banner = data.banner
          this.guessYouLike = data.guessYouLike
          this.recommend = data.recommend
          this.featured = data.featured
          this.categoryList = data.categoryList
          this.categories = data.categories
        }
      })
    }

• 比如再把這里的random傳給FlapCard子組件

<flap-card :data="random"></flap-card>

大致就是這樣一套完整的流程