Mockjs--前後端分離,模擬介面
什麼是Mockjs
Mock.js官方網址:
首頁:http://mockjs.com/
在Mockjs的官網中,就直接能看到這樣的一句話:生成隨機資料,攔截Ajax請求。
這句話集中體現了Mock.js能夠幹什麼!
Mockjs的使用場景
如今,前端所承載的東西越來越多,前後端分離開發已經漸漸成為趨勢。
前端開發,離不開資料展示,這個時候,需要一些相對真實的,能夠模擬資料的需求就越發的強烈了,而Mockjs就應運而生!
它可以真實的模擬介面呼叫,直接攔截Ajax請求,從而生成模板資料。
Mockjs的使用
作為練習使用的話,我強烈建議使用Mock.js的cdn地址。介面呼叫建議使用jQuery的cdn地址。
<script src="http://mockjs.com/dist/mock.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
Mock.mock()
mock()方法是Mockjs進行資料模擬的方法,基本使用示例如下:
var data = Mock.mock({
'title': '個人資料',
'name': 'mapbar_front',
'age': 26
});
console.log(data);
//這個data就是mock中的物件。
如果你想進行Ajax攔截的使用的話:
Mock.mock('https://mapbar.com/mdeditor',{
'title': '個人資料',
'name': 'mapbar_front',
'age': 26
});
//再進行資料請求
$.get('https://mapbar.com/mdeditor',function(data){
console.log(data);
//這個data就是上面mock出來的東西
})
這就是Mockjs的基本使用。
如何Mock資料,如何隨機生成資料,官方地址寫的非常清楚:
Mockjs文件(https://github.com/nuysoft/Mock/wiki)(https://github.com/nuysoft/Mock/wiki/Getting-Started)
vue+mockjs模擬資料的增刪改查功能: https://blog.csdn.net/yw00yw/article/details/81328126