推荐设备MORE

图标设计网站

图标设计网站

疑难问题

一键免费生成小程序_VueCli3.0中集成MockApi的方法示

日期:2021-01-07
我要分享
VueCli3.0中集成MockApi的方法示例       这篇文章主要介绍了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的内容。缺点:需要增加本地的代码量,以及需要配置webapck
后端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();
// 这样一个简单的路由就完成了,请求到/的请求就能拿到对应的JSON数据
app.use('/', (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('/', (req, res) = {
 // use req.body to get 
 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为/
module.exports = {
 api: '/',
 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接口
去,给出官网,它会修改原生的XMLHttpRequest来拦截ajax请求,同时提供强大的根据模板生成数据 fastmock,类似本地Mock,数据放在了外网,团队配合可以选择,具体使用见链接 后端Controller生成静态JSON,不推荐,后端不会吊我们的,搞不好会干架,哈哈

六:总结

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

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