Electron-vue实战（二）— 请求Mock数据渲染页面

Electron-vue实战（二）— 请求Mock数据渲染页面

作者：狐狸家的鱼

本文链接

GitHub：sueRimn

一、环境搭建

1、安装Mock.js

如果仅仅用作脱离后台的模拟数据，就安装在开发环境中：

npm install mockjs -D

2、安装axios-mock-adapter

axios-mock-adapter是一款axios的请求模拟调试器，可以使用它来实现请求拦截并模拟后台回复。

npm install axios-mock-adapter -D

二、使用

（1）建立文件

在src/renderer目录下新建mock文件夹与api文件夹，然后mock文件夹下建立data文件夹存放各类模拟数据，再建立index.js文件与mock.js文件，如下：

// mock
mock
├─ data
│    ├─ flignt.js
│    └─ planList.js
├─ index.js
└─ mock.js
// api
api
├─ api.js
└─ index.js

api文件下下的api.js用于封装接口函数。

（2）模拟数据

打开data/planList.js

关于如何Mcok数据在官网已经提及，简单明了。

Mcok.mock()是数据模板，一共有五种方式。

以下数据作为示例使用：

// 引入mock
import Mock from 'mockjs'
const Random = Mock.Random 
const List = []
const count = 300

for (let i =