mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離

本篇文章為大家展示了mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)是專業(yè)的沈北新網(wǎng)站建設(shè)公司，沈北新接單;提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行沈北新網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

普通不涉及框架的項目中安裝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以內(nèi)隨機整數(shù)
      '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) {
    //創(chuàng)建對象
    xhr = new XMLHttpRequest();
    //設(shè)置請求參數(shù)
    xhr.open(method, url, isAsync);
    //回調(diào)函數(shù)
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    }
    //發(fā)送請求
    xhr.send();
  }
  ajax('get','http://api.com','', true);
</script>

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

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

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

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

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

返回數(shù)據(jù)效果：

mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離

上述內(nèi)容就是mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標題：mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離
分享網(wǎng)址：http://www.rwnh.cn/article8/jgjhip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、關(guān)鍵詞優(yōu)化、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計、響應式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離