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>

效果图