mock.js使用方法

向右看齐 2022-05-15 14:56 185阅读 0赞

简介

生成随机数据，拦截 Ajax 请求

*  **前后端分离** 让前端攻城师独立于后端进行开发。
 *  **增加单元测试的真实性** 通过随机数据，模拟各种场景。
 *  **开发无侵入** 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
 *  **用法简单** 符合直觉的接口。
 *  **数据类型丰富** 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
 *  **方便扩展** 支持支持扩展更多数据类型，支持自定义函数和正则。

### 安装 ###

使用 npm:

npm install mock.js

目录

├─src
    │ ├─mock
    │ │ ├─index.js   
    │ │ ├─main.js       
    │ ├─main.js

新建mock文件夹及对应js文件并在src/main.js中引入。

import './mock'

基本用法

// mock/index.js
    import Mock from 'mockjs'
    import mainAPI from './main'
    Mock.mock(/\/getSystemLog/, 'get', mainAPI.getSystemLog)
    export default Mock

// mock/main.js
    import Mock from 'mockjs'
    const result = []
    for (let i = 0; i < 10; i++) {
      result.push(Mock.mock({
        id: '@increment',
        name: '@first',
        num: '@integer(1, 1000)',
        time: '@datetime',
        title: '@title(2, 4)',
        'state|1': ['true', 'false'],
        image_uri,
        parentAlgoName: '@integer(1, 3)',
        childAlgoName: '@integer(1, 2)',
        userName: 'superadmin',
        createTime: '@datetime',
        'handle|1': ['登录', '修改结果', '添加轮播图']
      }))
    }
    export default {
      getSystemLog: () => ({
        data: {
          pageIndex: 1,
          total: result.length,
          result: result
        }
      })
    }

tips

*  mock.js常用场景为后台接口不存在或者需等待
 *  当不需要mock.js时，需注释src/main.js中的导入代码

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用mockjs来生成模拟数据

Mockjs生成模拟数据在前端进行开发的时候，我们需要拿到后端的接口，然后调用进而拿到后端所提供的数据；但在实际情况当中，有可能后端的接口还没有设计好，但是你想要拿到数

野性酷女/ 2023年01月16日 06:28/ 0 赞/ 171 阅读

相关 Mockjs的理解与简单使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迷南。/ 2022年12月29日 02:25/ 0 赞/ 239 阅读

相关 use mockjs

react and mockjs 1.使用 2.语法 2.1.基础模板 2.1.1.字符串 2.1.2.

一时失言乱红尘/ 2022年12月17日 05:59/ 0 赞/ 214 阅读

相关 MockJs用法详解

MockJs用于拦截 Ajax 请求，生成随机数据，是前端很重要的一个工具。文章目录引入 Mock.mock() 根据数据模板生成模拟数据

落日映苍穹つ/ 2022年12月08日 04:16/ 0 赞/ 157 阅读

相关 mockjs 基础使用

mockjs 基础使用作用：拦截ajax，生成随机数据使用方法 1.安装： npm install mockjs -D

ゝ一世哀愁。/ 2022年12月05日 01:35/ 0 赞/ 213 阅读

相关 mockjs

mockjs 1. 前后端分离（让前端攻城师独立于后端进行开发） 2. 增加单元测试的真实性（通过随机数据，模拟各种场景） 3. 开发无侵入（不需要修改既有代码

小鱼儿/ 2022年12月04日 12:58/ 0 赞/ 217 阅读

相关 mockjs新手教程

安装：cnpm install mockjs 例子: 1.新建文件mock.js，里面的代码如图所示。require引入mockjs，produceNewsData就是一个

客官°小女子只卖身不卖艺/ 2022年02月05日 01:29/ 0 赞/ 444 阅读

相关 vue中使用mockjs

1.安装mockjs 和axios npm install --save-dev mockjs npm install --save axios 2.在sr

╰半橙微兮°/ 2021年12月19日 02:21/ 0 赞/ 288 阅读

相关 mockjs的常用方法

一.mock.mock() 根据数据模板生成模拟数据。更关键的是，我们发起Ajax请求的时候要能够接收到这些数据。这就是Mock.mock()的作用啦！ Mock.mock

Dear 丶/ 2021年09月15日 02:52/ 0 赞/ 789 阅读

相关 vue中使用mockjs模拟接口

效果图 ![9d7a5b501eb0468ea5d153e5005d4693.png][] ![7b58f80c50964e958ab8ae915c3f565b.png]

╰半橙微兮°/ 2021年09月09日 03:36/ 0 赞/ 471 阅读