VueCli3.0中集成MockApi

VueCli3.0中集成MockApi

一：使用場景

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

沒辦法啊，資本主義的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的幾種方式以及對應的優缺點

Mock的方式	優缺點
本地Mock接口	優勢：能夠更加細粒度的控制mock的內容。缺點：須要增長本地的代碼量，以及須要配置webapck
Mock.js實現ajax攔截	優勢：數據經過mock.js會更豐富。缺點：增長一些本地配置，攔截ajax
後端Controller的靜態JSON	優勢：接口聯調不須要修改任何東西。缺點：修改Mock內容溝通成本高，跟後端扯皮
利用FastMock去模擬Mock	優勢：可控內容以及實現動態Restful api。缺點：若是項目包裝axios等請求庫以後須要針對接口轉發作不一樣處理

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模塊）

   1. 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": {}
        })  
      });

   2. 針對不一樣的請求生成動態的內容，咱們能夠經過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/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  
          }
        })
      });

   3. 如今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-info
   module.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插件自動化完成這些操做，敬請期待。歡迎評論交流。