改造vue-cli,使用mockjs搭建mock server

林楠發表於2019-03-04

VueMockJSServer

關於

最近準備開發一款web應用，考慮到可能會有前後端並行開發的場景,所以決定使用mockjs做mock server。

瀏覽官網文件時發現沒有跑在webpack上的例子，索性自己找方法解決。

什麼是mockjs?他的使用場景是什麼？

當前端工程師需要獨立於後端並行開發時,後端介面還沒有完成,那麼前端怎麼獲取資料？

這時可以考慮前端搭建web server自己模擬假資料,mockjs用來生成隨機資料,攔截 Ajax 請求。

下面引用mockjs官網的圖片：

正文:如何改造vue-cli,將mockjs嵌入到webpack?

vue專案初始化

安裝vue-cli腳手架工具,並初始化專案

    //全域性安裝 vue-cli
    npm install vue-cli -g
    //建立一個基於 webpack 模板的新專案
    vue init webpack mock-server-demo
    //切換至mock-server-demo目錄
    cd mock-server-demo
複製程式碼

安裝依賴

    //我們使用axios來發起http請求
    npm install axios --save
    //安裝依賴mockjs
    npm install mockjs --save-dev
複製程式碼

搭建web server,響應瀏覽器的http請求

web server不需要自己搭建或者另外安裝依賴,在webpack-dev-server中已經封裝好了,我們只需要直接那過來用就可以了。

在專案根路徑下建立mock資料夾,並建立圖片中mock資料夾中的幾個檔案
index.js 檔案

    const Mock = require('mockjs');//mockjs 匯入依賴模組
    const util = require('./util');//自定義工具模組
    //返回一個函式
    module.exports = function(app){
        //監聽http請求
        app.get('/user/userinfo', function (rep, res) {
            //每次響應請求時讀取mock data的json檔案
            //util.getJsonFile方法定義瞭如何讀取json檔案並解析成資料物件
            var json = util.getJsonFile('./userInfo.json');
            //將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器
            res.json(Mock.mock(json));
        });
    }
複製程式碼

util.js 檔案

    const fs = require('fs');//引入檔案系統模組
    const path = require('path');//引入path模組
    
    module.exports = {
        //讀取json檔案
        getJsonFile:function (filePath) {
            //讀取指定json檔案
            var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
            //解析並返回
            return JSON.parse(json);
        }
    };
    
複製程式碼

userInfo.json 檔案

    {
        "error":0,
        "data":{
            "userid": "@id()",//隨機生成使用者id
            "username": "@cname()",//隨機生成中文名字
            "date": "@date()",//隨機生成日期
            "avatar": "@image('200x200','red','#fff','avatar')",//生成圖片
            "description": "@paragraph()",//描述
            "ip": "@ip()",//IP地址
            "email": "@email()"//email
        }
    }
    
複製程式碼

在路徑build/webpack.dev.conf.js檔案中的devServer屬性中新新增一個before鉤子函式,用來監聽來自web的http請求。(關於devServer.before如何使用)

    devServer: {
        clientLogLevel: 'warning',
        historyApiFallback: {
          rewrites: [
            { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
          ],
        },
        hot: true,
        contentBase: false,
        compress: true,
        host: HOST || config.dev.host,
        port: PORT || config.dev.port,
        open: config.dev.autoOpenBrowser,
        overlay: config.dev.errorOverlay
          ? { warnings: false, errors: true }
          : false,
        publicPath: config.dev.assetsPublicPath,
        proxy: config.dev.proxyTable,
        quiet: true,
        before: require('../mock'),//引入mock/index.js
        watchOptions: {
          poll: config.dev.poll,
        }
      },
    
複製程式碼

瀏覽器發起請求，獲取mock data

在App.vue檔案中使用axios發起http請求

export default {
  name: 'App',
  data(){
    return {
      userInfo:{}
    }
  },
  created(){
    this.getUserInfo();
  },
  methods:{
    getUserInfo(){
     //請求'/user/userinfo'介面
      this.axios.get('/user/userinfo')
      .then(({data})=>{
        //列印mock data
        console.log(data);
        if(data.error === 0){
          this.userInfo = data.data;
        }else{
          this.userInfo = {};
        }
        
      });
    }
  }
}
複製程式碼