Mock.js的基本使用

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

在vue脚手架下为大家演示

安装mockjs

npm i mockjs

给大家看一个简单的演示

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请求

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

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);
        })
    }
}

学无止境,加油少年!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/505898.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mysql执行脚本导入表和数据后中文注释乱码解决

本人在使用不同版本下进行操作时,就会出现中文乱码的问题。例如我本地安装mysql8,服务器安装的是mysql5,然后本地连接服务器的mysql后,执行SQL脚本之后发现中文全部乱码 使用工具查看,注释也都是乱码 解决方案 本地…

vue 视频添加水印

1.需求背景 其实腾讯云点播的api也支持视频水印,但是只有单个水印,大概效果是这样子的,不满足我们的需求,我们的需求是需要视频中都是水印。 腾讯云点播水印 项目需求的水印(主要是防录屏,最后的实现效果是这样&…

AcWing 4405. 统计子矩阵:做题笔记

目录 暴力思路 代码 前缀和双指针 代码 解释 推荐博客 这道题的主要思路就是枚举所有的子矩阵,判断符合条件的子矩阵的个数。 暴力思路 我服了,其实我最开始没有想到 :枚举所有的子矩阵 这样一个很有总结性的要点。 我是想着哦我先…

重读Java设计模式: 深入探讨建造者模式,构建复杂对象的优雅解决方案

引言 在软件开发中,有时需要构建具有复杂结构的对象,如果直接使用构造函数或者 setter 方法逐个设置对象的属性,会导致代码变得冗长、难以维护,并且容易出错。为了解决这个问题,我们可以使用建造者模式。 一、建造者…

Jamba LLM模型:破解大型上下文窗口挑战的AI新星

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

使用Postman进行websocket接口测试

因为最近要搞关于基于AI的文本接口测试.需要用到websocket协议,于是看了一下发现postman也可以测而且很方便 位置 File->New->WebSocket 可以看到不止WebSocket还支持其他的各种协议 使用 首先先点击connect进行连接 连接成功之后可以选择多种文本格式添加请求参数 每…

打开DICOM文件需要注意到的点

DICOM图片用来存储医学信息 我一般处理的是图像信息,总结一下踩过的坑 打开DICOM文件需要注意到的点 DICOM图片使用python进行打开一定要注意窗口问题,dicom文件里面存储了很多其他的附加信息,不仅仅是图片,其中最重要的一个条就…

力扣刷题Days29-128.最长连续数列(js)

目录 1,题目 2,代码 2.1自己实现 2.2哈希表 3,学习与收获 枚举思想: 遍历的核心逻辑 碎碎念 本题 先是想到利用数组排序,从而简化遍历处理逻辑,再在提交错误提醒的情况下,考虑到数组中存…

Tab切换(Html+JavaScript+Css)

1.CSS样式 <style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;margin-left: 300px;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font…

Zeppelin安装

Zeppelin是一个基于Web的开源数据分析可视化工具&#xff0c;它提供了一个交互式的笔记本界面&#xff0c;用于在大数据环境中进行数据探索、数据分析、数据可视化和协作。Zeppelin的主要特点包括多语言支持、可视化功能、数据共享和协作&#xff0c;以及扩展性。它支持多种编程…

C++ 数组 结构编程题

一 求100以内的所有素数 /* * 需要标记2~100 之间的数是否处理 * 用数组&#xff0c;初始为0 表示都是素数&#xff0c;如果 判断为合数则置为1过用 */ #include<stdio.h> #include<math.h> int main() {const int n 100;int isPrim[n 1] { 0 };int i, j;for (…

C++ MFC

C是一种静态数据类型检查的、支持多重编程范式的程序设计语言&#xff0c;支持过程化程序设计、数据抽象、面向对象程序设计、制作图标等泛型程序设计的多种程序设计风格。 MFC(Microsoft Foundation Classes)&#xff0c;是一个微软公司提供的类库&#xff0c;以C类的形式封装…

JAVAEE之CSS

1.CSS 是什么&#xff1f; 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 1.1 CSS和HTML的区别 CSS&#xff0c;全称为层叠样式表(Cascading Style Sheets)&#xff0c;是…

【Spring Boot 源码学习】ConditionEvaluationReport 日志记录上下文初始化器

《Spring Boot 源码学习系列》 ConditionEvaluationReport 日志记录上下文初始化器 一、引言二、往期内容三、主要内容3.1 源码初识3.2 ConditionEvaluationReport 监听器3.3 onApplicationEvent 方法3.4 条件评估报告的打印展示 四、总结 一、引言 上篇博文《共享 MetadataRe…

redis和数据库数据不一直问题,缓存常见的三大问题

文章目录 数据一致性缓存常见问题缓存穿透缓存击穿缓存雪崩 数据一致性 1 思路 查询数据的时候&#xff0c;如果缓存未命中&#xff0c;则查询数据库&#xff0c;将数据写入缓存设置超时时间修改数据时&#xff0c;先修改数据库&#xff0c;在删除缓存。 2 代码实现 修改更…

【原创】基于分位数回归的卷积长短期结合注意力机制的神经网络(CNN-QRLSTM-Attention)回归预测的MATLAB实现

基于分位数回归的卷积长短期结合注意力机制的神经网络&#xff08;CNN-QRLSTM-Attention&#xff09;是一种用于时间序列数据预测的深度学习模型。该模型结合了卷积神经网络&#xff08;CNN&#xff09;、长短期记忆网络&#xff08;LSTM&#xff09;和注意力机制&#xff08;A…

P1803 凌乱的yyy / 线段覆盖(贪心)

思路&#xff1a; 这道题让求区间覆盖&#xff0c;它要求只能一个一个的区间&#xff0c;先对n个区间进行排序&#xff0c;按照区间的结束点前后进行排序。所以从后往前看结束时间点&#xff0c;如果下一个的起点在前一个的结束点之后&#xff0c;则数量加1。 代码&#xff1a…

Python进阶编程 --- 1.类和对象

文章目录 第一章&#xff1a;1.初始对象1.1 使用对象组织数据1.2 类的成员方法1.2.1 类的定义和使用1.2.2 创建类对象1.2.3 成员变量和成员方法1.2.4 成员方法的定义语法1.2.5 注意事项 1.3 类和对象1.3.1 基于类创建对象 1.4 构造方法1.5 其他内置方法1.5.1 魔术方法str字符串…

鸿蒙OS开发实战:【网络管理HTTP数据请求】

一、场景介绍 应用通过HTTP发起一个数据请求&#xff0c;支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 二、 接口说明 HTTP数据请求功能主要由http模块提供。 使用该功能需要申请ohos.permission.INTERNET权限。 涉及的接口如下表&#xff0c;…

python爬取B站视频

参考&#xff1a;https://cloud.tencent.com/developer/article/1768680 参考的代码有点问题&#xff0c;请求头需要修改&#xff0c;上代码&#xff1a; import requests import re # 正则表达式 import pprint import json from moviepy.editor import AudioFileClip, Vid…