快捷導(dǎo)航

mock.js模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離

更新時(shí)間：2019年07月24日 11:51:23 作者：壞丶毛病

這篇文章主要為大家詳細(xì)介紹了mock.js模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

眾所周知，在日常開(kāi)發(fā)中，前后端分離是最常見(jiàn)的開(kāi)發(fā)模式，前端完成頁(yè)面渲染，后端提供接口數(shù)據(jù)。

但是起初項(xiàng)目剛開(kāi)始，后端還沒(méi)有寫(xiě)好接口數(shù)據(jù)，前端要構(gòu)建頁(yè)面，還得考慮結(jié)構(gòu)以及后期真實(shí)數(shù)據(jù)的問(wèn)題。

所以前后端統(tǒng)一接口數(shù)據(jù)和格式是必要的。

而當(dāng)統(tǒng)一好接口數(shù)據(jù)和格式后，前端就可以通過(guò)mock.js來(lái)模擬對(duì)應(yīng)格式的數(shù)據(jù)，以此來(lái)完成頁(yè)面的搭建，當(dāng)后端完成接口和數(shù)據(jù)后，因?yàn)榍捌跀?shù)據(jù)格式都是規(guī)范好的，所以只要去除掉mock.js那部分即可，而不需要再更改界面。

那么說(shuō)了這么多，mock.js到底是什么？

根據(jù)官網(wǎng)簡(jiǎn)單的解釋來(lái)說(shuō)，就是：攔截ajax請(qǐng)求，模擬返回自定義格式的數(shù)據(jù)，實(shí)現(xiàn)前后端分離。

說(shuō)的這么厲害，那么我們來(lái)看看具體用法。

這次先看看在原生中怎么使用，下次介紹在vue中的使用。

普通不涉及框架的項(xiàng)目中安裝mock.js推薦使用bower安裝：

npm install bower -g

bower install mockjs --save

具體使用：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>mock js-demo1</title>
</head>
 
<body>
 
</body>
 
</html>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/ajax.js"></script>
<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
<script>
  Mock.mock('http://api.com', {
    'users|5': [ {
      'name': '@cname', //中文名稱(chēng)
      'age|1-100': 100, //100以內(nèi)隨機(jī)整數(shù)
      'birthday': '@date("yyyy-MM-dd")', //日期
      'city': '@city(true)' //中國(guó)城市
    }]
  });
  // //JQuery方式
  $.ajax({
    url: 'http://api.com',
    dataType: 'json'
  }).done(function (data, status, xhr) {
    console.log(
      JSON.stringify(data, null, 4)
    )
  });
  //原生ajax方式
  function ajax(method, url, params, isAsync) {
    //創(chuàng)建對(duì)象
    xhr = new XMLHttpRequest();
    //設(shè)置請(qǐng)求參數(shù)
    xhr.open(method, url, isAsync);
    //回調(diào)函數(shù)
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    }
    //發(fā)送請(qǐng)求
    xhr.send();
  }
  ajax('get','http://api.com','', true);
</script>

這里我引入了通過(guò)bower下載的mock.js，然后給mockjs給定一個(gè)請(qǐng)求地址（如果有可以給定真實(shí)地址，沒(méi)有可以寫(xiě)個(gè)假地址，只要和ajax請(qǐng)求地址一致即可），然后在mock的第二個(gè)參數(shù)中定義了數(shù)據(jù)格式，是個(gè)隨機(jī)五位的數(shù)組對(duì)象，包括姓名、年齡、生日、地址

然后通過(guò)ajax正常請(qǐng)求地址，然后返回值就會(huì)收到mock.js的攔截，而返回我們自定義格式的數(shù)據(jù)，而不是后端數(shù)據(jù)

這樣在項(xiàng)目初期，后端沒(méi)有數(shù)據(jù)的情況下，我們就可以通過(guò)模擬數(shù)據(jù)完成頁(yè)面功能的開(kāi)發(fā)。

當(dāng)后端數(shù)據(jù)完成后，我們只要?jiǎng)h除mock.js部分即可（如果前期接口地址是假的，改一下接口地址即可）

這里推薦把mock.js部分抽離到公共的文件中，引入即可，這樣后期可維護(hù)性強(qiáng)，只要不引入mock部分即可，而不用來(lái)回刪代碼。

返回?cái)?shù)據(jù)效果：