MockJs 入门

mockjs可以在控制台任意打印

一、mock.js是什么？

Mock Js 原来模拟数据，帮助前端独立开发

拦截Ajax请求，模拟生成并返回伪数据

二、基本使用

安装

npm i mockjs -D yarn add mockjs -D

导入

import Mock from 'mockjs'

模拟mock

Mock.mock ( rurl? , rtupe? , template | function(options) )

// 接口路径 请求方式 数据类型 问号表示可选

··· 新建mock/index.js , main.js导入即可

Mock.mock("/api/goodslist", "get", {
  status: 200,
  message: "获取列表成功",
  "data|5": [
    {
      id: "@increment(1)",       // 自增加一
      // 'id|+1':0,              // 自增加一
      name: "@cword(2,5)",       // 随机2-5位汉字
      price: "@float(1,99,2,2)", // 随机两个小数的数字
      count: "@integer(1,20)",   // 随机1-20的数字
      img: "@image",             // 随机一张图片
    },
  ],
})

调用Mock

const { data: { data } } = await this.axios.get("/api/goodslist")
console.log(data)
this.tableData = data

三、Mock.js语法规范

1.数据模板定义规范（Data Template Definition，DTD）

2.数据占位符定义规范（Data Placeholder Definition，DPD）

1、数据模板定义规范

语法：'name|rule':value '属性名|生成规则':属性值

属性值可以是string、number、Boolean、Object、Array、Function、RegExp

2、数据占位符定义规范

语法： @占位符（参数【，参数】）

Mock.Random 是一个工具类，用于生成各种随机数据

Mock.Random 的方法在数据模板中称为『占位符』

·· 示例 ··