“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”

近来，想把自己的项目展示在gitee Page上，结果yarn build生成页面后，无奈无法请求数据。因为后台是在本地自己搭建的，在线上并不能请求。于是想到使用mock数据，进行模拟数据，达到gitee Page上展示项目的效果。

接下来介绍几种mock数据的方法。

一、使用mockjs

官网地址： mockjs.com/

下载

（1） 使用npm下载

npm install mockjs

（2）使用script标签引入

<script src="http://mockjs.com/dist/mock.js"></script>

使用方法

// 引入
import Mock from 'mockjs';

// 写法
Mock.mock(url, {
    属性名|规则 : 值
})
// 【注】
// 1. url 可以使用正则表达式

// 例子
Mock.mock('http://a.api.com', {
    list|10: [{
        name: @name(),
        age: @integer(0, 120)
    }]
}) 

// 设置
// 延迟400毫秒得到数据
Mock.setup({
    timeout: 400
})

mockjs其实主要是利用 拦截请求 + 生成js对象 模拟数据。

【缺点】：

1. 请求未发出，被拦截了。在调试的网络面板中，无法看到请求的发出。
2. 项目中引入了不必要的mock数据文件

二、使用ApiPost的mock服务

ApiPost其实就像是把你的mockjs文件放到了一个远程仓库中，给你一个地址请求数据。

第一步

上网百度下载 ApiPost 软件

第二步

1. 创建请求
2. 点击mock服务
3. 在左边的大白框里，根据mockjs规则进行创建mock数据，右边的大白框里可以预览mock数据。
4. 复制mock数据的链接，进行请求 【优点】:
5. 有个线上请求地址，无需在项目中额外多写文件

对于 ApiPost 我还有些疑问不能解决：

1. mock服务的地址，好像暂时不支持restful api的写法
2. 对于get的请求，好像取不了参数

哈哈我在研究研究