mockjs语法总结以及在vue中的使用

关于mock

• 安装

npm i -D mockjs

• mock常用语法总结

//语法规范("属性名|规则:属性值")："name|rule":"value"
'name|min-max':value
    'age|20-30':20      //[20,30]之间的任一数字
'name|count':value
    'type|1':['a','b','c']     // 从数组中随机选一个
'name|min-max.dmin-dmax':value
    'dot|1-100.1-10':1    //整数部分[1,100]，小数部分1到10位小数
'name|count.dmin-dmax':value
    'num|100.1-2':1   // [100.1~100.99]
'name|count.dcount':value
    'num|10.2':1   //[10.01,10.99]
'name|+step':value
    'id|+1':1     // 初始值为1，累加
name:value
    name:'@cname()' //使用占位符

//属性值
String
    'name|2':'abc'   //abcabc
Number
    'age|20-30':1     // age为[20,30]
Boolean
    'isTrue|1':true    //50% 是true，50%是false
Object
    'name|1':{a:1,b:2,c:3}   //随机从object中选取一个属性
Array
    'age|1':[1,2,3,4]   //随机从数组中选取一个数字
Function
    name:function (){return 123}     //name:123 函数返回值
RegExp
    telephone: /^0855-\d{8}/     // 生成符合正则表达式的值

//常用占位符
@boolean
@interger(min?,max?)   //生成min-max的整数
@float(min?,max?,dmin?,dmax?)  // 生成min-max,小数点位数为dmin-dmax的浮点数
@string(min?,max?)或@string(length)   // 生成字符串长度范围或者定长字符串
@date(format?)  // 生成日期   @date('yyyy-MM-dd')
@time(fotmat?)   //生成时间  @time('HH:mm:ss')
@datetime(format?)   //生成日期和时间 @datetime('yyyy-MM-dd HH:mm:ss') 
@now()  //现在的时间和日期   "2019-06-26 08:49:00"
@image(size?,background?,foreground?,format?,text?)  //生成图片  @image('200*100','gray','#fff','hello')
@color()    //随机生成16进制颜色
@paragraph(min?,max?) 或@paragraph(len)    //生成英文段落
@cparagraph(min?,max?)或@cparagraph(len)    //生成中文段落
@title(min?,max?)或@title(len)    //生成英文标题
@ctitle(min?,max?)或@ctitle(len)      //生成中文标题
@name()   //英文姓名
@cname()    //中文姓名
@url(protocol?)    //生成url   @url('https')
@domain(main?)     //生成域名  @url('baidu.com')    "dvtjmt.baidu.com"
@email(main?)     //生成邮箱  @email('gmail.com')
@ip    //生成IP地址
@province     //生成省份
@city     //生成城市
@county(true)    //生成详细地址
@guid()    //生成设备ID
@increment(step?)    //生成递增ID

mock在vue项目中的使用

• 在vue项目中的使用规则
  • 1、所有的 mock 配置文件均应放置在 @/mock/services 路径内。
  • 2、在 @/mock/services 内部可以建立业务相关的文件夹分类存放配置文件。
  • 3、所有的配置文件应按照 ***.mock.js 的命名规范创建。
  • 4、配置文件使用 ES6 Module 导出 export default 或 export 一个数组。

//入口文件
import Mock from 'mockjs';
//设置等待时间
Mock.setup({
  timeout:"500-800"
})

//一次性导入services文件目录下的多个后缀名为.mock.js的模块
const context = require.context("./services", true, /.mock.js$/);
context.keys().forEach(key=>{
  Object.keys(context(key)).forEach((paramKey) => {
    Mock.mock(...context(key)[paramKey]);
  });
})

//示例配置文件
export default [
  "/api/list",
  "get",
  {
    code:200,
    "data":[
      {
        id:'@guid()',
        name:'@cname()',
        date:'@datetime()'
      }
    ]
  }
]