Vue項目中的mock數據

在我們實際開發中，前端大部分時候都是需要等待后端的數據接口，所以會自己mock 數據也是非常必要的。

所謂的mock數據，就是在本地建立一個自己數據庫，然后訪問這些模擬數據，使得開發過程中可以看到與調用真是的數據一樣的效果。使用mock，就可以提高整個項目的開發效率（不需要停下項目的開發等待后端的數據接口）。當開發完成后我們也只需要將模擬的地址localhost:8888，改成真實的地址就可以了。

mock數據需要的json-server

使用mock數據需要開啟一個服務來作為數據服務器，我們這兒使用的是json-server。

$ npm i -g json-server --D
//測試是否安裝成功
$ json-server -v

 新建mock數據

在項目的根目錄新建一個mock目錄，用來存放我們需要使用的數據。我的項目中主要使用了三個數據：goods.js、rating.js、seller.js，還需要一個mock.js作為數據的出口文件（這個文件自定義，名字可以隨便）。

在數據文件goods.js、rating.js、seller.js里面添加數據：

module.exports = {
    "name": "粥品香坊（回龍觀）",
    "description": "蜂鳥專送",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90
    }

 出口文件mock.js的代碼：

//引入數據模塊調用
var goods = require('./goods.js');
var ratings = require('./ratings.js');
var seller = require('./seller.js');
//暴露一個返回值
module.exports = function(){
  return {
    "goods": goods,
    "ratings": ratings,
    "seller": seller
  }
}

 

 webpack.config.js的配置：(這兒只是mock數據的配置，完整項目還是需要配完整的，要看完整的可以看前面寫文章)

module.exports = {
    devServer:{
       proxy:{
         '/rest/*':{
        target: 'http://localhost:8888',
        secure:false,
        pathRewrite: {
          '^/rest': ''
        }
      }  
    }

 rest:自定義的，只是用來訪問數據的參數，由於mvvm框架是遵循RESTFUL模式的，所以這兒用的rest。

訪問地址時url: /rest/list    就相當於 localhost:8888/list

axios.get('/res/list')  = axios.get('locahost:8888/list')

 開啟mock數據服務

開發服務后，就可以在瀏覽器里面訪問數據了

//進入項目根目錄
$ cd myApp
//開啟服務
$ json-server mock/mock.js --watch --port 8888