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>

效果图

相关推荐
麦麦大数据2 分钟前
F024 CNN+vue+flask电影推荐系统vue+python+mysql+CNN实现
vue.js·python·cnn·flask·推荐算法
white-persist8 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl29 分钟前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒38 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied1 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css