前端自嗨工具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: "备注"}
                ]
            });