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

時間 2019-11-15

標籤改造 vue cli 使用 mockjs 搭建 mock server 简体版

原文原文鏈接

關於

最近準備開發一款web應用，考慮到可能會有先後端並行開發的場景,因此決定使用mockjs作mock server。javascript

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

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

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

這時能夠考慮前端搭建web server本身模擬假數據,mockjs用來生成隨機數據,攔截 Ajax 請求。vue

下面引用mockjs官網的圖片： java

正文:如何改造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中已經封裝好了,咱們只須要直接那過來用就能夠了。webpack

在項目根路徑下建立mock文件夾,並建立圖片中mock文件夾中的幾個文件 ios
index.js 文件git

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 = {};
        }
        
      });
    }
  }
}
複製代碼