一、前言

什么是Mockjs？

Mockjs是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。

提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟Ajax请求，生成并返回模拟数据
• 基于HTML模板生成模拟数据

为什么使用Mockjs？

• 前后端分工协作是一个非常高效的做法，但是有时前后端分离不彻底会很痛苦。
• 前后端应该是异步进行的，进度互不影响，但是前端却严重依赖后端的接口，总会苦苦等待后端接口出来才能继续开发，所以Mockjs应运而生

二、开始使用

1. 安装Mockjs

npm install mockjs --save -dev
// 或
yarn add mockjs

2. 配置mockjs文件

在src文件下创建mock文件夹及index.js,并输入内容

import Mock from "mockjs";
// 设置随机生成模拟数据格式
const data = Mock.mock({
  "items|3": [
    {
      id: "@id",
      title: "@sentence(3, 5)",
    },
  ],
});

Mock.mock("/api/data", () => {
  const { items } = data;
  return {
    code: 200,
    data: items,
  };
}); 

3. 引入mock文件

在项目main.js文件中引入Mockjs文件

// main.js
import './mock/index'

4.访问Mock数据接口

  // "/api/data"为mock/index.js设置的接口
  axios.get("/api/data").then(res => {
    console.log(res.data);
  })

三、基础语法

'Boolean': '@boolean', // 随机生成布尔类型
'Natural': '@natural(1, 100)', // 随机生成1到100之间自然数
'Integer': '@integer(1, 100)', // 生成1到100之间的整数
'Float': '@float(0, 100, 0, 5)', // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': '@character("aeiou")', // 在aeiou中，生成随机字符，不传参表示生成随机字符
'String': '@string( 2, 10)', // 生成2到10个字符之间的字符串
'Range': '@range(0, 10, 2)', // 生成一个数组，数组元素从0开始到10结束，间隔为2
'Date': '@date("yyyy yy y MM M dd d")', // 生成一个随机日期,可加参数定义日期格式，默认yyyy-mm-dd
'Color1': '@color', // 生成一个颜色16进制随机值
'Color2': '@rgb', //生成一个颜色rgb随机值
'Paragraph':'@paragraph(2, 5)', //生成2至5个句子的文本
'Sentence':'@sentence(3, 5)', //生成3至5个单词组成的一个句子
'World':'@word(3, 5)', //生成3-5个字母组成的单词
'title':'@title(3,5)', //生成3-5个单词组成的标题
'cParagraph':'@cparagraph(2, 5)', //生成2至5个句子的中文文本
'cSentence':'@csentence(3, 5)', //生成3至5个词语组成的一个中文句子
'cWorld':'@cword(3, 5)', //生成3-5个字组成的中文词语
'ctitle':'@ctitle(3,5)', //生成3-5个词语组成的中文标题
'Name': '@name', // 生成姓名
'cName': '@cname', // 生成中文姓名
'Url': '@url', // 生成url地址
'Email':'@email',//生成邮箱
'Address': '@county(true)'， // 生成省 市 县组成的地址
'Guid':'@guid()', //生成Guid值

完整语法文档：mockjs.com/examples.ht…