- mock.js源码：https://github.com/nuysoft/Mock
- 替换原生的XMLHttpRequest，使用简便，不需要改变现有的请求代码
- 本项目采用axios做网络请求数据，请求完毕后，代码在线上和线下都是一样的，不需要去替换，在线下本地调试的时候，axios请求完，mockjs会把原生的XMLHttpRequest做一个替换，然后返回mock.js的接口
- 提供丰富的数据类型
- 无法支持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>
大致就是这样一套完整的流程
