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

最新推荐文章于 2024-07-29 22:34:07 发布

DebJane

最新推荐文章于 2024-07-29 22:34:07 发布

阅读量834

点赞数 1

分类专栏： electron VUE

本文链接：https://blog.csdn.net/sueRimn/article/details/94004329

版权

本文介绍了在 Electron-vue 项目中使用 axios-mock-adapter 进行请求模拟，包括环境搭建、创建模拟数据文件、封装接口、拦截请求以及数据渲染的详细步骤。通过模拟数据，可以在开发阶段独立于后端进行页面渲染。

摘要由CSDN通过智能技术生成

一、环境搭建

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 = 0; i < count; i++) {
   
    List.push(Mock.mock({
   
        id:Random.integer(2, 10), // 随机生成由2-10的整数
        name: Random.cname(), // 名字
        'sex|1': ['男', '女'], // 属性名sex|规则：属性值  从数组里随机选一个
        date: Random.date(), // 默认日期为Y-M-D
        port: Random.string('upper', 2), // 随机的两个大写字母构成的字符串
        bay: Random.string('lower', 2), // 随机的两个小写字母构成的字符串
        externalState： Random.csentence(3), // 三个字构成的一段文语句
        'vipGrade|1': ['★', '★★', '★★★'], // 随机选择      
    }))
}