溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了mock.js模擬數據實現前后端分離，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
普通不涉及框架的項目中安裝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部分即可，而不用來回刪代碼。
返回數據效果：
上述內容就是mock.js模擬數據實現前后端分離，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
