如何在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中導入假數據的那行代碼便可，其他都不用動，簡直不能更方便哈！

（完）