mock.js服務器（mock平台服務器）

• 1、vue中使用mockjs簡單返回數據、包括get,post請求
• 2、mock.js的使用方法
• 3、Mock.js使用
• 4、mock.js 原生ajax多次請求
• 5、mockjs如何攔截jsonp請求
• 6、mock.js與其他有什麼區別

 1、安裝

    npm install mockjs

2、在src文件下

    創建mock文件夾

        在mock文件夾下創建json文件 並在json文件夾下創建index.json

        在mock文件下創建mock.js文件

3、在mian.js文件中引用mock.js        

    import “./mock/mock.js”;

    mock.js文件中的內容

    “`

    import Mock from ‘mockjs’

    Mock.setup({

         timeout: 500 //設置一個延遲時間虛擬服務器響應效果

     })

//格式： Mock.mock( url, post/get , 返回的數據)； Mock.mock(‘/getList’, ‘get’, require(‘./json/index.json’))

// 通過Mock.mock函數模擬post請求

Mock.mock(‘/api/addgoods’, ‘post’, function (option) {

 // 這裡的option是請求的相關參數

var $name=JSON.parse(option.body).name;

if($name){

    return Mock.mock({

        status: 200,

        message: ‘提交成功！！！’

    })

}else{

    return Mock.mock({

        status: 400,

        message: ‘未提交參數’

    })

}

})

  “`

index.json文件中的內容

“`

{

   “retcode”: “0000”,

  “retmsg”: “成功”,

  “data”: [

    {

      “tabId”: 1,

      “tabShowName”: “推薦”,

      “tabName”: “recommend”

    },

    {

      “tabId”: 2,

      “tabShowName”: “7×24”,

      “tabName”: “7×24”

    },

    {

      “tabId”: 3,

      “tabShowName”: “觀點”,

      “tabName”: “opinion”

    }

  ]

“`    

3、發送請求並獲取數據此處用的是axios

    方式一：發送get請求

    “`

    this.$axios.get(‘/getList’).then((res)={

        console.log(res)

    })

    “`

    方式二：發送post請求

    “`

      var  data={

        name:”張三”

      }

  this.$axios.post(“/api/addgoods”,data).then(res={

        console.log(res,”MOCK __ POST”)

  })

    “`

4、附上官網鏈接

5、目錄結構

6、完結?

在開發過程中，有很多的ajax請求，前後端分離開發你肯定遇到這樣的問題，後台給你的接口文檔，你需要在本地模擬數據返回，可能你也用到過我之前用的蠢方法，就是新建一個test.json文件，放入接口文檔中寫的返回示例，這麼做有個很大的問題是不夠靈活，而且還需要切換url，現在學會使用mock.js攔截ajax請求，更加方便的構造你需要的假數據。

在這裡我舉的例子是在vue項目中如何使用mock.js。

這裡我舉例最常用的格式

Mock.mock(url,data);

url用正則寫，這樣get請求傳參時，也能攔截數據了。

不設置延時很有可能遇到坑，這裡需要留意，因為真實的請求是需要時間的，mock不設置延時則是馬上拿到數據返回，這兩個情況不同可能導致在接口聯調時出現問題。所以最好要先設置延時請求到數據。

生成規則和示例：

Mock.Random 提供的完整方法（佔位符）如下：

Mock.js 是用來模擬產生一些虛擬的數據，可以讓前端在後端接口還沒有開發出來時獨立開發。我們可以使用真實的url，mockjs可以攔截ajax請求，返回設定好的數據。

可以在src目錄下新建mock文件夾，新建index.js文件。在index.js文件中建立虛擬數據。

如果需要使用虛擬數據，就在main.js入口文件中導入mockjs文件。

Mock.setup( settings )： 配置攔截 Ajax 請求時的行為。

Mock.mock( template )： 根據數據模板生成模擬數據。template表示數據模板，可以是對象或字符串。數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值。

‘name|rule’: value ： 屬性名 name、生成規則 rule、屬性值 value。屬性名 和 生成規則 之間用豎線 | 分隔。

‘name|min-max’: array： 當屬性值是數組 Array。通過重複屬性值 array 生成一個新數組，重複次數大於等於 min，小於等於 max。

‘name|+1’: number： 當屬性值是數字 Number。屬性值自動加 1，初始值為 number。

佔位符： 用 @ 來標識其後的字符串是 佔位符。佔位符 引用的是 Mock.Random 中的方法。

@cname： 隨機生成一個常見的中文姓名。

@ctitle( min, max )： 隨機生成一句中文標題。默認值為 3 到 7 之間的隨機數。

@integer( min, max )： 返回一個隨機的整數。min是最小值，max是最大值。

Mock.mock( rurl, rtype, function( options ) )： 記錄用於生成響應數據的函數。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數 function(options) 將被執行，並把執行結果作為響應數據返回。

此時，前台向後台發送請求，會獲取到mokejs虛擬數據，而不是真實的後台數據。

1. 檢查Mock.mock當中的數據模板定義是否正確。如：”number|+1″，Mock.mock(‘@date’)等帶有隨機數據。

2. 檢查數據返回部分是否根據參數不同返回不同的數據。如：pageList=mockList.filter(…)。

談下遠程字體跨域的問題。

直接了當了說，解決此類問題，最直接的方法就是，就是給被請求的服務器，添加HTTP頭響應頭，這裡提供兩種添加HTTP頭的方法：

第一種，就是在程序中添加HTTP頭：

如： Response.Headers.Add(“Access-Control-Allow-Origin”, “*”);

// JSON

{

‘Access-Control-Allow-Origin’: ‘*’,

}

// HTML

meta http-equiv=”Access-Control-Allow-Origin” content=”*”

// PHP

header(“Access-Control-Allow-Origin: *”);

header(“Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept”);

添加此段代碼的目的很簡單，也就是告訴瀏覽器，這個資源是運行遠程所有域名訪問的。當然，此處的*也可以替換為指定的域名，出於安全考慮，建議將*替換成指定的域名。

第二種，就是在服務器上，添加HTTP響應頭。在這裡，我們就以IIS6.0為例：

在被請求的網站上，設置HTTP頭，添加“

//在被請求的網站上，設置HTTP頭，添加

“Access-Control-Allow-Origin:*” //值為*或指定的域名。

第三種，使用JSONP格式，即在jQuery中ajax請求參數dataType:’JSONP’：

script

$.ajax({

url:”;lng=113.93832783228″,

type:’GET’,

dataType:’JSONP’,  // 處理Ajax跨域問題

success: function(data){

$(‘body’).append( “Name: ” + data );

}

});

/script

一般完成以上工作，就可以了。網上還有說在被請求服務器根目錄下創建:”crossdomain.xml”的文件。內容格式如下：

?xml version=”1.0″?

cross-domain-policy

allow-access-from domain=”*” /

/cross-domain-policy

網頁鏈接

相對於其他同類的框架的實現，mock.js超出了我的意料。

基於 數據模板 生成模擬數據。

基於 HTML模板 生成模擬數據。

攔截並模擬 ajax 請求。

是的，mock.js只做上述的幾件事，但做的足夠出色。

解決的問題

開發時，後端還沒完成數據輸出，前端只好寫靜態模擬數據。

數據太長了，將數據寫在js文件里，完成後挨個改url。

某些邏輯複雜的代碼，加入或去除模擬數據時得小心翼翼。

想要儘可能還原真實的數據，要麼編寫更多代碼，要麼手動修改模擬數據。

特殊的格式，例如IP,隨機數，圖片，地址，需要去收集。

超爛的破網速…

…

以上都不再是問題

接下來體驗 攔截ajax請求並返回模擬數據。

步驟1 – 安裝

安裝太簡單，跳過

步驟2 – 配置模擬數據

Mock.mock(”, {

   ‘name’   : ‘[@name](/user/name)()’,

   ‘age|1-100’: 100,

   ‘color’   : ‘[@color](/user/color)’});

步驟3 – 發送ajax請求(jquery版)

$.ajax({

   url: ”,}).done(function(data, status, xhr){

   console.log(

       JSON.stringify(data, null, 4)

   )    })

步驟4 – 查看響應的結果

// 結果1{

   “name”: “Elizabeth Hall”,

   “age”: 91,

   “color”: “#0e64ea”}// 結果2{

   “name”: “Michael Taylor”,

   “age”: 61,

   “color”: “#081086”}