前端自嗨工具Mock.js

今天加班写个博客，最近一个月公司新项目，我自己负责前端方面的工作，收获还是很大的，也看到了差距。能看到差距是好事，有努力方向。

我们前后端分离开发，前端用了mock.js来不依赖后端生成数据。

写之前强烈推荐去这个网址看更全面的资料，我这里只是个人学习总结。

http://highsea90.com/t/mock/#Basics

 

1.引入Mock.js插件

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

　当然还有其他引入方法，根据项目的构建工具不同而不同，这里是最简单的练习用。

2.生成常见数据规则：

Mock.mock(template) ；根据数据 template 模板生成模拟数据；

Mock.mock(url,template);响应url请求的地址，按照 template 模板生成数据；

注：url ，需要拦截的请求路径；

template，生成数据的模板；

生成序号或者id自增，初始值为1，'id|+1:1'；初始值为2，自增+3，‘id|+3:2’；其他同理；

生成name姓名，中文名：‘name’ : '@cname'，英文名：‘name’ : '@name'；

生成日期，'date' : '@date'，另一种方式，先定义var Random = Mock.Random; 然后'createOn':Random.date();

生成时间和日期同理，'time':'@time';

生成邮件格式，'email'：’@email';也可以用Mock.Random方法；

生成随机字符串，'string':Random.string();

在一个数组里随机显示一个，'arrItem|1':[1,2,3,5];

生成一个范围内的整数，生成10-100内的一个整数，’num|10-100':1;

生成布尔值，‘boolen':Random.boolen();

 

常用的大概是这些，另外生成一个范围内的值可设置出现频率；

详细的还是要自己去这个文档去看，

http://highsea90.com/t/mock/#Basics；
下面是两个例子：

生成数组，包含1-10个元素：‘data|1-10:[{}]’，数组里的每个对象格式要单独定义，适合生成list表格数据；

            'list|100':[{
                        'id|+1':1,
                        'roleName':'@cname',
                        'createBy':'@cname',
                        'createOn':Random.date(),
                        'modifyBy':'@cname',
                        'modifyOn':Random.date(),
                        'remark':Random.string(),
                        'actionId|+2':11,
                        'operate|1':['增','删','改','查']
                    }]        

　　

$.ajax()请求响应返回的数据：bootstrap-table.js插件作为盛放展示数据的容器；

var Random = Mock.Random;
            Mock.mock('http://host/getUsers.php',function(opt){
                var MockData = Mock.mock({
                    'list|100':[{
                        'id|+1':1,
                        'roleName':'@cname',
                        'createBy':'@cname',
                        'createOn':Random.date(),
                        'modifyBy':'@cname',
                        'modifyOn':Random.date(),
                        'remark':Random.string(),
                        'actionId|+2':11,
                        'operate|1':['增','删','改','查']
                    }]
                })
                return MockData.list;
            })

            // 初始化角色表格
            var roleTable = $("#roleTable");
            roleTable.bootstrapTable({
                method:'POST',
                cache:false,
                url: 'http://host/getUsers.php',
                sortable:true,
                sortOrder:'esc',
                sidePagination:'client',
                pageList:[10,20,50,100],
                clickToSelect:true,
                onCheck:function(row,$element){
                    console.log(row);
                    console.log($element);
                    $('#permissionTable').bootstrapTable('refresh');
                    $('#actionTable').bootstrapTable('refresh');
                },
                onDblClickRow:function(row,$element,field){
                    console.log(row);
                    console.log($element);
                    console.log(field);
                },
                columns: [
                    {radio: true},
                    {field: 'id', title:'ID'},
                    {field: 'roleName', title: "角色名称"},
                    {field: 'createBy', title:"创建人"},
                    {field: 'createOn', title: "创建时间"},
                    {field: 'remark', title: "备注"}
                ]
            });