mockjs使用（1）

mockjs使用

1、定义

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

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

2、各环境下怎么使用

大致就是 引入/安装mockjs然后还用

2.1 浏览器

<script src="http://mockjs.com/dist/mock.js">script>

// 使用 Mock
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
$('
').text(JSON.stringify(data, null, 4))
    .appendTo('body')
 
  
2.2 Node（CommonJS）
 
  
// 安装
npm install mockjs

// 使用
var Mock = require('mockjs');
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
console.log(JSON.stringify(data, null, 4))
 
  
tips：
 
  
 
   
框架一般用这种如果不想预加载也可以用2.1浏览器的那种
 以vue项目为例：
 
  
 
  
 
   
项目基本信息：vue 2.6.10，mockjs 1.1.0
 
   
 
    
 
用2.1的方法就是：
 
     
 
      
在public文件夹下index.html中引入
 
      
然后直接使用Mock.mock()造取数据
 
     
 
 
    
 
用2.2的方法就是：
 
     
 
      
先使用命令行npm install mockjs 安装
 
      
之后在main.ts里面：
 先引入import Mock from 'mockjs'然后挂到Vue原型上面上面之后整个项目均可this.Mock.mock()方法造取数据
 
     
 
 
   
 
  
 
  
2.3 Bower
 
  
npm install -g bower
bower install --save mockjs

<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js">script>
 
  
2.4 RequireJS（AMD）
 
  
<script src="http://requirejs.org/docs/release/2.1.8/comments/require.js">script>
 
  
// 配置 Mock 路径
require.config({
  paths:{
    'mock':'http://mockjs.com/dist/mock'
  }
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    $('
').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})
 
  
2.5 Sea.js(CMD)
 
  
<script src="http://seajs.github.io/examples/sea-modules/seajs/seajs/2.1.0/sea.js">script>
 
  
seajs.config({
  alias: {
    "mock": "http://mockjs.com/0.1/dist/mock.js"
  }
})

// 加载 Mock
seajs.use('mock', function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    $('
').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})
 
  
2.6 KISSY
 
  
<script src="http://g.tbcdn.cn/kissy/k/1.3.1/seed.js">script>
 
  
// 配置 Mock 路径
KISSY.config({
    packages: {
        mock: {
            base: 'http://mockjs.com/0.1/dist/',
            debug: true
        }
    }
})
// 加载 Mock
KISSY.use(['node', 'mock'], function (S, _, Mock) {
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    KISSY.all('
').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})
 
  
2.7 Random CLI
 
  
// 安装
npm install mockjs -g

// 执行
$ random url
// => http://rmcpx.org/funzwc
 
  
3、语法规范
 
  
Mock.js 的语法规范包括两部分：
 
  
 
   
数据模板定义（Data Temaplte Definition，DTD）
 
   
数据占位符定义（Data Placeholder Definition，DPD）
 
  
 
  
3.1 数据模板定义DTD
 
  
3.1.1 基础
 
  
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
 
  
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
 
  
3.1.2 注意
 
  
 
   
属性名 和 生成规则 之间用|分割
 
   
生成规则是可选的
 
   
生成规则由七种格式： 
    
 
     
'name|min-max': value
 
     
'name|count': value
 
     
'name|min-max.dmin-dmax': value
 
     
'name|min-max.dcount': value
 
     
'name|count.dmin-dmax': value
 
     
'name|count.dcount': value
 
     
'name|+step': value
 
    
 
 
   
生成规则 的 含义 需要依赖 属性值 才能确定。
 
   
属性值 中可以含有 @占位符。
 
   
属性值 还指定了最终值的初始值和类型。
 
  
 
  
3.1.3 生成规则和示例
 
  
为了展示随机性，这些例子（'name|min-max': [{}, {} ...] 、'name|count': [{}, {} ...] 、PATH除外）外面都包裹了数组，但是代码示例里面没有写
 
  
1. 属性值是字符串String
 
  
 
   
'name|min-max': value通过重复'value'生成一个字符串，重复次数大于等于min，小于等于max
 例如：'h|1-10': '名称'生成数据如下
 
   
'name|count': value通过重复'value'生成一个字符串，重复次数等于count。
 例如：'h|5': '名称'生成数据如下
 
  
 
  
2. 属性值是数字 Number
 
  
 
   
 'name|+1' : 100属性值自动加一，初始值为100
 例如：  'id|+1' : 100 生成数据如下：
 
 
   
 'name|1-100' : 100 生成一个大于等于1，小于等于100的整数，属性值100用来确定类型
 例如 'u|1-9999': 100生成数据如下
 
 
   
'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。
 例如：'c|1-9999999.2': 1 生成数据如下
 
 
  
 
  
3. 属性值是布尔类型Boolean
 
  
 
   
 
'name|1': value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
 例如：'isEdit|1': true，生成数据如下：
 
 
 
   
 
'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
 例如：'isRandom|20-80':true ，数据生成结果如下
 
 
 
  
 
  
4. 属性值是对象 Object
 
  
 
   
'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
 例如：'privince|1-4':{ '130000': '河北省', '140000': '山西省', '320000': '江苏省', '330000': '浙江省', '340000': '安徽省' }，生成数据如下：
 
 
   
'name|count': {} 从属性值 {} 中随机选取 count 个属性。
 例如： 'city|2':{ '110000': '北京市', '120000': '天津市', '310000': '上海市', '130000': '河北省', '140000': '山西省', '320000': '江苏省', '330000': '浙江省', '340000': '安徽省' }，生成数据如下
 
 
  
 
  
5 属性值是数组 Array
 
  
 
   
 
'name|1': [{}, {} ...] 从属性值 [{}, {} …] 中随机选取 1 个元素，作为最终值。
 例如： 'array|1':['AMD', 'CMD', 'KMD', 'UMD']，生成数据如下：
 
 
 
   
 
'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} …] 生成一个新数组，重复次数大于等于 min，小于等于 max。
 例如：'list2|1-10': [ { 'array|1':['AMD', 'CMD', 'KMD', 'UMD'] } ]，生成数据如下：
 
 
 
   
 
'name|count': [{}, {} ...] 通过重复属性值 [{}, {} …] 生成一个新数组，重复次数为 count。
 例如：'list2|5': [ { 'array|1':['AMD', 'CMD', 'KMD', 'UMD'] }, ] ，生成数据如下：
 
 
 
  
 
  
6 属性值是数组 Function
 
  
 
   
'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 ‘name’ 所在的对象。
 例如：'randomNum':function() { return Math.floor(Math.random()*1000000) }，生成数据如下：
 
 
  
 
  
7 属性值是正则表达式 RegExp
 
  
 
   
'name':RegExp 执行正则。返回属性值
 例如：'name':/[a-z][A-Z][0-9]/ 生成数据如下：
 
 
  
 
  
8 属性值是路径 PATH
 
  
 
   
绝对路径Absolute Path
 
   
相对路径Relative Path
 这里的相对路径和绝对路径指的是在当前这个模板中的位置，并非文件
 绝对路径指 这里要用到的那个属性在模板中的位置
 相对路径指 这里要用到的那个属性相对于当前这个位置的位置
 
 
 这里并非只能用一个，可以用多个
 
 
  
 
  
tips：
 
  
 
   
通常在需要其余两个或多个属性拼接成一个新的属性时使用
 
  
 
  
3.2 数据占位符定义 DPD
 
  
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：
 
  
@占位符
@占位符(参数 [, 参数])
 
  
注意：
 
  
 
   
用 @ 来标识其后的字符串是 占位符。
 
   
占位符 引用的是 Mock.Random 中的方法。
 
   
通过 Mock.Random.extend() 来扩展自定义占位符。
 
   
占位符 也可以引用 数据模板 中的属性。
 
   
占位符 会优先引用 数据模板 中的属性。
 
  
 
  
 {
     name: {
         first: '@FIRST',
         middle: '@FIRST',
         last: '@LAST',
         full: '@first @middle @last'
     }
 }
 // =>
 {
     "name": {
         "first": "Charles",
         "middle": "Brenda",
         "last": "Lopez",
         "full": "Charles Brenda Lopez"
     }
 }
 
  
 
  
参考文献：
 
  
 
   
官网
 
   
mockjs文档