mock.js使用指南

首先什么是mock.js

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立
于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

mock.js特点？

1. 前后端分离,让前端攻城师独立于后端进行开发。
2. 增加单元测试的真实性
3. 通过随机数据，模拟各种场景。
4. 开发无侵入
5. 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
6. 用法简单
7. 符合直觉的接口
8. 数据类型丰富
9. 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
   方便扩展
10. 支持支持扩展更多数据类型，支持自定义函数和正则。

mock.js在Vue中的使用

安装mock.js

npm install --save-dev mockjs

在src目录下创建mock文件夹，并创建index.js文件，内容如下：

import Mock from 'mockjs'
 
const data={ 
    "id":"@guid",
    "name":"@cname",
};
 
Mock.mock('/api/test', 'post', data)
 
export default Mock;

在main.js中引入mock文件下的index.js文件

import '@/mock/mock.js'

App.vue中使用

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <span>{{$t("global.test")}}</span>
    <button @click="testReq">测试请求</button>
    <router-view/>
  </div>
</template>
 
<script>
import Cookie from './util/cookie'
import Axios from 'axios'
 
export default {
  name: 'App',
  methods:{
    testReq:function(){
 
         Axios.post('/api/test').then((res) => {
              console.log(res)
          }).catch((err) => {
 
              console.log(err)
 
          })
    }
 
  }
}
 
</script>

常用数据占位符

//数据占位符使用
{
  "integer": "@integer(10, 30)",  //随机生成一个10～30之间的正整数
  "float": "@float(60, 100, 2, 2)",  //随机生成浮点数，参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
  "boolean": "@boolean",       //随机生成boolean
  "string|1-2": "@string",     //随机生成字符串
  "name":"@cname",             //随机生成名字
 
  "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
  "datetime": "@datetime",     //随机生成时间
  "now": "@now",               //当前时间
 
  "id": "@id",                 //随机生成一个 18 位身份证
  "guid": "@guid",             //随机生成一个 GUID
  "url": "@url",               //随机生成url字符串
  "email": "@email",           //随机生成邮箱
  "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
  "title": "@title",           //随机生成一句标题，其中每个单词的首字母大写
  "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
  "cparagraph": "@cparagraph", //随机生成一段中文文本
  "csentence": "@csentence",   //随机生成一段中文文本
  "range": "@range(2, 10)" ,   //返回一个内容从2开始到9的整型数组
 
  "region": "@region",         //随机生成地区 华中
  "province": "@province",     //随机生成省会 省
  "city": "@city",             //随机生成城市 市
  "county": "@county",         //随机生成一个（中国）县
}