专栏首页方球Mockjs ( 模拟数据 ) 快速入门

Mockjs ( 模拟数据 ) 快速入门

mockjs

根据规则生成随机数据, 通过拦截ajax 请求实现 模拟前端数据接口

安装

// yarn
yarn add mockjs // 注意 js前没有 . 分割

// npm
npm --save-dev mockjs

主要模块

  • mock 根据数据模板生成对应的随机数据
  • Random 工具函数, 调用具体的类型函数生成对应的数据
  • valid 检验数据是否与数据规则匹配
  • toJSONSchema 以 JSON Schanma 风格输出数据模板

语法

使用例子

import { mock Random } from 'mockjs'

const data = mock({
    'name|1': ['Rogan', "Coco", "Park"],
    'age|20-40': 1,
    'date': Random.Date('yyyy-MM-dd'),
    'info': /\w{20, 30}/
})

/* 
    {
        "name": "Park",
        "age": 27,
        "date": "1975-10-04",
        "id": "ERJLRMGD3W"
    }
*/


// 作为mock服务
// mockData.js
mock('url', 'meth', 'template')
mock('/api/user', 'get', {
    "name": Random.cname(),
    'age|10-20': 1
})

// vue 中使用 aixos 调用mock接口
import './mockData.js'

async loadList(){

        let { data } = await http.get('/api/usser')
        this.list = data.list
}

作为mock 服务时, 是通过拦截浏览器的ajax请求实现的, 所以无法在node内通过 aixos 访问mock服务数据, mock数据的生成不受限制

基本模式

// 基本模式
[属性名称] | [生成规则] : [初始值]/[配置值]/@[属性名]

{ 'age|20-40': 1 }

// 占位符, 表示使用已有结构的数据模式
 @[属性名]
 
 { 
    'fName': Random.first(),
    'lName': Random.last(),
    'fullName': '@fName @lName'
 }

使用

官方完整例子

官方例子已经很清晰, 查看础例子,参照写就没问题,数组重复数据的地方需要多尝试

Random 常用方法

  • ==boolean== 随机布尔值
Random.boolean( min?, max?, current? )
Random.boolean() // 50% 几率返回 true / false
Random.boolean( 10, 100, true ) // 10%几率返回true
  • ==natural== 随机正整数
Random.natural( min?, max?)
// 无取值范围
Random.natural()

// 有取值范围
Random.natural(1, 5)
  • ==float== 随机浮点数
Random.float( min?, max?, dmin?, dmax? )
// 不带区间
Random.float()

//带区间
Random.float(1,3,4,6)  // 2.5
  • ==string== 随机字符串
Random.string( pool?, min?, max? )
// 固定长度
Random.string(2) // ab

// 长度区间
Random.string(2, 10) // aci@

// 根据字符集取值
Random.string("abcdefj", 1, 3) // cdf
  • ==time== 获取时间
Random.time( format? )
Random.time("yyyy-mm-dd hh:mm:ss")  // -> "1971-06-12 04:50:12"
  • ==new== 获取当前时间
Random.now( unit?, format? )
Random.now("yyyy-mm-dd") // 2019-02-27
  • ==dataImage== 随机Base64图片
Random.dataImage( size?, text? )
Random.dataImage("200x300", "Hello Wolrd") // png格式
  • ==image== 获取定制图片地址
Random.image( size?, background?, foreground?, format?, text? )

size: 尺寸 "100*200"
background: 背景色 "#000000"
foregroundv: 前景色 "#FFFFFF"
format: 格式为 png
text: 内容文字 
  • ==cparagraph== 随机中文文本
Random.cparagraph( min?, max? )
  • ==ctitle== 随机中文标题
Random.ctitle( min?, max? )

对于文字类接口,存在英文版和中文版[c 开头], 例如:title(英文标题) ctitle(中文标题)

  • ==cname== 获取中文名称
Random.cname()
  • ==url== 链接地址
Random.url( protocol?, host? )
Random.url('http') // "http://emcmqmabcd.ne/onfr"
  • ==email== 邮箱地址
Random.email( domain? )
Random.email('nuysoft.com')
// => "h.pqpneix@nuysoft.com"
  • ==province==
Random.province()
  • ==city==
Random.city( prefix? )
Random.city()
// => "唐山市"
Random.city(true)
// => "福建省 漳州市"
  • ==guid== guid token
Random.guid()
  • ==id== 身份证
Random.id()
  • ==increment== 自增数
Random.increment( step? )

step: 自增步长

注意

  • 嵌套
// 模式一
mock({

    "users|1-4": [
        {
            "id": Random.id(),
            "name": Random.cname()
        }
    ]
    
})


// 模式二
const user = mock({ 
        "id": Random.id(),
        "name": Random.cname()
})

const users = mock(
    {
        "users|1-4": user
    }
)

/*
    模式一与模式二的区别在于, 
    前者在生成多个数据时, 嵌套内容将多次生成.
    后者嵌套内容只是同一内容的拷贝
*/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • plop js 模板工具

    copy_left
  • Inquirer.js 交互式命令行

    copy_left
  • golang fmt(格式换 I O接口)

    fmt 方法可以大致分为 print, scan两类, 根据基础方法可以构建特定方法。

    copy_left
  • 编程小知识之 Random接口返回值

    平日工作中,(伪)随机数的使用一定是避不开的,拿 C# 为例,System 命名空间下的 Random 类型一般都是我们生成(伪)随机数的第一选择:

    用户2615200
  • 使用Random来生成随机数的危险性 顶

    234 344 737 314 431 423 823 503 703 654

    算法之名
  • Android Service完全解析,关于服务你所需知道的一切(下)

    版权声明:本文出自郭霖的博客,转载必须注明出处。 https://blog.csdn.net/si...

    用户2192970
  • Android Service完全解析,关于服务你所需知道的一切(下)

    在上一篇文章中,我们学习了Android Service相关的许多重要内容,包括Service的基本用法、Service和Activity进行通信、Servic...

    用户1158055
  • TiDB 1.1 Alpha Release

    2018 年 1 月 19 日,TiDB 发布 1.1 Alpha 版。该版本对 MySQL 兼容性、SQL 优化器、系统稳定性、性能做了大量的工作。

    PingCAP
  • 【php设计模式】策略模式

    策略模式是针对一组算法,将每一种算法都封装到具有共同接口的独立的类中,从而是它们可以相互替换。策略模式的最大特点是使得算法可以在不影响客户端的情况下发生变化...

    码缘
  • SQL Server分区表(二):添加、查询、修改分区表中的数据

    在创建完分区表后,可以向分区表中直接插入数据,而不用去管它这些数据放在哪个物理上的数据表中。我们在创建好的分区表中插入几条数据:

    Vaccae

扫码关注云+社区

领取腾讯云代金券