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 相关文章推荐
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
vue实现前端列表多条件筛选
Oct 26 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
python批量下载图片的三种方法
2013/04/22 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python字符串替换实例分析
2015/05/11 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python目录和文件处理总结详解
2019/09/02 Python
python 发送json数据操作实例分析
2019/10/15 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
土木工程师岗位职责
2013/11/24 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
起诉书范文
2015/05/20 职场文书
放牛班的春天观后感
2015/06/01 职场文书
四年级数学教学反思
2016/02/16 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Node.js实现断点续传
2021/06/23 Javascript
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
Web应用开发TypeScript使用详解
2022/05/25 Javascript
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技