VueCli3.0中集成MockApi的方法示例


Posted in Javascript onJuly 05, 2019

一:使用场景

哎哟,好烦啊,这个需求还么结束就来下一个需求,程序员不要排期的吗?

没办法啊,资本主义的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模块)

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

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: '获取信息成功',
   },
  );
 },
};

四:结合上面的几点整合处理

VueCli3.0中集成MockApi的方法示例

五:其他几种方式的Mock接口

  1. mock.js去,给出官网,它会修改原生的XMLHttpRequest来拦截ajax请求,同时提供强大的根据模板生成数据
  2. fastmock,类似本地Mock,数据放在了外网,团队配合可以选择,具体使用见链接
  3. 后端Controller生成静态JSON,不推荐,后端不会吊我们的,搞不好会干架,哈哈

六:总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
JSONP之我见
Mar 24 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
Electron vue的使用教程图文详解
Jul 05 #Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 #Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 #Javascript
JS Math对象与Math方法实例小结
Jul 05 #Javascript
js字符串类型String常用操作实例总结
Jul 05 #Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 #Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 #Javascript
You might like
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
PHP 高手之路(一)
2006/10/09 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
洗车工岗位职责
2014/03/15 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
施工员岗位职责
2015/02/10 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
物业管理交接协议书
2016/03/24 职场文书
导游词之河北野三坡
2019/12/11 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python