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插件自动化完成这些操做，敬请期待。欢迎评论交流。