mock.js模擬ajax數據請求

　　在我們開發過程中存在着前端頁面ui完成了，但是沒有接口進行聯調數據的情況，現在介紹一下用mock.js來完成數據的請求。這樣在后期我們的后台接口完成后只需要更改請求的接口名字即可！前提是你的模擬字段名和后台的保持一致。現在來描述一個我在開發中用的方法，目前我認為叫簡單的，沒有大神們的那么復雜（配置webpack和借助node里面的express來模擬）

• 下載mockjs包

• cnpm i mockjs -D

   

• 創建一個mock.js文件，在里面引入mockjs

• let Mock = require('mockjs')

   

• 接着開始寫接口，這里我就寫一個post，一個get接口

• Mock.mock('http://test/mock.com','post',function(options){
      console.log(options);
      return {"mocktest|4-6":[
          {
              'name': '@cname',  // 中文名稱
              'id|+1': 88,    // 屬性值自動加 1，初始值為88
              'age|18-28': 0,   // 18至28以內隨機整數, 0只是用來確定類型
              'birthday': '@date("yyyy-MM-dd")',  // 日期
              'city': '@city(true)',   // 中國城市
              'color': '@color',  // 16進制顏色
              'isMale|1': true,  // 布爾值
              'isFat|1-2': true,  // true的概率是1/3
              'brother|1': ['jack', 'jim'], // 隨機選取 1 個元素
              'sister|+1': ['jack', 'jim', 'lily'], // array中順序選取元素作為結果
              'friends|2': ['jack', 'jim'] // 重復2次屬性值生成一個新數組
          }
      ]}
  })
  
  Mock.mock('http://test/getmock.com','get',function(options){
      console.log(options);
      return {"mocktest|4-6":[
          {
              'name': '@cname',  // 中文名稱
              'id|+1': 88,    // 屬性值自動加 1，初始值為88
              'age|18-28': 0,   // 18至28以內隨機整數, 0只是用來確定類型
              'birthday': '@date("yyyy-MM-dd")',  // 日期
              'city': '@city(true)',   // 中國城市
              'color': '@color',  // 16進制顏色
              'isMale|1': true,  // 布爾值
              'isFat|1-2': true,  // true的概率是1/3
              'brother|1': ['jack', 'jim'], // 隨機選取 1 個元素
              'sister|+1': ['jack', 'jim', 'lily'], // array中順序選取元素作為結果
              'friends|2': ['jack', 'jim'] // 重復2次屬性值生成一個新數組
          }
      ]}
  })
  
  module.exports = Mock

   

• 現在的mock的接口完成，具體的接口數據怎么配置，可以去看詳細的mock官方文檔，模擬出你需要的接口字段和數據類型 接着需要在main.js文件里面引入你的mock這個文件頁面

• require('./assets/mock')

   

• 接着就可以在你的頁面使用這個接口來獲取對應的數據

• getMockMoment(){
        this.$http.post('http://test/mock.com',{
          params:{
            start:1,
            end:10
          }
        }).then(res => {
          console.log(res)
        })
      },
  
  getmocklist(){
        this.$http.get('http://test/getmock.com',{
          data:{
            id:3
          }
        }).then(res => {
          console.log(res)
        })
      }

   

• 上面的額分別對應着get和post的請求參數的傳遞，這樣助於你自己需要執行對應的增刪查改邏輯，在mock接口文件中能夠獲取到你傳入的參數，打印option形參得到結果，參數全部都在body中，接着你可以對應的參數來進行你所需要的邏輯 {url: "http://test/getmock.com", type: "GET", body: "{"id":3}"}