mock前端模拟数据

前后端分离, 前端开发大半天不能没有数据哇, 没有数据Mock.js帮你造

文档

用法:

npm install mockjs

项目中import引入mockjs

新建自定义的模拟数据文件, xxx.js(注意在vue app.js等入口引入)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}

return {
articles: articles
}
}

// Mock.mock( url, post/get , 返回的数据);
Mock.mock('/news/index', 'post', produceNewsData);

  • Mock用法
  1. 数据格式:

    1
    2
    3
    4
    // 属性名   name
    // 生成规则 rule
    // 属性值 value
    'name|rule': value

    例如生成数字:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
    })
    // =>
    {
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
    }
  2. Mock.mock(url,type,function)

  3. Mock.Random是一个工具类, 生成各种类型随机数据

    1
    2
    3
    4
    5
    6
    7
    var Random = Mock.Random
    Random.email()
    // => "n.clark@miller.io"
    Mock.mock('@email')
    // => "y.lee@lewis.org"
    Mock.mock( { email: '@email' } )
    // => { email: "v.lewis@hall.gov" }
  • Basic

    参数: 例如boolean类型 min/(min+max)的概率是current
    基本类型有: boolean natural integer float
    character string range

  • Date

    日期格式化参数与java类似

  • image

    参数: ( size, background, foreground, format, text )
    dataImage( size, text ) :一般用这个即可

  • color

    color hex rgba

  • Text

    随机生成一段文本
    paragraph英文 cparagraph中文
    word/cword title/ctitle

  • Name

    名字 name/cname

  • Web

    url email ip

  • Address

    region province city
    county zip

  • Miscellaneous

    guid id身份证

本文标题:mock前端模拟数据

文章作者:啪啪啪的指针

发布时间:2018年09月04日 - 15:09

最后更新:2018年09月04日 - 16:09

原始链接:https://www.bootvue.com/2018/09/04/mock/

转载说明: 转载请保留原文链接及作者。