资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/VueCli3.0中集成MockApi

VueCli3.0中集成MockApi

刘玉平 / 3016人阅读

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。

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接口的添加

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/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  
    }
  })
});

现在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);
});

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即可  
    }  
  } 
}

至于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接口

mock.js去，给出官网，它会修改原生的XMLHttpRequest来拦截ajax请求，同时提供强大的根据模板生成数据

fastmock，类似本地Mock，数据放在了外网，团队配合可以选择，具体使用见链接

后端Controller生成静态JSON，不推荐，后端不会吊我们的，搞不好会干架，哈哈

六：总结

前端工程化的出现能够让前端做的事情很多很多，技术的广度能够支持你做一些有意思的事情。首先这个可以做一些优化，比如本地的Mock可以使用mock.js纯处理一些数据的生成工作。注意mock接口的url和自己proxy的接口不要冲突。使用Vue-cli3.0，它不仅是封装了webpack的配置，同时提供了自己一套插件机制，接下来写一个简单的cli插件自动化完成这些操作，
敬请期待。欢迎评论交流。

服务器托管 超融合服务器 MockApi python中集合 java中集合题 js中集合对象的属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109947.html

相关文章

  • 【Vue】VueCli3 + Vue + typescript 挖坑记

    摘要：挖坑记生成的项目组件，中间遇到了一些让我直接放弃结合的坑，还是等的发布吧，到那个时候肯定结合得会更好。想了解的话，请戳上的这个，下面给了一种临时性的解决方案真的挺丑的，真正的解决还是得等的正式发布。 Vue + typescript 挖坑记 VueCli3.0生成Vue+ts的项目组件，中间遇到了一些让我直接放弃结合ts的坑，还是等Vue3.0的发布吧，到那个时候肯定结合得会更好。 1...

    endiat 评论0 收藏0

  • vuecli3 vant rem 移动端框架方案

    摘要：描述基于适配方案封装，构建手机端模板脚手架帮你做好的配置有多环境开发封装适配方案生产环境优化首屏加速低版本浏览器兼容环境发布脚本可以上手直接写代码多环境开发之前写过一个多环境的方案，是基于的多环境配置方案传送门最近新的项目采用了开始了 描述 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架 帮你做好的配置...

    since1986 评论0 收藏0

  • MOCK API 的定义及实践（使用eolinker实现）

    摘要：即便是提供测试环境的外部系统，一般也仅在开发联调阶段配合提供联调测试对接服务，一旦联调测试结束，也不再继续提供测试服务。 MOCK API 的定义 根据百度百科的定义，mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。这个虚拟的对象就是mock对象，mock对象就是真实对象在调试期间的代替品。 在瀑布流开发模式中，如果前端开...

    gghyoo 评论0 收藏0

  • 使用gulp+bower构建Angular.js项目

    摘要：本文重点是详细介绍项目的构建。是优秀的自动化项目构建工具，我们将用它完成等文件的的测试检查合并压缩格式化浏览器自动刷新部署文件生成，并监听文件在改动后重复指定的这些步骤热重载。是项目依赖管理工具。环境需求运行在环境，首先安装。 本文重点是详细介绍Angular.js项目的构建。gulp是优秀的自动化项目构建工具，我们将用它完成 javascript/less/css/html/imag...

    roland_reed 评论0 收藏0

  • 使用Retrofit和Mockito进行可靠的Android API测试

    摘要：解决这些问题并且练习这些调用的一个绝妙方法是，使用一个很好的一个测试双库通用程序。当服务器做出响应时，会使用响应数据执行回调方法。目前为止，的威力真的很赞。 测试与API交互的HTTP调用是一件令人生厌的复杂事情。测试一个真实的Web服务器时，一大堆问题随之产生：脆性测试（brittle test，因为网络或API本身的问题而导致的测试失败）、速度减慢测试（slow test，每一次H...

    frank_fun 评论0 收藏0

发表评论

登陆后可评论

0条评论

刘玉平

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<