相信很多前端同學都有一個困擾，就是沒有后端數據的情況下感覺很多想法都不能動手去實現，這里介紹一個模擬后端數據的工具，可以一定程度上解決我們的困擾。
很多人或多或少的都聽說過mockjs，都知道是一個模擬后端接口的工具，但是去看官網的時候上邊各種安裝，各種模塊化，對於初學者很不友好，結果就這么放棄了。
下邊的例子直接復制粘貼然后打開頁面控制台就能看到效果，結合代碼就能知道大概mockjs是做了什么事了
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
</head>
<body>
<script src="http://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
<script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript">
var url = 'http://api.com'
var data = Mock.mock(url, {
"user|5-10": [{
'name': '@cname', //中文名稱
'age|1-100': 100, //100以內隨機整數
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(false)' //中國城市
}]
});
$.ajax({
url: url,
type: 'post',
contentType: 'text/plain',
dataType: 'json',
success: function(res) {
console.log(res)
}
});
</script>
</body>
</html>
一下是控制台打印的結果
結合html中的data中的定義大概知道整體過程是什么樣的了。
在此基礎上了解更多的mockjs的用法可以去查看官網中的示例http://mockjs.com/examples.html