一：使用場(chǎng)景

哎喲，好煩啊，這個(gè)需求還么結(jié)束就來(lái)下一個(gè)需求，程序員不要排期的嗎？

沒(méi)辦法啊，資本主義的XX嘴臉啊

來(lái)吧，技術(shù)評(píng)審我倆把接口格式對(duì)一把，你先開(kāi)發(fā)，我這邊結(jié)束了我跟上，再聯(lián)調(diào)

MMP，那又增加了我的工作量啊，每次我都要自己先把數(shù)據(jù)放在一個(gè)配置文件中，引入使用，然后對(duì)接的
時(shí)候還得刪除無(wú)用代碼，好氣

你自己Mock接口啊，就向我們后端經(jīng)常用PostMan一樣模擬請(qǐng)求啊

Mock？？我去查查看

二：Mock的概念

1：Mock的描述

Mock接口其實(shí)就是模擬真實(shí)接口提供一個(gè)在開(kāi)發(fā)環(huán)境的假數(shù)據(jù)，甚至是真實(shí)數(shù)據(jù)，在開(kāi)發(fā)時(shí)，經(jīng)常出現(xiàn)
接口內(nèi)容不能夠及時(shí)的跟進(jìn)，導(dǎo)致開(kāi)發(fā)過(guò)程中添加一些額外的工作量。接下來(lái)的例子全部圍繞著Vue為主體介紹
前后端提前確定好通信的JSON格式之后，我們?cè)诓灰蕾?lài)后端進(jìn)度的同時(shí)，能提供一套好的開(kāi)發(fā)體驗(yàn)。

2：Mock能解決的問(wèn)題

減少額外工作，在沒(méi)有Mock接口的時(shí)候我們模擬數(shù)據(jù)的方式很煩躁，比如list列表，需要在data中聲明list，去調(diào)試內(nèi)容，或者引入一個(gè)mock文件，這樣做導(dǎo)致在聯(lián)調(diào)調(diào)用接口的部分代碼沒(méi)有寫(xiě)，聯(lián)調(diào)成功的時(shí)候要?jiǎng)h除很多無(wú)用代碼 ---> 通過(guò)Mock只需在聯(lián)調(diào)的時(shí)候把Mock接口的地址換成真實(shí)地址即可

import { mockList2 } from 'mock/list.js';

export default {
 data () {
  return {
   mockList: [
    {
     "name": 'tx',
     "age": 12
    }
   ],
   mockList2
  }
 }
}

如果采用上述的方式去模擬數(shù)據(jù)，缺少真正缺口所具備的狀態(tài)，比如刪除接口，有成功和失敗的區(qū)分，這個(gè)模擬就很惡心了 ----> 通過(guò)Mock，可以直接通過(guò)實(shí)在的query或者其他的操作來(lái)達(dá)到同樣的目的

3：Mock的幾種方式以及對(duì)應(yīng)的優(yōu)缺點(diǎn)

4：本地Mock接口

該篇文章針對(duì)本地Mock接口進(jìn)行操作，其他的方式會(huì)簡(jiǎn)要介紹并給出對(duì)應(yīng)的鏈接，如果有需要，自行去查閱。

三：本地Mock周邊知識(shí)

本地Mock的思想就是利用Node + express完成Restful Api。結(jié)合webpack配置項(xiàng)devServer同時(shí)利用Vue-cli3.0的暴露的配置利用本地express完成mock接口的添加

1、Node+Express的相關(guān)知識(shí)點(diǎn)，用node+express寫(xiě)過(guò)Restful Api的就應(yīng)該知道接下來(lái)Mock怎么處理了，這里我先簡(jiǎn)要介紹一下我們需要用到的技術(shù)吧（Express的路由以及node的fs模塊）

Express路由相關(guān)，具體的見(jiàn)文檔，這里不區(qū)分請(qǐng)求方法，直接app.use

const express = require('express');
const app = express();

// 這樣一個(gè)簡(jiǎn)單的路由就完成了，請(qǐng)求到/ajax-get-info的請(qǐng)求就能拿到對(duì)應(yīng)的JSON數(shù)據(jù)
app.use('/ajax-get-info', (req, res) => {
 res.send({
  "success": true,
  "code": 0,
  "data": {}
 }) 
});

針對(duì)不同的請(qǐng)求生成動(dòng)態(tài)的內(nèi)容，我們可以通過(guò)req.query和req.params等來(lái)生成動(dòng)態(tài)內(nèi)容，在express中，我們傳入的body內(nèi)容，在req.body中并獲取不到，需要添加中間件body-parser，需要注意的是這個(gè)中間件不能在app全局路由使用，不然會(huì)影響到代碼到測(cè)服的接口，利用http-proxy-middleware轉(zhuǎn)發(fā)的接口，所以我們需要單獨(dú)的設(shè)置一個(gè)Mock路由，針對(duì)路由級(jí)別的使用中間件，代碼如下

const bodyParser = require('body-parser');
const express = require('express');

const mockRouter = express.Router();
// express middleware bodyParser for mock server
// for parsing application/json
mockRouter.use(bodyParser.json());
// for parsing application/x-www-form-urlencoded
mockRouter.use(bodyParser.urlencoded({ extended: true }));
// Api prefix named /mock
app.use('/mock', mockRouter);

// now you can set mock api use mockRouter
mockRouter.use('/ajax-get-info', (req, res) => {
 // use req.body to get request body info
 console.log(req.body);
 
 res.send({
  "success": true,
  "code": 0,
  "data": {
   // return dynamic JSON
   name: req.body.name 
  }
 })
});

現(xiàn)在Mock級(jí)別的路由已經(jīng)有了，接下來(lái)我們就要準(zhǔn)備對(duì)應(yīng)的路由和響應(yīng)的callback了，添加一個(gè)mock文件夾，專(zhuān)門(mén)放置一些mock接口的文件，利用node的fs模塊引入所有需要mock的接口即可

const path = require('path');
const mockDir = path.resolve(__dirname, '../mock');

fs.readdirSync(mockDir).forEach(file => {
  const mock = require(path.resolve(mockDir, file));
  // mockRouter就是上面Mock路由即可
  mockRouter.use(mock.api, mock.response);
});

2、Vue-cli3.x的基本知識(shí)，相對(duì)比于Vue-cli2.x的版本，把webpack的配置封裝出來(lái)，拋出一些外在接口去修改webpack配置，我們需要了解的是針對(duì)開(kāi)發(fā)模式express的使用（內(nèi)部使用webpack-dev-serve），Vue-cli3.0需要的是在適當(dāng)?shù)臅r(shí)機(jī)處理開(kāi)發(fā)模式的express實(shí)例，來(lái)達(dá)到Mock的目的

module.exports = {
 dev: {
  before: (app) => {
   // app就是底層的express實(shí)例，上面針對(duì)express實(shí)例的操作，全部換成app即可 
  } 
 } 
}

3、至于mock的文件下面的js文件就是我們需要掛載到express的mock接口的信息，下面給出一個(gè)實(shí)例，其他仿照即可，一個(gè)js文件代表一個(gè)mock接口

// 注意，由于是針對(duì)子路由級(jí)別的，前端調(diào)用的url為/mock/get-info
module.exports = {
 api: '/get-info',
 response: (req, res) => {
  // 由于添加了body-parser中間件，所以可以解析傳入的body，這里就可以用來(lái)動(dòng)態(tài)的生成JSON
  const flag = req.body.flag;

  console.log(req.body);

  res.send(
   {
    success: flag,
    code: 0,
    data: [],
    message: '獲取信息成功',
   },
  );
 },
};

四：結(jié)合上面的幾點(diǎn)整合處理

五：其他幾種方式的Mock接口

1. mock.js去，給出官網(wǎng)，它會(huì)修改原生的XMLHttpRequest來(lái)攔截ajax請(qǐng)求，同時(shí)提供強(qiáng)大的根據(jù)模板生成數(shù)據(jù)
2. fastmock，類(lèi)似本地Mock，數(shù)據(jù)放在了外網(wǎng)，團(tuán)隊(duì)配合可以選擇，具體使用見(jiàn)鏈接
3. 后端Controller生成靜態(tài)JSON，不推薦，后端不會(huì)吊我們的，搞不好會(huì)干架，哈哈

六：總結(jié)

前端工程化的出現(xiàn)能夠讓前端做的事情很多很多，技術(shù)的廣度能夠支持你做一些有意思的事情。首先這個(gè)可以做一些優(yōu)化，比如本地的Mock可以使用mock.js純處理一些數(shù)據(jù)的生成工作。注意mock接口的url和自己proxy的接口不要沖突。使用Vue-cli3.0，它不僅是封裝了webpack的配置，同時(shí)提供了自己一套插件機(jī)制，接下來(lái)寫(xiě)一個(gè)簡(jiǎn)單的cli插件自動(dòng)化完成這些操作，
敬請(qǐng)期待。歡迎評(píng)論交流。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論