摘要：

　　隨着用戶體驗的重要性越來越高，目前前端和后台的解耦已經越來越明顯了，這也加大了前后端的配合工作。在前端開發過程中可能我們需要一些后台返回的數據來完成交互效果，但是后台開發人員並沒有完成后台功能，此時我們只能等，但是這樣必然影響了開發進度，浪費了時間。有很多種解決方法，如果后端解決的話，那就是先定義接口，然后將假數據直接返回。如果在前端解決的話，前端搭建自己的服務，不依賴后端。作為前端工程師，今天我分享下另一種前端解決方案，mock服務。

簡介：

　　Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立於后端進行開發，幫助編寫單元測試。提供了以下模擬功能

根據數據模板生成模擬數據
模擬 Ajax 請求，生成並返回模擬數據
基於 HTML 模板生成模擬數據

例子：

mock.js

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html">
 5     </head>
 6     <body>
 7         <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="http://mockjs.com/dist/mock.js"></script>
 9         <script>
10             Mock.mock(/\.json/, 'get', function(options) {
11                 var url = options.url;
12                 var data = url.substring(url.indexOf('?')+1);
13                 return data;
14             });
15 
16 
17             Mock.mock(/\.json/, 'post', function(options) {
18                 return options.data;
19             });
20 
21 
22             $.ajax({
23                 url: 'mock.json',
24                 dataType: 'json',
25                 type: 'get',
26                 data: {
27                     test: 'test'
28                 }
29             })
30             .done(function (data, status, jqXHR) {
31                 $('<pre>').text(data)
32                     .appendTo('body');
33             });            
34         </script>
35     </body>
36 </html>

apitizer.js

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html">
 5     </head>
 6     <body>
 7         <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="./apitizer-master/apitizer.min.js"></script>
 9         <script>
10         var schema = {
11             type : "object",
12             properties : {
13                 id : {
14                     type : "integer"
15                 },
16                 username : {
17                     type : "string"
18                 },
19                 password : {
20                     type : "string"
21                 }
22             }
23         }, userStore;
24 
25         apitizer.addSchema('user', schema);
26         userStore = apitizer.schemaStore('user', 0, {
27             id : apitizer.types.autoincrement()
28         })
29 
30         userStore.add({
31             username : 'retro',
32             password : {
33                 a: 'a',
34                 b: 'b'
35             }
36         });
37 
38         apitizer.fixture('POST /login', function(params){
39             var users = userStore.db(params) // Search the data in the store's database
40             if(users.count() === 0){
41                 throw {errors: ['Wrong credentials'], status: 401}
42             } else {
43                 return users.first();
44             }
45         });
46 
47         $.post('/login', {
48             username : 'asf',
49             password : 1338
50         }).then(function(data){
51             $('<pre>').text(JSON.stringify(data, null, 4))
52             .appendTo('body');
53         }, function(error){
54 
55         });
56 
57         
58         </script>
59     </body>
60 </html>

PS：

mock.js：http://mockjs.com/

apitizer.js：https://github.com/retro/apitizer

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Mockjs，模擬數據生成器數據生成器測試數據生成器圖的隨機數據生成器 Python的偽造數據生成器:Faker Keras 使用自己編寫的數據生成器 Python的偽造數據生成器:Faker 前端可視化布局生成器 All in One 生成器有什么好處？ Python生成器