mockjs配置和使用方式

需求

在前后端分離的開發(fā)中，需要前后端同時開發(fā)，但是在后端完成前，暫時是沒有數(shù)據(jù)返回給前端使用的，如果先寫靜態(tài)后面再改，就有重復工作的內(nèi)耗存在。

所以我們需要一種簡單快速的模擬數(shù)據(jù)的模塊，本文選的是mockjs。

步驟

1.安裝mockjs

npm install mockjs

2.在項目的src文件夾下建mock文件夾，在mock文件夾下建index.js(存放所有的http模擬返回的接口數(shù)據(jù));以下我寫了兩個接口：

import Mock from 'mockjs';
const vehicle = Mock.mock(
  '/api/car', 'post', (req, res) => {
    return {
      code: 200,
      data: [{
        id: 1,
        name: 'BYD',
      }, {
        id: 1,
        name: 'baojun',
      }],
      message: '查詢成功'
    }
  })
const user = Mock.mock(
  '/api/user', 'get', (req, res) => {
    return {
      code: 200,
      data: {
        id: 1,
        sex: 1,
        age: 25,
        createTime: '2017-04-01'
      },
      message: '查詢成功'
    }
  })
export default {
  vehicle,
  user
}

3.為了方便在所有組件中使用mock模擬數(shù)據(jù)在項目 的main.js中導入剛編輯的接口數(shù)據(jù)

 import mockdata from "./mock"; //這樣的話組件里就可以隨意調(diào)用接口了

4.在組件中調(diào)用虛擬接口

在生命周期鉤子函數(shù)中調(diào)用接口即可：我使用axios ，前提是項目已經(jīng)安裝了axios（先npm install axios，再npm install --save axios vue-axios），一個按鈕執(zhí)行點擊事件，下面方法調(diào)接口

<button @click="search()">點擊查詢</button>

  methods: {
    search() {
      this.$http.get("/api/user").then(res => {
        console.log(res);
      });
      this.$http.post("/api/car").then(res => {
        console.log(res);
      });
    }
  },

5.注在項目接口調(diào)試完成后需要刪除main.js中對于mock的引用以及mock/index.js這些模擬的資源，從而組件中不用做任何修改，最大減少反復工作量

mock使用及mock無侵入的解決

什么是mock？

看了官網(wǎng)的介紹，對前端來說“前后端分離”這點，大大提高了前端開發(fā)的效率

前端開發(fā)在商討完需求、接口及數(shù)據(jù)格式后，就可以直接利用mock模擬后臺返回的數(shù)據(jù)來進行代碼開發(fā)

為什么要用到mock？

下面我在畫個流程圖，幫助大家理解mock在項目中的處理邏輯

由此可以看出，前端可以利用mock服務來模擬請求后臺數(shù)據(jù)，只要接口文檔出來，就可以按照接口文檔的api和數(shù)據(jù)格式來自己用mock模擬假數(shù)據(jù)

如何使用mock？

此處以vue-cli2.x腳手架搭起的項目來介紹其使用

1.安裝mockjs npm install --save-dev mockjs或 npm install -D mockjs

2.根目錄src中添加mock文件夾，如下圖結(jié)構(gòu)，并創(chuàng)建

其中index.js內(nèi)容為：

 import Mock from 'mockjs'
 import { Service } from './data/service'
 Mock.mock(/\/Service\/ServiceList/, 'get', Service )
console.log('%c前端 mock 環(huán)境啟動成功', 'color: #38f;font-weight: bold')
export default Mock

data文件夾中的service.js 為mock模擬返回的數(shù)據(jù)，其內(nèi)容為：

import Mock from 'mockjs';
const Service = [];
for (let i = 0; i < 5; i++) {
Service.push(Mock.mock({
 id: Mock.Random.guid(),
 serviceName: `${Mock.Random.protocol()} --${Mock.Random.id()}`,
 'port|8000-9000': 1,
 ip: Mock.Random.ip(),
 status: Mock.Random.pick(['passing', 'Critical', 'critical','null']),
 'node|0-2': 1 
}));
}
export default Service;

3.在main.js中引入定義的mock文件夾

import Mock from './mock'

此時打開終端控制面板，運行 npm run dev 后，打開開發(fā)者調(diào)試工具的console，即可看見

4.接下來，發(fā)送的所有http請求均會被mock攔截，如果匹配到與mock中設置的url路徑一致 /Service/ServiceList 就會將service.js的模擬出的數(shù)據(jù)返回，如下（.vue的文件中）

<script>
import axios from "axios";
export default {
  data() {
    return {
    };
  },
  methods: {
    getServer() {
      axios
        .get('/Service/ServiceList')
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
     }
  },
};
</script>

? 如上截圖，可以看出已經(jīng)將發(fā)送給該url的請求匹配攔截并返回了一個對象，可以定義一個空數(shù)組將res.data的數(shù)據(jù)保存起來，到頁面進行渲染

5.如果發(fā)送http請求的url與mock中定義的不匹配或不存在的話，就會彈出報錯

注意：還記得前面說過的mock會攔截所有http請求，包括你要請求的真實API，也會攔截，提示404報錯；此時將main.js中的引入的 import Mock from './mock' 注釋掉就好了

但是，”懶“這個動力，讓我們思考，如何將mock這個東西很聽話的被我們”蹂躪“呢？

mock無侵入式配置

接著上面留出的問題，我們就要思考，如何將mock在項目代碼中分離，既能保證前后端分離開發(fā)，又能在不改代碼的情況下任意切換環(huán)境；

? 大家應該都清楚用vue-cli搭建好的項目框架中，會有直接配置好的 npm run dev 和 npm run build 環(huán)境；

? 想到這一步，大家應該也就有了思路，那就是再配置一套dev環(huán)境，重命名為mock，后期直接通過 npm run mock 和 npm run dev 一條指令隨意切換代碼運行環(huán)境

? 如何實現(xiàn)呢？且聽我細細道來（此處以vue@2.5.2版本為例）

1.用vue-cli搭建好的項目框架，打開 package.json 文件，添加運行腳本

"mock": "webpack-dev-server --inline --progress --config build/webpack.mock.conf.js"

如下：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "mock": "webpack-dev-server --inline --progress --config build/webpack.mock.conf.js",   //---此條腳本就是需要配置的參數(shù)，注意json文件中不能寫注釋，切勿復制此句話
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

2.在根目錄下的build文件夾中創(chuàng)建 webpack.mock.conf.js 文件，并將 webpack.dev.conf.js 的文件內(nèi)容全部復制過來

3.在 webpack.mock.conf.js 中添加配置，如下

let entry = baseWebpackConfig.entry
Object.keys(entry).forEach(function (name) {
 entry[name] = ['./src/mock'].concat(entry[name]) //---在運行npm run mock時將mock這個文件在entry中打包編譯進來
})

保存好后，打開終端運行 npm run mock

后期如果需要與后臺調(diào)試接口了，直接運行 npm run dev 即可切換過來，保證了mock在業(yè)務代碼中抽離出

注意 ：在 webpack.mock.config.js 中配置了entry后，是不需要在main.js中再引入Mock的。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論