MockJs

monana6

已于 2022-11-04 18:54:17 修改

阅读量421

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签：前端 vue.js javascript

于 2022-11-04 18:52:16 首次发布

本文链接：https://blog.csdn.net/Wu_whiteHyacinth/article/details/127694471

Vue3 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用MockJS在前后端分离开发中模拟数据，包括基本用法、数据模板定义及常见随机生成函数。

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

MockJS

为什么使用它：

1.[前后端分离]，有时候后端开发比前端慢我们开发完成后端接口还没写好，这个时候前端就可以自己模拟数据测试
2.可生成你需要的随机数据
3.用法简单
4.在后端接口完成之后，只需要改变url请求地址即可。

整体的使用规则

官方文档 http://mockjs.com/

@/Mock/index.js文件

函数一：Mock.mock(参数一：拦截的请求地址, 参数二：需要拦截的请求类型，参数三：生成的响应数据的函数)

import Mock from "mockjs"

// 方法一：指定请求方式
// 为什么使用双层的Mock?
// 因为外层的Mock是拦截ajax请求的，里面的Mock是模拟假数据的

Mock.mock('/api/login','get',function(option){
    //option是相关的请求参数，一般我们post传参的时候可以打印一下看一下是不是传的正确
    console.log(option);
    return Mock.mock({
        "data|10":[{
            // 自定义的数据
            name:"@cname",//随机的中文名

        }
        ]
    })
})
// 方法二 不规定请求方式，post或get均可使用,推荐这种方式
Mock.mock( '/api/login', 
     Mock.mock({
        "data|10":[{
            // 自定义的数据
            name:"@cname",//随机的中文名

        }
        ]
    })
)

写好这个文件，但是我们要将这个文件运行起来，这样就是在main.js中引入这个文件

import ./Mock/index.js

此外使用mockjs前还要将axios挂载到Vue原型上(post与get都要进行)

import axios from 'axios';
Vue.prototype.$axios = axios;

然后我们在拦截的地址页面上编写请求对应的url即可，请求的方式也要对应起来

<template>
    <div>
        <button @click="login">登录</button>
    </div>
</template>

<script setup>
const login = async()=>{
    const {data} = await this.$axios.get('/api/login')
    console.log(data)
    }
</script>

<style lang="scss" scoped>

</style>

对于地址是动态变化的地址，我们可以使用正则地址来模拟

// url为：/api/get/list?pageindex=1&pagesie=10
// 无法与/api/get/list匹配，因此要用到正则,这个的意思就是包含/api/get/list的地址即可，\为转移字符
Mock.mock(/\/api\/get\/list/,'get',(options)=>{
    console.log(options)   //业务代码省略
})

数据模板的定义

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：。写法如下：

‘name|rule’: value // ‘属性名|生成规则’：属性值

2.数据占位符的定义规范，占位符只在属性值字符串中占个位置，并不出现最终的属性值中，格式为

@占位符
@占位符(参数 [, 参数])

Mock.Random随机生成函数

这些函数在使用的时候，前面加上@

id:"@increase(1)"  //生成一个全局的自增整数。
name:"@cword(2,6)" //随机生成一个2~8个字的中文文本

相关的函数可以去官网上去看

在这里插入图片描述

常用的一些语法

  // 自动生成20条数据
  "data|20": [{
    // 从ID为1开始，每条数据ID自动加1
    "ID|+1": 1,
    // 随机生成一个中文名-->俊怡
    'name': "@cname",
    // 随机生成数组中的1项-->房产消费
    'type|1': ["汽车消费","房产消费","抵押贷款"],
    // 随机生成5-20个中文-->次几委数没百电报个者料完改从
    'text|5-20': '@cword',
    // 随机生成一个范围0-10的数字-->6
    'account|0-10': 1,
    // 随机生成一个日期时间-->"1975-10-27 00:44:40"
    "date":"@date('yyyy-MM-dd HH:mm:ss')"
    // 随机生成一个日期-->"1975-10-27"
    "date":"@date"
    // 随机生成一个大小100×100，颜色随机,格式为png的图片地址
    "imgUrl": "@Image('100x100','@color','png')",
    // 随机生成一个邮箱：
    "email": "@email",
    // 随机生成一个颜色-->#79f2e3
    "color": "@color",
    // 随机生成一个布尔值-->true
    "is": "@boolean",
    // 随机生成一个英文名-->Helen Brown
    "name": "@name",
    // 随机生成十个中文组成的标题
    "title": "@ctitle(10)",
    // 随机生成一个中国大区
    "cregion":"@region",
    // 随机生成一个省
    "cprovince":"@province",
    // 随机生成一个市
    "ccity":"@city",
    // 随机生成一个县
    "country":"@county",
    // 随机生成一个省 + 市
    "ss":"@city(true)",
    // 随机生成一个省市县-->"陕西省 商洛市 山阳县"
    "countrysx":"@county(true)",
  	//随机生成邮政编码
    "code":"@zip"
  }]