如何在vue-cli項目中結合mockjs模擬假數據

1.前言

在如今前后端分離的開發方式已被廣泛采用的今天，前端同學和后端同學各自獨立開發，后端提供數據接口，前端調用接口獲取數據渲染頁面。但是在實際開發中，后端開發由於邏輯相對復雜接口遲遲提供不到位，而前端正着急着調用接口來測試頁面是否能夠正常渲染，這就造成開發進度阻塞。幸好，我們有mockjs這個插件可以完美的解決這個問題，該插件可以非常方便的模擬后端提供接口以供調用，並且在后續后端真實接口提供以后，我們只需將創建的模擬數據文件刪掉即可，絲毫不會對我們的項目造成污染。下面我們將介紹一下如何在vue-cli項目中結合mockjs模擬后端接口和數據。

2.安裝

使用之前，我們需要先安裝一下mockjs

npm install mockjs --save-dev

3.使用mockjs模擬數據

安裝完成之后，我們在項目的src目錄下新建mock.js文件，並引入mockjs:

import Mock from 'mockjs'

引入之后，我們就可以開始模擬我們想要的數據啦，示例如下：

import Mock from 'mockjs'

const Random = Mock.Random;

function getData(){
  let datalist= [];
  for (let i = 0; i < 100; i++) {
    let newData = {
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼
      author_name: Random.cname(), // Random.cname() 隨機生成一個常見的中文姓名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默認為yyyy-MM-dd；Random.time() 返回一個隨機的時間字符串
    }
    datalist.push(newData)
  }
  return {
    data: datalist
  }
}
const data = Mock.mock('/msg1',getData)
export default {data};

上面代碼中的getData()函數是用來批量生成數據的，Mock.mock()函數的第一個參數是被請求的url，第二個參數是后端要返回給前端的數據，寫好之后我們將該接口導出。

4.導入模擬好的數據接口

模擬好假數據接口之后，我們還要在main.js中將接口導入，這樣在項目中任意組件內都可以請求這些接口了：

import mockdata from './mock'

5.測試模擬好的接口

到此，我們就已經完成數據接口的模擬，我們可以來測試一下，看看接口效果。我們在任意組件內，對寫好的接口url發起請求，看看返回的數據，代碼如下：

<button @click="fasong">fasong</button>

methods:{
    fasong(){
      this.$http.get('/msg1').then(function (res) {
        console.log(res)
      })
    }
  }

控制台打印的請求返回數據如圖：

OK，完美！

6.總結

當后端寫好真實接口以后，我們只需刪掉創建的mock.js文件和在main.js中導入假數據的那行代碼即可，其余都不用動，簡直不能更方便哈！

（完）