Mock.js的基本使用

mock顾名思义,就是模拟的意思,它模拟什么呢?假设我们在开发的过程中,我们需要使用到接口,但是后端接口并没有完善,那么我们就可以使用到mock.js,它可以随机生成数据,拦截AJAX请求,让我为大家简单的介绍一下吧!

在vue脚手架下为大家演示

安装mockjs

javascript 复制代码
npm i mockjs

给大家看一个简单的演示

javascript 复制代码
import Mock from 'mockjs'
import axios from 'axios'
export default {
    created() {
        Mock.mock("/hello", {
            'list|5':[{
                // 重复2次
                'repeat|2':'abc',
                // 年龄18-50 随机
                'age|18-50':0,
                // 字符串 重复次数大于1 小于5 ''随机
                'string|1-5':'',
                // 属性值自增
                "id|+1":1
            }],
        });
        axios.get('/hello').then(res => {
            console.log(res);
        })
    }
}

大家看看是不是很方便

占位符@

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
注意:

1.用 @ 来标识其后的字符串是 占位符。

2.占位符 引用的是 Mock.Random 中的方法。

3.通过 Mock.Random.extend() 来扩展自定义占位符。

4.占位符 也可以引用 数据模板 中的属性。

5.占位符 会优先引用 数据模板 中的属性。

6.占位符 支持 相对路径 和 绝对路径。

拦截AJAX请求

其实就是加入了一个参数,请求方式

javascript 复制代码
import Mock from 'mockjs'
import axios from 'axios'
export default {
    created() {
        // 写get 就是拦截get请求的/hello 
        // 只会拦截相对应的请求 如果是post下的/hello 它不会拦截
        Mock.mock("/hello",'get', {
            'list|5':[{
                // 重复2次
                'repeat|2':'abc',
                // 年龄18-50 随机
                'age|18-50':0,
                // 字符串 重复次数大于1 小于5 ''随机
                'string|1-5':'',
                // 属性值自增
                "id|+1":1
            }],
        });
        // 假设 hello是一个正常的接口 有自己的数据 只要一被拦截
        // res 就会打印 mockjs中的数据
        axios.get('/hello').then(res => {
            console.log(res);
        })
    }
}

学无止境,加油少年!

相关推荐
nbsaas-boot22 分钟前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_78926 分钟前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨1 小时前
GO 启动 简单服务
开发语言·后端·golang
斯普信专业组1 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏3 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js