mock.js的开发方式及变量解释说明
文章 1332 0 0 0
发布时间:2020年01月21日

概述

大致设想

直到在一个夜黑风高的晚上,我邂逅到它,顿时感觉,整个世界都安静了不少。站长在经历当中遇见最恶心的事就是什么也没有,没有文档,没有交流,你做你的我做我的,很反感这样的开发方式,各做各的没有一点交流合作,团队也不会有多大的成长!

正确的开发姿势

mock.js的开发方式及变量解释说明

站长的经历就是给做吧,对不对没人说,执行力很低如果想改变自己那么就要共同协作!

如果你符合上图的开发方式请使用mock.js,不符合上图方式那么请弃用!

官方网址:http://mockjs.com/

常用的mock占位

占用符 解释
@cname 中文人名
@id 身份证id
@title 中文title
@city 中文城市
@ip ip 地址
@email email
@url url地址
@csentence(1,5) 生成1到5个字的中文句子
@cparagraph 生成中文段落
@string(11) 输出11 个字符长度的字符串
@float(0,10) 0 到 10 的浮点数
@integer(60,70) 60 到 70 之间的整数
@booleanboolean 类型 true,false

更多mock参数

{
    "base": {
        "range": "@range(3, 7)",// [3,4,5,6]
        "string": "@string(7, 20)", //输出7-20个字符长度的字符串
        "character": "@character('abcde')",//随机从abcde中选一个字母
        "float": "@float(60, 100)",//60 到 100 的浮点数
        "integer": "@integer(60, 100)",//60 到 100 的整数
        "natural": "@natural(60, 100)",//60 到 100 的自然数
        "boolean": "@boolean" //boolean 类型 true,false
    },
    <!—时间类型—>
    "date": {
        "date": "@date",//1982-07-20
        "time": "@time",// 11:21:39
        "datetime": "@datetime",// 1972-12-16 02:04:24
        "now": "@now" //当前时间 2018-07-17 18:19:29
    },
    <!—图片—>
    "image": {
        "image": "@image('200x100', '#50B347', '#FFF', 'EasyMock')" //         https://dummyimage.com/200x100/50B347/FFF&text=EasyMock 尺寸 背景 文字颜色 提示信息
    },
    <!—颜色系列—>
    "color": {
        "color": "@color", //16进制颜色值#79e0f2
        "hex": "@hex", // #f2e179
        "rgb": "@rgb", //rgb(189, 121, 242)
        "rgba": "@rgba",//rgba(189, 121, 242, .7)
        "hsl": "@hsl" //hsl(136, 82, 71)
    },
    <!—文案类—>
    "text": {
        "paragraph": "@paragraph(1, 3)",// 随机段落
        "sentence": "@sentence(3, 5)",// 随机句子
        "word": "@word(3, 5)",// 随机3-5个字母
        "title": "@title(3, 5)",// 随机3-5个单词的title
        "cparagraph": "@cparagraph(1, 3)",
        "csentence": "@csentence(3, 5)",
        "cword": "@cword('零一二三四五六七八九十', 5, 7)",
        "ctitle": "@ctitle(3, 5)"
    },
    <!—姓名—>
    "name": {
        "first": "@first",//姓
        "last": "@last",//名
        "name": "@name",//姓名
        "cfirst": "@cfirst",
        "clast": "@clast",
        "cname": "@cname"
    },
    <!—网站—>
    "web": {
        "url": "@url",//url地址
        "domain": "@domain",//域名
        "protocol": "@protocol",//协议
        "tld": "@tld",
        "email": "@email",//邮箱
        "ip": "@ip"//ip地址
    },
    <!—地址—>
    "address": {
        "region": "@region",//区域
        "province": "@province",//省
        "city": "@city(true)",//市
        "county": "@county(true)",//区 带true则携带上级
        "zip": "@zip"
    },
    "helper": {
        "capitalize": "@capitalize('hello')",
        "upper": "@upper('hello')",//全大写单词
        "lower": "@lower('HELLO')",//全小写单词
        "pick": "@pick(['a', 'e', 'i', 'o', 'u'])", //随机选择一个字母
        "shuffle": "@shuffle(['a', 'e', 'i', 'o', 'u'])" //打乱数组顺序
    },
    "miscellaneous": {
        "id": "@id",//身份证id
        "guid": "@guid",//生成32位的随机id
        "increment": "@increment(1)"//自增数,阶度为1
    }
}
评论专区