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

本文介绍了在 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': ['★', '★★', '★★★'], // 随机选择      
    }))
}

第一种:Mock.mock(template)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值