vue中怎么配置和使用mockjs

這篇文章主要講解了“vue中怎么配置和使用mockjs”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue中怎么配置和使用mockjs”吧！

mockjs配置和使用方式

需求

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

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

步驟

1.安裝mockjs

npm install mockjs

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

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ù)在項(xiàng)目 的main.js中導(dǎo)入剛編輯的接口數(shù)據(jù)

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

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

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

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

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

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

mock使用及mock無侵入的解決

什么是mock？

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

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

為什么要用到mock？

下面我在畫個(gè)流程圖，幫助大家理解mock在項(xiàng)目中的處理邏輯

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

如何使用mock？

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

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)境啟動(dòng)成功', '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'

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

4.接下來，發(fā)送的所有http請(qǐng)求均會(huì)被mock攔截，如果匹配到與mock中設(shè)置的url路徑一致 /Service/ServiceList 就會(huì)將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的請(qǐng)求匹配攔截并返回了一個(gè)對(duì)象，可以定義一個(gè)空數(shù)組將res.data的數(shù)據(jù)保存起來，到頁面進(jìn)行渲染

5.如果發(fā)送http請(qǐng)求的url與mock中定義的不匹配或不存在的話，就會(huì)彈出報(bào)錯(cuò)

注意：還記得前面說過的mock會(huì)攔截所有http請(qǐng)求，包括你要請(qǐng)求的真實(shí)API，也會(huì)攔截，提示404報(bào)錯(cuò)；此時(shí)將main.js中的引入的 import Mock from './mock' 注釋掉就好了

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

mock無侵入式配置

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

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

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

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

1.用vue-cli搭建好的項(xiàng)目框架，打開 package.json 文件，添加運(yùn)行腳本

"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文件中不能寫注釋，切勿復(fù)制此句話
    "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)容全部復(fù)制過來

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

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

保存好后，打開終端運(yùn)行 npm run mock

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

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

感謝各位的閱讀，以上就是“vue中怎么配置和使用mockjs”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue中怎么配置和使用mockjs這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！