mock的使用

my sweet heart

已于 2022-07-23 10:53:32 修改

阅读量1.6k

点赞数

分类专栏： mock 文章标签：前端

于 2022-07-23 10:48:56 首次发布

本文链接：https://blog.csdn.net/qq_41552648/article/details/125944653

版权

本文介绍了在前端开发中如何使用Mock数据。首先安装Mockjs依赖，然后在src下创建mock文件夹，存放模拟数据。接着准备模拟数据，如轮播图的json结构，并将图片放在public文件夹。在mock文件夹内创建server.js，注意部分数据不需要暴露。通过Mock.mock方法模拟数据，并在入口文件引入server.js。此外，创建mockRequest文件夹，用axios实例获取模拟数据，并确保在开发过程中进行单元测试。

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

mock数据。

第一步:安装依赖包mockjs

第二部：在src文件夹下创建一个文件夹，文件夹mock文件夹。

第三步:准备模拟的数据
把mock数据需要的图片放置于public文件夹中！
比如:listContainer中的轮播图的数据
[
{id:1,imgUrl:‘xxxxxxxxx’},
{id:2,imgUrl:‘xxxxxxxxx’},
{id:3,imgUrl:‘xxxxxxxxx’},
]

第四步：在mock文件夹中创建一个server.js文件
注意：在server.js文件当中对于banner.json||floor.json的数据没有暴露，但是可以在server模块中使用。
对于webpack当中一些模块：图片、json，不需要对外暴露，因为默认就是对外暴露。

第五步:通过mock模块模拟出数据

通过Mock.mock方法进行模拟数据

第六步:回到入口文件，引入serve.js
mock需要的数据|相关mock代码页书写完毕，关于mock当中serve.js需要执行一次，
如果不执行，和你没有书写一样的。

第七步:在API文件夹中创建mockRequest【axios实例：baseURL:‘/mock’】
专门获取模拟数据用的axios实例。

在开发项目的时候：切记，单元测试，某一个功能完毕，一定要测试是否OK
mockServe.js文件
//先引入mockjs模块

import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';

//mock数据:第一个参数请求地址   第二个参数：请求数据
Mock.mock("/mock/banner",{
   code:200,data:banner});//模拟首页大的轮播图的数据