mock.js:定义、应用场景、安装、配置、使用
前言:什么是mock.js?
作为一个前端程序员,没有mockjs你不感觉很被动吗?你不感觉你的命脉被后端那个男人掌握了吗?所以,我命由我不由天!学学mock.js吧!
mock.js
是一个用于生成随机数据和模拟 API 请求的 JavaScript 库,常用于前端开发中。它可以帮助开发者在后端 API 尚未完成的情况下进行前端开发和测试,提供了灵活性和高效性。
为什么使用 mock.js
-
模拟 API:
在后端 API 开发尚未完成时,前端开发人员可以使用mock.js
来模拟 API 的响应,确保前端功能的开发不受后端开发进度的影响。 -
测试数据:
mock.js
可以生成大量随机数据,便于测试和展示不同的数据场景,特别是在进行 UI 测试时。 -
减少依赖:
使用mock.js
可以减少对后端服务的依赖,允许前端开发人员独立工作。 -
灵活性:
可以根据需要定义不同的 Mock 数据结构和响应,适应多种开发场景。
应用场景
-
开发阶段: 在项目的初期阶段,后端 API 可能尚未完成,使用
mock.js
可以让前端开发人员继续进行界面和交互的开发。 -
测试阶段: 在进行单元测试或集成测试时,使用
mock.js
可以模拟不同的 API 响应,验证前端代码在各种情况下的表现。 -
演示和展示: 在向客户或团队展示产品时,可以使用
mock.js
生成真实的数据,避免使用敏感或真实的用户数据。
安装配置并使用 mock.js
安装命令:
npm install mockjs --save-dev
# 或者
yarn add mockjs --dev
引入mock
// src/mock.js
import Mock from 'mockjs'; // 引入 mock.js 库
定义mock数据
注意!!!
- URL 路径: 确保定义的 URL 路径与前端请求的路径一致。
- 请求方法: 指定请求方法(如
'get'
,'post'
,'put'
,'delete'
),确保与前端请求匹配。 - 响应格式: 定义返回的数据格式,通常包括状态码、消息和数据。
示例:
// 定义 Mock 数据
Mock.mock('/api/users', 'get', {code: 200, // 响应状态码message: 'success', // 响应消息data: {// 定义一个包含 5 个用户的数组'users|5': [{'id|+1': 1, // id 从 1 开始自增'name': '@name', // 使用随机生成的姓名'age|18-60': 1, // 随机生成年龄,范围 18-60'email': '@EMAIL', // 随机生成电子邮件},],},
});
在项目中引入 Mock
在你的 Vue 组件或应用的入口文件中引入 mock.js
,以便在应用启动时自动加载 Mock 数据。
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import './mock'; // 引入 Mock 数据createApp(App).mount('#app');
使用 Axios 进行 API 请求
在 Vue 组件中使用 Axios 进行 API 请求,并处理 Mock 数据。
<template><div><h1>用户列表</h1><ul><li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.age }}岁) - {{ user.email }}</li></ul></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const users = ref([]);const fetchUsers = async () => {try {const response = await axios.get('/api/users');if (response.data.code === 200) {users.value = response.data.data.users;}} catch (error) {console.error('获取用户信息失败:', error);}
};onMounted(() => {fetchUsers();
});
</script>
总结
mock.js
是一个强大的工具,可以帮助前端开发人员在没有后端支持的情况下进行开发和测试。通过定义 Mock 数据和 API,开发人员可以专注于前端功能的实现,提高开发效率。无论是在开发阶段、测试阶段还是演示阶段,mock.js
都能发挥重要作用。
相关文章:
mock.js:定义、应用场景、安装、配置、使用
前言:什么是mock.js? 作为一个前端程序员,没有mockjs你不感觉很被动吗?你不感觉你的命脉被后端那个男人掌握了吗?所以,我命由我不由天!学学mock.js吧! mock.js 是一个用于生成随机…...

【GAT】 代码详解 (1) 运行方法【pytorch】可运行版本
GRAPH ATTENTION NETWORKS 代码详解 前言0.引言1. 环境配置2. 代码的运行2.1 报错处理2.2 运行结果展示 3.总结 前言 在前文中,我们已经深入探讨了图卷积神经网络和图注意力网络的理论基础。还没看的同学点这里补习下。接下来,将开启一个新的阶段&#…...
Transformer中的Self-Attention机制如何自然地适应于目标检测任务
Transformer中的Self-Attention机制如何自然地适应于目标检测任务: 特征图的降维与重塑 首先,Backbone(如ResNet、VGG等)会输出一个特征图,这个特征图通常具有较高的通道数、高度和宽度(例如CHWÿ…...
2411rust,1.75.0
原文 Rust团队很高兴地声明推出Rust的新版本1.75.0. 如果你rustup安装了以前版本的Rust,你可如下取1.75.0: $ rustup update stable1.75.0稳定版中的功能 async fn和特征中的返回位置impl Trait. 指针字节偏移API 原始指针(*const T和*mutT)过去主要支持,T为单位的操作.如…...

远程办公新宠:分享8款知识共享软件
远程办公模式下,知识共享软件成为了团队协作和沟通的重要工具。以下是8款备受推崇的知识共享软件: 1、HelpLook AI知识库 简介:HelpLook是一款快速搭建AI知识库的系统,具备强大功能,如快速精准的知识检索、灵活定制的…...

3.9MayBeSomeAssembly
就是先从数组里,乘4得到正确地址 32(&s3),s3是基址,32是偏移量,就是先从数组里取出数到临时寄存器,然后再在临时寄存器上加上变量,最后再把临时寄存器上的变量存到数组里,偏移量࿰…...

i春秋-签到题
练习平台地址 竞赛中心 题目描述 题目内容 点击GUESS后会有辨识细菌的选择题 全部完成后会有弹窗提示 输入nickname后提示获得flag F12检查 元素中没有发现信息 检查后发现flag在控制台中 flag flag{663a5c95-3050-4c3a-bb6e-bc4f2fb6c32e} 注意事项 flag不一定要在元素中找&a…...
TypeScript 中扩展现有模块的用法
declare module 是 TypeScript 中用于扩展现有模块的特性。它允许开发者在已有模块的基础上,添加新的功能(比如扩展接口、添加类型声明等)。通过 declare module,可以将额外的声明合并到原模块中。以下是用法详解: 用…...

【报错记录】解决Termux中pulseaudio启动报错,报:E: [pulseaudio] main.c: Daemon startup failed.
前言 在尝试使用Termux-X11启动Minecraft过程中,不知道怎么回事原本好好的pulseaudio居然无法启动了,一直在报: E: [pulseaudio] main.c: Daemon startup failed. 重装了好几次也没用解决方案如下。 排除重复启动 如果pulseaudio之前已经…...
Java list
在 Java 中,链表(LinkedList)是一个非常重要的数据结构,它可以动态地插入和删除元素,因此比数组更灵活。Java 提供了 LinkedList 类,该类实现了 List 接口,并且是基于双向链表实现的,…...

MAC借助终端上传jar包到云服务器
前提:保证工程本地已打包完成:图中路径即为项目的target目录下已准备好的jar包 第一步:打开终端(先不要连接自己的服务器),输入下面的上传命令: scp /path/to/local/app.jar username192.168.1…...

对原jar包解压后修改原class文件后重新打包为jar
文章目录 背景三种修改方式1.POM中移除原jar中依赖的历史版本2.原jar它不使用pom依赖而是直接放在源码中再编译使用JarEditor 插件对源码进行修改(推荐)使用java-decompiler反编译后修改源码覆盖原class(不好用-不推荐直接跳过)提醒 参考资料-推荐阅读拓…...

YY币支付系统改源码(改良版本)
Nginx :1.20.1(版本都可以) MySQL:5.6.50(兼容该版本其他不知道) 简单优化服务器(可不安装,看要求) PHP安装扩展名称:fileinfo | opcache | imagemagick …...
【Swift】类型标注、类型安全和类型推断
文章目录 类型标注类型安全和类型推断什么是类型安全和类型推断为什么说Swift是一门安全语言类型安全带来的好处 类型标注 当你声明常量或者变量的时候可以加上类型标注(type annotation),说明常量或者变量中要存储的值的类型。如果要添加类…...

06 —— Webpack优化—压缩过程
css代码提取后想要压缩 —— 使用css-minimizer-webpack-plugin插件 下载 css-minimizer-webpack-plugin 本地软件包 npm install css-minimizer-webpack-plugin --save-dev 配置 webpack.config.js 让webpack拥有该功能 const CssMinimizerPlugin require(css-minimizer-…...

uniapp页面样式和布局和nvue教程详解
uniapp页面样式和布局和nvue教程 尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素。rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大…...
单条推理转批量推理prompt
为了将单条推理程序改为批量推理程序,并实现您的要求,我们需要进行以下步骤: 输入的图片和视频都是随机从视频文件夹、图片文件夹挑选,组成输入对: 需要编写一个函数来读取指定文件夹中的所有图片和视频文件。 使用随…...

网络安全审计概述与分类
目录 网络安全审计概述等保五个级别对审计要求网络安全审计系统组成网络安全审计系统类型 网络安全审计概述 4A分别是认证、授权、账号、审计 网络安全审计是指对网络信息系统的安全相关活动信息进行获取、记录、存储分析和利用的工作。 网络安全审计的作用在于建立“事后”…...

【已解决】“EndNote could not connect to the online sync service”问题的解决
本人不止一次在使用EndNote软件时遇到过“EndNote could not connect to the online sync service”这个问题。 过去遇到这个问题都是用这个方法来解决: 这个方法虽然能解决,但工程量太大,每次做完得歇半天身体才能缓过来。 后来再遇到该问…...
数据脱敏工具:基于 FFmpeg 的视频批量裁剪
在数据处理和隐私保护领域,数据脱敏是一项重要的任务,尤其是在处理包含敏感信息的视频数据时。本文介绍了一种使用 Python 和 FFmpeg 实现的视频批量裁剪工具,该工具可以将视频中的敏感区域裁剪掉,从而实现数据脱敏。通过使用 PyI…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...

STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...