Mock 使用方式 + 在 Vue 项目中使用 Mock

article/2025/5/3 3:49:26

Mock

  • Mock 介绍
  • 搭建测试项目
  • mock.js 模拟数据的基础使用方式
  • Vue 项目中使用 mock.js 拦截数据
  • 后端接口写好后,mock.js 的移除处理


写下博客用于自我复习、总结。
如有错误之处,请各位大佬指出。
学习资料来源于:尚硅谷


Mock 介绍

在前后端开发过程中,后端进行接口开发,前端使用对应接口从数据库获取前端想要展现的数据。对于后端来讲,它们需要根据需求文档,确定要写的接口的功能。有时,虽然接口还没有写出来,但是相关接口文档已经写出来了。这时前端如果想要调用接口,但是接口还没有完成,前端开发人员也就只能含泪上班摸摸鱼了。

那在开发过程中,为了避免这样的情况发生,现在前端已经能够独立于后端进行开发,也就是前端开发人员可以自己根据接口文档去模拟假数据。这个问题的解决方案就是使用第三方库 mock.js。它将可以用来生成随机的数据并拦截Ajax请求

在这里插入图片描述
那么为什么要学习了解并在一些情况下考虑选择使用 Mock 来模拟数据呢?我自己把测试数据写死,我看也挺好,再安装第三方库是不是麻烦了点?

对于上述疑问,不妨先来看看在 Mock 官网给出的六大特性。

在这里插入图片描述
简单叙述一下:

Mock 要做的是前后端分离,从而让前端人员能够独立于后端进行开发。但是如果在前端模拟接口十分麻烦,那就得不偿失了。但是 Mock 完全不用担心,它的用法十分简单。而且,当我们想使用 Mock 时,不需要修改既有的代码,只需要让其拦截 Ajax 请求即可。想正常发送 Ajax 请求调用接口时,只需要不让 Mock 拦截请求即可。除此以外,后端提供的数据,每次都是相同的。如果在某种情况下,想测试不同数据的效果,让后端同事去数据库修改数据,一是麻烦,二是不够随机性。而 Mock 可以在每次拦截时都返回一组随机数据,模拟各种场景。它支持生成随机文本、数字、布尔值、日期、邮箱、链接、图片、颜色等各种各样的数据。这还不算完,如果想自定义随机其他类型数据,我们也可以对其进行扩展,而且扩展方式也很简单,扩展的时候还支持自定义函数和正则表达式。总结来说,功能性极强,对前端开发人员很友好。

本篇文章将主要介绍如何在 Vue 项目中使用 Mock 拦截请求并返回模拟数据


搭建测试项目

1、找一个空文件夹,打开 cmd 命令行,执行命令: vue create xxx
(xxx:文件夹名称随意)
在这里插入图片描述
2、随后在接下来的选择中,为了演示就用 Vue2 的默认项目即可。
在这里插入图片描述
3、在通过漫长的等待后,终于创建成功。
在这里插入图片描述
4、此时进入项目,安装相关依赖:

使用 axios 发送 ajax:cnpm install axios –save

使用 mockjs 生成随机数据:cnpm install mockjs –save-dev

在这里插入图片描述
5、测试项目创建完成。


mock.js 模拟数据的基础使用方式

在 Vue 项目中使用 Mock 之前,先简单介绍一下相关使用方式。

想要测试一下基础方法,我们可以在刚才的项目文件夹下,创建一个 mock 文件夹,里面包含一个 js 文件,用来测试使用基础使用方式。
在这里插入图片描述
想要测试 mock 的基础语法,我们只需要在 testMock.js 文件中包含以下基础内容:

// 先用 require 导入 mockjs
const Mock = require('mockjs')
// 随后就可随意测试 mockjs 语法
let id = Mock.mock('@id')
console.log(id);

随后使用 node xxx (xxx:js文件名)的形式,运行即可看到输出结果。此时已经可以看到上述代码的运行结果。
在这里插入图片描述
这就是最基本的模拟数据方法,使用的 Mock.mock。它将根据数据模板生成模拟数据。

对于 Mock.mock 中可选用的用法和可用工具类可参考官方文档。官方文档介绍的很详细,案例也全部都展现了出来,很容易理解:

http://mockjs.com/examples.html
https://github.com/nuysoft/Mock/wiki

在这里就不将它们全部复制过来了。我们只需要在需要时查看官方文档,寻找相关用法即可。为了之后方便查看,在这里只展示几个用法。

const Mock = require('mockjs')
const fs = require('fs')let obj = Mock.mock({id: "@id()",                   // 得到随机的idusername: "@cname()",          // 随机生成中文名字date: "@date()",               // 随机生成日期avatar: "@image('200x200','red','#fff','avatar')",   // 随机生成图片description: "@paragraph()",   // 随机生成描述ip: "@ip()",                   // 随机生成ip地址email: "@email()",             // 随机生成email// 范围内,随机重复字符串次数"string|1-10": "xxx",// 范围内,随机生成数字"number|1-100": 100,// 随机生成布尔值"boolean|1": true,// 在对象中,抽取随机数个数据"object|1-4": {"110000": "北京市","120000": "天津市","130000": "河北省","140000": "山西省"},// 在数组中,抽取随机数个数据"array|1-10": [{// 抽出的每个数据中的对象将轮流从该数组中抽取"name|+1": ["Hello","Mock.js","!"]}],// 根据正则表达式,随机生成自定义数据'regexp': /[a-z][A-Z][0-9]/,
})
fs.writeFile('./result.json',JSON.stringify(obj),()=>{console.log('done')
})

我们可以看到效果:
在这里插入图片描述

算上上面的用法,共有三种生成随机数据的形式:

let Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

第一种是直接拿到对应工具类的对象,并直接调用其中方法,比如 Random 是一个工具类,用于生成随机数据。

第二种是使用Mock.mock,直接使用对应方法的 @ 即可,不用刻意调用某个工具类。但是这种方式和第一种方式一样,输出的是个字符串。

第三种依然使用Mock.mock,但是会以对象的形式返回随机数据。由于后端接口返回的数据将会是JSON格式,所以为了模拟数据,通常用这种方式写。


Vue 项目中使用 mock.js 拦截数据

如果想要在项目中使用 mock,首先需要在项目根目录下找到或者新建 vue.config.js。其中的内容为:

module.exports = {devServer: {before: require('./mock/index.js') // 引入 mock/index.js}
}

随后在对应文件夹中,新建一个 index.js。
在这里插入图片描述
其中的内容为:

const Mock = require('mockjs'); // 导入依赖模块// 返回一个函数
module.exports = function(app){// 监听 http 请求app.get('/user/userinfo', function(rep, res){// 设置要返回的数据let json = {id: "@id()",                    // 得到随机的idusername: "@cname()",           // 随机生成中文名字date: "@date()",                // 随机生成日期avatar: "@image('200x200','red','#fff','avatar')",  // 生成图片                  description: "@paragraph()",    // 描述ip: "@ip()",                    // ip地址email: "@email()",              // email}res.json(Mock.mock(json));});
}

此时,我们就可以去 Vue 组件中发送 axios 请求,去获取 mock 提供的数据。

1、首先运行项目: npm run serve

2、随后在任意一个 Vue 组件里发送请求:

import axios from "axios";
export default {mounted() {axios.get('/user/userinfo').then(res => {console.log(res);}).catch(err => {console.log(err);})}
}

3、测试成功:
在这里插入图片描述


后端接口写好后,mock.js 的移除处理

最终不要忘记,mock.js 只是用来模拟接口。当后端接口完成后,就需要将 mock.js 从项目中“移除”。但是所谓移除不是单纯的把之前的拦截文件去掉或者注释掉。之前提到过 mock 的一个特性,就是开发无侵入,我们可以利用 Vue CLI 的特性,给一个判断接口是否存在的功能。具体说明:

1、在package.json中,我们可以看到项目运行的命令。
在这里插入图片描述
2、这些命令会对应着 Vue CLI 项目中不同的模式:
在这里插入图片描述
3、综上所述,我们使用的项目运行 npm run serve 会对应着 development 模式。我们移除 mock 的处理,只需要通过设置 development 模式的环境变量,就可以实现。具体来看:

(1)首先查看环境变量的设置:
在这里插入图片描述
我们选用 .env.[mode] 这种用法,即:在指定的模式中被载入。

(2)在项目的根目录下,创建 .env.development 环境变量文件( file 类型即可),其中的内容如下:
在这里插入图片描述
(3)在我们使用 mock 模拟接口的 index.js 文件中,我们只需要做以下处理即可:

module.exports = function(app){// 增加判断条件:if(process.env.MOCK == 'true'){// 监听 http 请求app.get('/user/userinfo', function(rep, res){// 设置要返回的数据let json = {id: "@id()",                   // 得到随机的idusername: "@cname()",          // 随机生成中文名字date: "@date()",               // 随机生成日期avatar: "@image('200x200','red','#fff','avatar')",   // 生成图片                description: "@paragraph()",   // 描述ip: "@ip()",                   // ip地址email: "@email()",             // email}res.json(Mock.mock(json));});}
}

(4)随后,只需要调整这个环境变量值,就可以决定 mock 是否会拦截请求了。测试成功:
在这里插入图片描述
在这里插入图片描述


http://chatgpt.dhexx.cn/article/vxGbiYOi.shtml

相关文章

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P051-100]

视频链接:尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:尚硅谷Vue2.0Vue3.0全套教程视频笔记 代码 [P001-050]_小白桶子的博客-CSDN博客 P51-100:当前页面 P101-135:尚硅谷Vue2.0Vue3.0全套教程视频…

VirtualXposed 免ROOT使用Xposed模块

免ROOT使用Xposed模块 一,下载工具 VirtualXposed 官网地址 或者 百度网盘 提取码:39hu 二,安装应用 安装完成打开VirtualXposed可以看到界面,点击下面圆圈就可以进入添加应用,模块管理&#xff0…

Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 模板编译

文章目录 一、模板编译简介二、体验模板编译的结果三、Vue Template Explorer四、编译的入口函数五、模板编译过程5.1 compileToFunctions5.2 compile5.3 baseCompile5.3.1 baseCompile-AST5.3.2 baseCompile-parse5.3.3 baseCompile-optimize5.3.4 baseCompile-generate 5.4 模…

全栈低码开源框架 json-script-rule 配置说明

说明 配置主要分为映射信息配置和spring配置文件application的配置 映射信息 映射信息通常指的是所配置的po类与映射表的相关信息,通过相关注解来获取相关的静态信息,当然这里也可以通过其它的渠道来加载这些配置信息,如数据库、xml文件等…

全栈低码开源框架 json-script-rule 导入

说明 导入功能是将带有数据的excel文件上传后再通过程序导入到数据库&#xff0c;创建模型如下 Data public class JSRuleImport<A extends JSRuleAction<A>> implements IJSRuleActionModel<A>{/*** <p>导入excel对象&#xff0c;别名e* */JsonAlias…

Vue3 —— to 全家桶及源码学习

该文章是在学习 小满vue3 课程的随堂记录示例均采用 <script setup>&#xff0c;且包含 typescript 的基础用法 前言 本篇主要学习几个 api 及相关源码&#xff1a; toReftoRefstoRaw 一、toRef toRef(reactiveObj, key) 接收两个参数&#xff0c;第一个是 响应式对象…

vue框架安装mock

mock是&#xff1a;通过随机数据,模拟各种场景。 开发无侵入 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 用法简单 符合直觉的接口。 1、安装mock前先安装axios请求 &#xff1a;** npm install axios --save** 安装成功axios的链接&#xff1a; 2、安装mo…

【甄选靶场】Vulnhub百个项目渗透——项目十六:FristiLeaks_1.3(文件上传,py脚本改写,sudo提权,脏牛提权,源码获取)

Vulnhub百个项目渗透 Vulnhub百个项目渗透——项目十六&#xff1a;FristiLeaks_1.3&#xff08;文件上传&#xff0c;py脚本改写&#xff0c;sudo提权&#xff0c;脏牛提权&#xff0c;源码获取&#xff09; 靶场地址 &#x1f525;系列专栏&#xff1a;Vulnhub百个项目渗透…

vue全家桶——vuex

本文主要介绍vuex【状态管理模式】&#xff0c;在介绍vuex前&#xff0c;需要重点说下一些概念 vue最大的特点之一。数据驱动视图&#xff0c;可以吧数据理解成状态&#xff0c;视图-view可以理解成用户看到的页面&#xff0c;页面是动态变化的&#xff0c;而这个变化必须是有…

博客园滑块验证码破解

极验最初的滑块验证码是两张图&#xff0c;首先出现的是原图&#xff0c;点一下出现凹槽&#xff0c;然后拖动滑块进去&#xff0c;注意拖拽速度就可以破解成功。 原理&#xff1a; 分别遍历扫描原图和有凹槽的图片像素&#xff0c;进行对比&#xff0c;像素不一致的位置就是凹…

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]

视频链接&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50&#xff1a;当前页面。 P51-100&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视频笔记 代码 [P051-100]_小白桶子的博客-CSDN博客 P101-135&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视…

【Vue】Mock.js的使用教程,入门级(附代码和案例)

Mock.js的使用&#xff08;附代码和案例&#xff09; 1、什么是mockjs 生成随机数据&#xff0c;拦截Ajax请求 了解一项技术&#xff0c;官网当然要知道 Mock.js 官网 2、程序 前端&#xff1a;访问后端接口&#xff0c;展示数据后端&#xff1a;后端负责业务逻辑&#xff0c…

YDOOK:vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element+ plus

YDOOK&#xff1a;vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element plus 1. 官网的指导安装使用方式尚未更新&#xff0c;显示的是&#xff1a; 2. 如果使用的是 npm 安装, 输入的代码为&#xff1a; npm install element-plus --save大陆建议使用…

使用Xposed对软件进行破解

入门 去AS里面新建一个NoActivity项目&#xff0c;最好把minimum版本调小 <!-- 加载Xposed模块--><meta-dataandroid:name"xposedmodule"android:value"true" /> <!-- 模块描述--><meta-dataandroid:name"xpose…

破解root密码精简版

破解root密码精简版&#xff1a; 1、重启虚拟机 2、在linux16末尾加上 rd.break,ctrlx执行 3、mount -o remount,rw /sysroot 把根以读写的方式挂载 挂在系统的根sysroot 4、chroot /sysroot 5、passwd root 6、输入新密码&#xff1a; 7、确认密码 8、touch /.autorelabel 标…

【word论文排版教程4】样式的应用

【word论文排版教程4】样式的应用 在使用样式处选择相应样式&#xff0c;同样可以使用之前设置的快捷键 标题比较长&#xff0c;使用软回车进行换行

【word论文排版教程2】论文章节安排及分节

【word论文排版教程2】论文章节安排及分节 论文章节可分为如下8个章节&#xff1a; 封面 中文摘要 英文摘要 目录 正文 参考文献 附录 致谢 输入封面&#xff0c;添加分解符 添加分解符效果 同样方法为其它章节添加分解符。

【word论文排版教程1】页面设置

【word论文排版教程1】页面设置 页面设置要求如下&#xff1a; 页面格式&#xff1a;纸张A4&#xff0c;上2.6cm&#xff0c;下2.6cm&#xff0c;左2.5cm&#xff0c;右2cm&#xff0c;装订线位置左侧&#xff0c;装订线0cm&#xff0c;无文档网格 页面布局->页面设置

毕业必备!推荐收藏的学位论文排版教程(word完整版)

本文将介绍学位论文的页面布局&#xff0c;标题格式&#xff0c;文档生成列表&#xff0c;插入公式&#xff0c;页眉页脚&#xff0c;生成目录、表格和图片的交叉引用、插入参考文献、英语翻译校对等内容和技巧&#xff0c;学习内容偏多&#xff0c;同学们可以先收藏下来&#…

毕业论文word文档排版教程(动图的方式演示,针对wps)

很久之前写好的文章&#xff0c;不知不觉毕业了那么久了 目录 1 常用快捷键 2 显示全部格式标记 3 因有手动换行符无法实现首行缩进 4 利用表格制作矩阵 5 因有英文(代码)和中文而导致空隙过大 6 设置页码和目录 xx 参考文献自动编号并更新文章中的序号 xxx 页…