mock.js模擬數據實現前后端分離

來源：懂視網責編：小采時間：2020-11-27 21:53:24

mock.js模擬數據實現前后端分離

mock.js模擬數據實現前后端分離:眾所周知，在日常開發中，前后端分離是最常見的開發模式，前端完成頁面渲染，后端提供接口數據。但是起初項目剛開始，后端還沒有寫好接口數據，前端要構建頁面，還得考慮結構以及后期真實數據的問題。所以前后端統一接口數據和格式是必要的。而當統一好接

推薦度：

點擊下載本文 文檔為doc格式

導讀mock.js模擬數據實現前后端分離:眾所周知，在日常開發中，前后端分離是最常見的開發模式，前端完成頁面渲染，后端提供接口數據。但是起初項目剛開始，后端還沒有寫好接口數據，前端要構建頁面，還得考慮結構以及后期真實數據的問題。所以前后端統一接口數據和格式是必要的。而當統一好接

眾所周知，在日常開發中，前后端分離是最常見的開發模式，前端完成頁面渲染，后端提供接口數據。

但是起初項目剛開始，后端還沒有寫好接口數據，前端要構建頁面，還得考慮結構以及后期真實數據的問題。

所以前后端統一接口數據和格式是必要的。

而當統一好接口數據和格式后，前端就可以通過mock.js來模擬對應格式的數據，以此來完成頁面的搭建，當后端完成接口和數據后，因為前期數據格式都是規范好的，所以只要去除掉mock.js那部分即可，而不需要再更改界面。

那么說了這么多，mock.js到底是什么？

根據官網簡單的解釋來說，就是：攔截ajax請求，模擬返回自定義格式的數據，實現前后端分離。

說的這么厲害，那么我們來看看具體用法。

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

普通不涉及框架的項目中安裝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', //中文名稱
 'age|1-100': 100, //100以內隨機整數
 'birthday': '@date("yyyy-MM-dd")', //日期
 'city': '@city(true)' //中國城市
 }]
 });
 // //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) {
 //創建對象
 xhr = new XMLHttpRequest();
 //設置請求參數
 xhr.open(method, url, isAsync);
 //回調函數
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.status == 200) {
 console.log(xhr.responseText);
 }
 }
 //發送請求
 xhr.send();
 }
 ajax('get','http://api.com','', true);
</script>

這里我引入了通過bower下載的mock.js，然后給mockjs給定一個請求地址（如果有可以給定真實地址，沒有可以寫個假地址，只要和ajax請求地址一致即可），然后在mock的第二個參數中定義了數據格式，是個隨機五位的數組對象，包括姓名、年齡、生日、地址

然后通過ajax正常請求地址，然后返回值就會收到mock.js的攔截，而返回我們自定義格式的數據，而不是后端數據

這樣在項目初期，后端沒有數據的情況下，我們就可以通過模擬數據完成頁面功能的開發。

當后端數據完成后，我們只要刪除mock.js部分即可（如果前期接口地址是假的，改一下接口地址即可）

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

返回數據效果：