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