mockjs的概念与使用

最新推荐文章于 2024-03-06 22:41:25 发布

不会敲代码的小王ꦿ

最新推荐文章于 2024-03-06 22:41:25 发布

阅读量613

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_68086484/article/details/127497247

版权

一、为何使用mockjs

1、程序

前端：访问后端接口，展示数据

后端：后端，主要负责处理业务逻辑，访问数据的数据

数据库：存储数据

很多公司，后端还没有写好接口，写好接口文档（前端就不需要等待后端实现接口再写代码），前端可以通过mock.js参考接口文档自己先模拟数据写业务代码，等待后端准备好，在用后端接口替换自己写模拟数据，实现前后端同时开发。

二、mock.js的安装

生成随机数据，拦截ajax

安装mock.js

npm i mockjs -D

mock.js的用法

使用 import Mock from ‘mock.js'
Mock.mock(url,data)

三、mock的用法

mock（url，data）
mock（url，method，function（option）
{
return data
}）

url：可以是正则，也可以是字符串
methods：post，get，put，delete
option
- url 请求地址
- method 请求方法
- body 请求参数

1、导入mock.js

//导入mock
import Mock from 'mockjs'
//拦截ajax，生成伪数据，拦截地址“/v5/list”

2、模拟数据

//导入mock
import Mock from 'mockjs'
//拦截ajax，生成伪数据，拦截地址“/v5/list”
Mock.mock(/\/v5\/list/, {
    name: 'mumu',
    age: 18
})

result

3、post请求

//post请求成功
Mock.mock(/\/v5\/item/, "post", {
    code: 0,
    msg: "成功",
    data: [1, 2, 3, 4]
})

result

4、参数


Mock.mock(/\/v5\/jok/, "post", function (option) {
    return {
        code: 0,
        msg: "参数成功",
        data: {
            title: "信息标题",
            content: "内容",
            ...JSON.parse(option.body)
        }
    }
})

result

四、随机

1、数字：整数、小数点、递增

2、字符串随机：文字中文本标题中文段落星期

3、布尔值

4、数组

5、对象


//随机
Mock.mock(/\/v5\/user/, {
    code: 0,
    msg: "成功",
    "data|10": [
        {
            "id|+1": 1024,
            "name": "@cname",
            "age|1-100": 1,
            "price|25-50.2-5": 1,
            "score|1-5": "♥",
            "title": "@ctitle(8,14)",
            "desciotion": "@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-dd)",
            "time": "@time('HH:mm:ss')",
            "add": "@country(ture)",
            "avatar": "@dataImage('200x100','小猴')"
        }
    ]
}

result