[PuffBook项目总结]mock.js模拟数据，axios做

1. mock.js源码：https://github.com/nuysoft/Mock
2. 替换原生的XMLHttpRequest，使用简便，不需要改变现有的请求代码
3. 本项目采用axios做网络请求数据，请求完毕后，代码在线上和线下都是一样的，不需要去替换，在线下本地调试的时候，axios请求完，mockjs会把原生的XMLHttpRequest做一个替换，然后返回mock.js的接口
4. 提供丰富的数据类型
5. 无法支持blob类型，无法模拟下载（我们的电子书下载的时候会使用Blob类型）

使用mock.js

• 安装mock.js

npm i mockjs --D

• 安装axios

npm i axios --save

• 创建mock文件夹，提供原数据（一些json文件，用来做接口数据的模拟）

  
  image.png

• mock文件夹下创建index.js 并在项目的main.js中引入

• 在index.js中做初始化

import Mock from 'mockjs'
import home from './bookHome' // 首页的所有数据
import shelf from './bookShelf' // 书架的所有数据
import list from './bookList' // 图书的所有列表
import flatList from './bookFlatList' // 方便做查询用的

// 第一个参数，正则表达式匹配所请求的URL
Mock.mock(/\/book\/home/, 'get', home) // 前端请求/book/home的时候，就会请求home里的数据
Mock.mock(/\/book\/shelf/, 'get', shelf)
Mock.mock(/\/book\/list/, 'get', list)
Mock.mock(/\/book\/flat-list/, 'get', flatList)

• 在src目录下创建api目录，创建store.js利用axios做数据请求

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

这样做就可以请求mock里Home中的数据

• 在StoreHome组件中调用接口home(),这里异步拿到的response就是Home中的数据

mounted () {
      // 发送请求 异步方式拿到结果
      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>

大致就是这样一套完整的流程