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

本文首發在 掘金

關於

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

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

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

當前端工程師需要獨立於後端並行開發時,後端接口還沒有完成,那麼前端怎麼獲取數據？

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

下面引用mockjs官網的圖片：

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

vue項目初始化

1. 安裝vue-cli腳手架工具,並初始化項目

    //全局安裝 vue-cli
    npm install vue-cli -g
    //創建一個基於 webpack 模板的新項目
    vue init webpack mock-server-demo
    //切換至mock-server-demo目錄
    cd mock-server-demo

2. 安裝依賴

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

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

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

1. 在項目根路徑下創建mock文件夾,並創建圖片中mock文件夾中的幾個文件
   

2. 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));
        });
    }

3. 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);
        }
    };
    

3. 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
        }
    }
    

4. 在路徑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

1. 在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 = {};
        }
        
      });
    }
  }
}

看看效果

可以看到每次點擊請求時會獲取的隨機生成的mock data。

最後

本頁博客址是作爲一個demo,更多的使用方法可以多參考官方代碼。

還有前端自己搭建mock server需要和後端開發首先溝通好才能定義數據結構和接口url,如果後端更改了商定好的數據結構，那麼我們只能推倒重來，mock server只是在一定程度上解決問題的手段。

倉庫路徑

謝謝支持

您的支持是我繼續寫作的動力。