mockjs

Lyw丶Joker

于 2022-10-24 18:34:33 发布

阅读量897

点赞数

文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/m0_72474345/article/details/127498326

版权

MockJS 是一种工具，允许前端开发者在后端接口未完成时模拟数据，实现并行开发。它能生成随机数据，拦截 Ajax 请求，帮助前端快速构建界面。通过 `Mock.mock()` 方法，可以指定 URL、HTTP 方法和返回数据。MockJS 支持多种数据类型模拟，如数字、字符串、对象、数组等。使用 MockJS 可以提高开发效率，减少等待时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mockjs

程序

    前端
        对前端来说，日常工作中需要访问后端接口，并展示接口内的数据
    后端
        对后端来说，需要负责处理业务逻辑，访问数据库中的数据，并返回给前端
    数据库
        除此之外，还需要对数据库进行存储数据

为什么要使用mockjs

    市面上很多公司，后端还没有做好接口文档（前端就不需要等待后端实现接口后再写代码）
    前端乐意通过mockjs参考接口文档自己先模拟数据
    写业务代码，等待后端准备好，再用后端接口替换自己写的模拟数据

优点

    可以实现前后端同时开发，方便程序员
mockjs的作用
    生成随机数据，拦截Ajax请求

mockjs如何安装及使用

    安装
        npm i mockjs -D
    使用
        import Mock from 'mockjs'
        Mock.mock(url,data)
    在main.js中导入
        import '@/utils/mock'

Mockjs的三种形式

    1.mock（url，data）
    2.mock（url，method，data）
    3.mock（url，method，function（option）{return data}）
    注意：
     url：可以是字符串，也可以是正则表达式
     method：post,get,put,delete
     option内部：（url请求地址、method请求方法、body请求参数）

mockjs可以用来做随机

    数字
     整数：“num|1-100”
     小数点：“price|25-50.2-3”:1
    字符串随机
     文字"score|1-5":“⭐”
     中文本标题：“title”:“@ctitle(8,14)”
     中文段落：“description”:“@cparagraph”
    布尔值
     “isLog|1”: true
    数组
     “friend|2-10”: [“小红”, “小蓝”, “小黄”]（输出2-10遍）
    对象
     “des|2”: { “eye”: 1, “hand”: 2, “leg”: 2 }

其他

{
                "id|+1": 1024,
                "name": "@cname",
                "age|1-100": 1,
                "price|25-50.2-5": 1,
                "score": "@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,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": "@county(true)",
                "avatar": "@dataImage('200x100','')"
            }