前端开发工具之 Mock.js

Augus

关注

发布于: 3 小时前

前言

在前端开发的时候，往往都需要都需要后端提供接口数据来进行相应页面的开发。但这个时候就需要后端先行开发，之后前端才进行开发，从而可能会影响开发效率。

那前端能不能独立进行开发呢？答案是可以的。接下来就有请我们今天的主角，Mock.js。

Mock.js

是一款模拟数据生成器
生成随机数据，拦截 Ajax 请求。
Mock.js 这个工具完全可以通过我们设置的规则，来提供数据，从而解决了前端不能独立开发的问题。
而且当对接后端接口的时候，也不需要修改既有代码。

使用

// 安装npm install mockjs

复制代码

假设我们有一个获取轮播图的接口。

/** * 轮播图 */export const getBanners = () => request({  url: '/mall/banners',  method: 'get'});

复制代码

这个时候就通过 Mock.js 拦截这个接口，并提供相应的数据。
首先通过 Mock.js 生成数据并导出。

// mail.jsimport Mock from 'mockjs'
export default {  // 轮播图  getBanners: config => {    return {      "data": [        {          "image": "https://s11.mogucdn.com/mlcdn/c45406/201126_0hgl23klege84596ljk0hgcc0g3f2_1060x367.jpg_750x9999.v1c7E.81.webp",          "url": "/promotion/ydftx"        },        {          "image": "https://s17.mogucdn.com/mlcdn/c45406/201125_07510jcdhelj6630a0cibl1fa5ci5_1060x367.jpg_750x9999.v1c7E.81.webp",          "url": "/promotion/jjyz"        },        {          "image": "https://s18.mogucdn.com/mlcdn/c45406/201126_0a5lh50816f213d8e1dai7kl5ij4g_1060x367.png_750x9999.v1c7E.81.webp",          "url": "/promotion/qdpsfx"        }      ],      "status": 200,      "msg": "请求成功"    }  },}

复制代码

在通过 Mock.js 建立相应的接口。

// mock.jsimport Mock from 'mockjs'import mall from './mall'
Mock.setup({  timeout: '300-600'})
// mall 相关Mock.mock('/api/mall/banners', 'get', mall.getBanners)

复制代码

这样我们在通过配置相应的代理地址，就可以了。

好，今天就到这里了。Bye!

收

发布于: 3 小时前阅读数: 5

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

前端开发工具之 Mock.js

前言

Mock.js

使用

Augus

评论