在vue-cli中搭建mock服務器

        

       在嘗試做一個前后端分離的個人博客的時候，由於前后端都需要自己完成，所以首先需要把前端頁面寫好，但同時需要調用接口，后端代碼卻還沒有開動，怎么辦呢，所以這時候就需要自己搭建來模擬假數據了。

        在以前的實習中曾經用過mock, 覺得還挺不錯，所以決定用 vue 結合 mock來攔截 Ajax 請求，加快博客完成的速度，在參考官網和各類文章后，其開發過程如下所示

1. 安裝依賴

            cnpm  install  mockjs --save-dev 

            注： 安裝完以后，由於還附帶許多依賴，所以可能還需要執行cnpm install

 

       2.  建立項目文件結構

 

            

 

        3.   util.js 中代碼如下

 

// 引入外部資源
const fs = require('fs')                        
const path = require('path')
 
module.exports = {
    // 用於被index.js進行調用
    getJsonFile (filePath) {
        // 讀取指定的json文件
        const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
        // 解析並返回
        return JSON.parse(json)
    }
}

4.     index.js

const Mock = require('mockjs'
const util = require('./util')
 
module.exports = function(app) {
    // 監聽請求
    app.get('/getArticleList', (rep, res) => {
        // 響應時，返回 mock data的json數據
        const articleList = util.getJsonFile('./article-list.json')
        // 將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器
        res.json(Mock.mock(articleList))
    })
}

 

    5.   json 格式（按自己需要，也可以用mock產生隨機數）

 

 

 

6.   修改 webpack 配置

            

              build -> webpack.dev.conf.js -> devServer  

 

             devServer.before: require('../mock') 引入即可

 

 

 

 

      在完成以上步驟以后，即可以請求成功啦，然后就可以完美的開始調用接口，用自己的模擬數據啦。