一：使用場景

哎喲，好煩啊，這個需求還么結束就來下一個需求，程序員不要排期的嗎？

沒辦法啊，資本主義的XX嘴臉啊

來吧，技術評審我倆把接口格式對一把，你先開發，我這邊結束了我跟上，再聯調

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

你自己Mock接口啊，就向我們后端經常用PostMan一樣模擬請求啊

Mock？？我去查查看

二：Mock的概念

1：Mock的描述

Mock接口其實就是模擬真實接口提供一個在開發環境的假數據，甚至是真實數據，在開發時，經常出現
接口內容不能夠及時的跟進，導致開發過程中添加一些額外的工作量。接下來的例子全部圍繞著Vue為主體介紹
前后端提前確定好通信的JSON格式之后，我們在不依賴后端進度的同時，能提供一套好的開發體驗。

2：Mock能解決的問題

減少額外工作，在沒有Mock接口的時候我們模擬數據的方式很煩躁，比如list列表，需要在data中聲明list，去調試內容，或者引入一個mock文件，這樣做導致在聯調調用接口的部分代碼沒有寫，聯調成功的時候要刪除很多無用代碼 ---> 通過Mock只需在聯調的時候把Mock接口的地址換成真實地址即可

import { mockList2 } from 'mock/list.js';export default { data () {  return {   mockList: [    {     "name": 'tx',     "age": 12    }   ],   mockList2  } }}

如果采用上述的方式去模擬數據，缺少真正缺口所具備的狀態，比如刪除接口，有成功和失敗的區分，這個模擬就很惡心了 ----> 通過Mock，可以直接通過實在的query或者其他的操作來達到同樣的目的

3：Mock的幾種方式以及對應的優缺點

4：本地Mock接口

該篇文章針對本地Mock接口進行操作，其他的方式會簡要介紹并給出對應的鏈接，如果有需要，自行去查閱。

三：本地Mock周邊知識

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

1、Node+Express的相關知識點，用node+express寫過Restful Api的就應該知道接下來Mock怎么處理了，這里我先簡要介紹一下我們需要用到的技術吧（Express的路由以及node的fs模塊）

Express路由相關，具體的見文檔，這里不區分請求方法，直接app.use

const express = require('express');const app = express();// 這樣一個簡單的路由就完成了，請求到/ajax-get-info的請求就能拿到對應的JSON數據app.use('/ajax-get-info', (req, res) => { res.send({  "success": true,  "code": 0,  "data": {} }) });

針對不同的請求生成動態的內容，我們可以通過req.query和req.params等來生成動態內容，在express中，我們傳入的body內容，在req.body中并獲取不到，需要添加中間件body-parser，需要注意的是這個中間件不能在app全局路由使用，不然會影響到代碼到測服的接口，利用http-proxy-middleware轉發的接口，所以我們需要單獨的設置一個Mock路由，針對路由級別的使用中間件，代碼如下

const bodyParser = require('body-parser');const express = require('express');const mockRouter = express.Router();// express middleware bodyParser for mock server// for parsing application/jsonmockRouter.use(bodyParser.json());// for parsing application/x-www-form-urlencodedmockRouter.use(bodyParser.urlencoded({ extended: true }));// Api prefix named /mockapp.use('/mock', mockRouter);// now you can set mock api use mockRoutermockRouter.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   } })});

現在Mock級別的路由已經有了，接下來我們就要準備對應的路由和響應的callback了，添加一個mock文件夾，專門放置一些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的基本知識，相對比于Vue-cli2.x的版本，把webpack的配置封裝出來，拋出一些外在接口去修改webpack配置，我們需要了解的是針對開發模式express的使用（內部使用webpack-dev-serve），Vue-cli3.0需要的是在適當的時機處理開發模式的express實例，來達到Mock的目的

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

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

// 注意，由于是針對子路由級別的，前端調用的url為/mock/get-infomodule.exports = { api: '/get-info', response: (req, res) => {  // 由于添加了body-parser中間件，所以可以解析傳入的body，這里就可以用來動態的生成JSON  const flag = req.body.flag;  console.log(req.body);  res.send(   {    success: flag,    code: 0,    data: [],    message: '獲取信息成功',   },  ); },};

四：結合上面的幾點整合處理

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

1. mock.js去，給出官網，它會修改原生的XMLHttpRequest來攔截ajax請求，同時提供強大的根據模板生成數據
2. fastmock，類似本地Mock，數據放在了外網，團隊配合可以選擇，具體使用見鏈接
3. 后端Controller生成靜態JSON，不推薦，后端不會吊我們的，搞不好會干架，哈哈

六：總結

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。