1. 程式人生 > >Mockjs--前後端分離,模擬介面

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

Vue+Mock.js模擬登入和表格的增刪改查:https://blog.csdn.net/qq_32340877/article/details/81221825?utm_source=blogxgwz0