Vue使用Mockjs插件实现模拟数据

官方文档:Mock.js

一.引言

在前端开发过程中,我们经常会遇到后端接口尚未完成,但前端需要进行页面构建和功能测试的情况。这时候,Mockjs就如同救星一般出现了。Mockjs 是一款能够模拟生成随机数据,拦截 Ajax 请求并返回模拟数据的工具,它极大地提高了前端开发的效率,让前端开发可以独立于后端进行。

二.安装Mockjs

npm install mockjs --save - dev

三.模拟数据

src/mock/modules/common.js 

import Mock from "mockjs";// 生成数据列表
var dataList = [];
for (let i = 0; i < Math.floor(Math.random() * 10 + 1); i++) {dataList.push(Mock.mock({id: "@increment",paramKey: "@first",paramValue: "@last",remark: "@csentence",}));
}// 获取参数列表
export function list() {return {// isOpen: false,url: "/user/list",type: "get",data: {msg: "success",code: 200,page: {totalCount: dataList.length,pageSize: 10,totalPage: 1,currPage: 1,list: dataList,},},};
}

四.批量注册

src/mock/index.js 

import Mock from "mockjs";
import * as common from "./modules/common";// tips
// 1. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
// 2. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
fnCreate(common, true);/*** 创建mock模拟数据* @param {*} mod 模块* @param {*} isOpen 是否开启?*/
export function fnCreate(mod, isOpen = true) {// isOpen = false;if (isOpen) {for (var key in mod) {((res) => {if (res.isOpen !== false) {Mock.mock(new RegExp(res.url), res.type, (opts) => {// console.log("opts---", opts);return res.data;});}})(mod[key]() || {});}}
}

五.全局引入

main.ts入口文件

// 非生产环境, 适配mockjs模拟数据
if (process.env.NODE_ENV !== "production") {const MockJs = () => import("/@/mock/index.js");MockJs();
}

六.页面调用

<template><ul><li v-for="(item, i) in users" :key="i"><h3>id:{{ item.id }}</h3><p>paramKey:{{ item.paramKey }}</p><p>paramValue:{{ item.paramValue }}</p><p>remark:{{ item.remark }}</p><hr /></li></ul>
</template><script>
import axios from 'axios'export default {data() {return {users: []}},mounted() {axios.get('/user/list').then(res => {console.log("res--", res);this.users = res.data.page.list}).catch(error => {console.log(error)})}
}
</script>

效果图

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阅读方法论

选择固有缺陷,选项是对比出来的

芯片测试-smith圆图

smith圆图 &#x1f4a2;smith圆图的故事&#x1f4a2;&#x1f4a2;smith圆图中的各部分来历&#x1f4a2;&#x1f4a2;公式推导&#x1f4a2;&#x1f4a2;等电阻圆特点&#x1f4a2;&#x1f4a2;等电抗圆&#x1f4a2;&#x1f4a2;等电抗圆特点&#x1f4a2; &#x1f4a…

聚云科技×亚马逊云科技:打通生成式AI落地最后一公里

云计算时代&#xff0c;MSP&#xff08;云管理服务提供商&#xff09;犹如一个帮助企业上云、用云、管理云的专业管家&#xff0c;在云计算厂商与企业之间扮演桥梁的作用。生成式AI浪潮的到来&#xff0c;也为MSP带来全新的生态价值和发展空间。 作为国内领先的云管理服务提供…

树莓派/Jetson Nano/...aarch64:安装Miniforge 或 Mambaforge

目录 一、下载链接&#xff08;我以miniforge为例&#xff09;二、赋予脚本可执行权限三、运行安装脚本四、添加环境变量 Miniforge 或 Mambaforge是Miniforge 项目提供了针对多种架构&#xff08;包括 aarch64&#xff09;的轻量级 Conda 发行版&#xff0c;它们是 Miniconda …

白嫖域名,无套路,无需手机注册,支持A解析,TXT解析

注册简单&#xff0c;连邮箱都不需要&#xff0c;不用填写任何资料。 支持A、redirectURL、AAAA、TXT等类型的记录&#xff0c;可以创建子域名 注册地址&#xff1a;Free DDNS 打开首页&#xff0c;输入想要的域名&#xff0c;点查询按钮。如果可用&#xff0c;再点击提交按钮…

SQL进阶技巧:非等值连接--单向近距离匹配

目录 0 场景描述 1 数据准备 2 问题分析 ​编辑 ​编辑 3 小结 数字化建设通关指南 0 场景描述 表 t_1 和表 t_2 通过 a 和 b 关联时&#xff0c;有相等的取相等的值匹配&#xff0c;不相等时每一 个 a 的值在 b 中找差值最小的来匹。 表 t_1&#xff1a;a 中无重复值…

【Linux】软件包管理与vim工具使用详解

Linux 软件包管理与vim工具使用详解 什么是软件包Liunx安装软件Linux下载软件的过程&#xff08;Ubuntu、Centos、other&#xff09; centos7配置新的yum源操作系统的好坏评估---生态问题如何安装软件查看软件包卸载软件 Linux编辑器-vim使用简单vim配置Linux编译器-gcc/g使用预…

【Ant Design Pro】1. config 配置

前置说明 这里我使用的是 simple 版本&#xff0c;并结合 antd pro 脚手架搭建&#xff08;现在默认使用为 umi4 版本&#xff09;&#xff1a; 虽然这个文档好像已经好久没有更新了。 config 文件&#xff1a; config.ts // https://umijs.org/config/ import { defineConfi…

《实战OpenCV系列》专栏介绍

简介 本专栏由浅入深&#xff0c;详细介绍了使用OpenCV进行图像/视频处理的各方面知识&#xff0c;包括&#xff1a;图像显示、图像的数学运算、图像的裁剪与拼接、图像的像素操作、几何变换、直方图、图像滤波、色彩空间转换、边缘检测、形态学操作、模板匹配、视频处理、图像…

Mac启动服务慢问题解决,InetAddress.getLocalHost().getHostAddress()慢问题。

项目启动5分钟&#xff0c;很明显有问题。像网上其他的提高jvm参数就不说了&#xff0c;应该不是这个问题&#xff0c;也就快一点。 首先找到自己的电脑名称&#xff08;用命令行也行&#xff0c;只要能找到自己电脑名称就行&#xff0c;这里直接在共享里看&#xff09;。 复制…

微信小程序Webview与H5通信

背景 近期有个微信小程序需要用到web-view嵌套H5的场景&#xff0c;该应用场景需要小程序中频繁传递数据到H5进行渲染&#xff0c;且需要保证页面不刷新。 由于微信小程序与H5之间的通信限制比较大&#xff0c;显然无法满足于我的业务场景 探索 由于微信小程序与webview的环境是…

【JAVA】接口杂谈:Java中的比较器(Comparator 接口)

这篇来介绍自定义类型对象的比较方法&#xff0c;利用Comparable 接口和 Comparator 接口。 目录 问题引入&#xff1a; 一、Comparable 接口 1.1比较学生的年龄 方法&#xff1a; 结果&#xff1a; 1.2比较学生的姓名 方法&#xff1a; 结果&#xff1a; 1.3 案例再…

数据结构 (19)二叉树

一、定义 二叉树&#xff08;Binary Tree&#xff09;是n个有限元素的集合&#xff0c;该集合或者为空、或者由一个称为根&#xff08;root&#xff09;的元素及两个不相交的、被分别称为左子树和右子树的二叉树组成&#xff0c;是有序树。若集合为空&#xff0c;则称该二叉树为…

路由策略与路由控制实验

AR1、AR2、AR3在互联接口、Loopback0接口上激活OSPF。AR3、AR4属于IS-IS Area 49.0001&#xff0c;这两者都是Level-1路由器&#xff0c;AR3、AR4的系统ID采用0000.0000.000x格式&#xff0c;其中x为设备编号 AR1上存在三个业务网段A、B、C&#xff08;分别用Loopback1、2、3接…

Kubernetes集群操作

查看集群信息&#xff1a; kubectl get nodes 删除节点 &#xff08;⽆效且显示的也可以删除&#xff09; 后期如果 要删除某个节点&#xff0c;为了不增加其他节点的访问压力&#xff0c;先增加一个节点&#xff0c;再删除要删除的节点 语法 &#xff1a;kubect delete…

【C++】从零到一掌握红黑树:数据结构中的平衡之道

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 &#x1f4d8; 基础数据结构【C语言】 &#x1f4bb; C语言编程技巧【C】 &#x1f680; 进阶C【OJ题解】 &#x1f4dd; 题解精讲 目录 前言1 红黑树的概念**红黑树的五大性质** 2 红黑树的实现2.1 红黑树的结构…

支持ACME协议可免费申请SSL证书的多种渠道

目录 一、ACME 协议 二、ACMESSL可视化 三、ACME证书申请流程 三、ACME申请提交 四、使用 ACME 的好处 五、ACME总结 一、ACME 协议 ACME 协议是一种开放标准&#xff0c;旨在自动执行数字证书颁发和续订流程&#xff0c;它彻底改变了证书管理。ACME 的开发旨在简化整个…

Socket编程(TCP/UDP详解)

前言&#xff1a;之前因为做项目和找实习没得空&#xff0c;计算机网络模块并没有写成博客&#xff0c;最近得闲了&#xff0c;把计算机网络模块博客补上。 目录 一&#xff0c;UDP编程 1&#xff09;创建套接字 2&#xff09;绑定端口号 3&#xff09;发送与接收数据 4&…

【人工智能-科普】图神经网络(GNN):与传统神经网络的区别与优势

文章目录 图神经网络(GNN):与传统神经网络的区别与优势什么是图神经网络?图的基本概念GNN的工作原理GNN与传统神经网络的不同1. 数据结构的不同2. 信息传递方式的不同3. 模型的可扩展性4. 局部与全局信息的结合GNN的应用领域总结图神经网络(GNN):与传统神经网络的区别与…

【Git 工具】用 IntelliJ IDEA 玩转 Git 分支与版本管理

文章目录 一、使用 IDEA 配置和操作 Git1.1 查看 Idea 中的 Git 配置1.2 克隆 Github 项目到本地 二、版本管理2.1 提交并推送修改2.2 拉取远程仓库2.3 查看历史2.4 版本回退 三、分支管理3.1 新建分支3.2 切换分支3.2 合并分支3.4 Cherry-Pick 参考资料 一、使用 IDEA 配置和操…