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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
javascript编程起步(第三课)
Feb 27 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
js中的闭包实例展示
2018/11/01 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
BootStrap前端框架使用方法详解
2020/02/26 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python PO设计模式的具体使用
2019/08/16 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python和php哪个更适合写爬虫
2020/06/22 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
竞聘书模板
2014/03/31 职场文书
初中学生评语大全
2014/04/24 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
售房协议书范本2014
2014/10/23 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android