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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
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
php不用正则采集速度探究总结
2008/03/24 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
原生js实现放大镜
2017/02/20 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python保存网页图片到本地的方法
2018/07/24 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python中几种自动微分库解析
2019/08/29 Python
python实现猜拳游戏
2020/03/04 Python
在python中使用nohup命令说明
2020/04/16 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
学年自我鉴定范文
2013/10/01 职场文书
管理科学大学生求职信
2013/11/13 职场文书
岗位职责范本
2013/11/23 职场文书
求职简历推荐信范文
2013/12/02 职场文书
学生手册家长评语
2014/02/10 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
教你如何用cmd快速登录服务器
2022/06/10 Servers