JS-mock.js

 

安装

npm install --save-dev mockjs

在vue-cli3+中使用mock.js

1. 创建mock(任意名称)文件夹，并创建index.js(必须)，其他子模块任意存放
   
2. index.js导入子模块，类似这样

import './modules/user'
import './modules/account'

3. 子模块模拟api

import Mock from 'mockjs'

// 参数一路径，参数二方式(可省，表全部)，参数三返回值(任意类型都可模拟)
Mock.mock('/account/getaccountnum', 'post', "@integer(10000, 50000)")

// 参数三还可以以函数形式接收数据
Mock.mock('/account/getlist', options => {
    var accountType = options.body.type;
    /* ...
    return ... */
})

4. main.js引入mock数据

// mock是第一步文件夹的名字
import '@/mock'

/* 实际使用的类似 
 * axios.defaults.baseURL = 'http://6634.top:8083/'
 * 的前缀需要去掉，否则模拟不生效
 */

常用数据占位符

"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",         //随机生成一个（中国）县