mockjs

mockjs

程序

前端

    访问后端接口
    展示数据

后端

    后端，负责出来业务逻辑
    访问数据的数据，返回给前端

数据库

    存储数据

情况

很多公司，后端还没有做好接口,写好接口文档
(前端就不需要等待后端实现接口再写代码)
前端可以通过mockjs 参考接口文档自己先摸拟数据
写业务代码，等待后端准备好，在用后端接口替换自己写模拟数据
实现前后端同时开发
mockjs
生成随机数据，拦截ajax
安装
｜ npm  i  mockjs   -D
使用
｜ import  Mock  from  'mockjs'
｜ Mock.mock(url,data)

mock用法

mock(url,data)
mock(url,method,data)
mock(url,method,function(option){return data})
url:可以是正则，也可以是字符串
method：post,get,put,delete
option
    url 请求地址
    method请求方法
    body 请求的参数

随机

数字

    整数 'num|1-100'
    小数点   "price|25-50.2-3":1
    递增

字符串随机

    文字 "score|1-5":"⭐"

中文标题

        "title":"@ctitle(8,14)"

中文段落

        "des":"@paragraph"

布尔值

    "bol|1":true

数组

    "friend|1":[1,2,3]
    "friend|2":[1,2,3] (复制两份)

对象

    "des|2":{}
    随机从对象取两个属性

其他常用

           "id|+1":1024,//(id值)
            name: "@cname",//(名字)
            "age|1-100": 1,//(年龄)
            "price|25-50.2-5": 1,//(价格)
            "score|1-5": "⭐",//(评价)
            "title": "@ctitle(8,14)",
            "description": "@cparagraph",
            "isLog|1": true,
            "friend|2-10": ["小红", "小蓝", "小绿"],
            "des|2": { "eye": 1, "hand": 2, "job": "teacher" },
            "tel": /1\d{10}/,//(正则)
            "email": /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,//(邮箱)
            "canMerry": function () {
                if (this.age > 22) {
                    return true;
                } else {
                    return false;
                }
            },//(函数，此处的是用来判断年龄)
            "day": "@date('yyyy'-MM-ddd)",//(年月日)
            "time": "@time('HH:mm:ss')",//(时分秒)
            "add": "@county(true)",//(地址)
            "avatar":"@dataImage('200x100','图片')"//(图片)