MockApi怎么在VueCli3.0中使用

tangjin

作者

这篇文章将为大家详细讲解有关MockApi怎么在VueCli3.0中使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

Mock的概念

1：Mock的描述

Mock接口其实就是模拟真实接口提供一个在开发环境的假数据，甚至是真实数据，在开发时，经常出现接口内容不能够及时的跟进，导致开发过程中添加一些额外的工作量。接下来的例子全部围绕着Vue为主体介绍前后端提前确定好通信的JSON格式之后，我们在不依赖后端进度的同时，能提供一套好的开发体验。

2：Mock能解决的问题

减少额外工作，在没有Mock接口的时候我们模拟数据的方式很烦躁，比如list列表，需要在data中声明list，去调试内容，或者引入一个mock文件，这样做导致在联调调用接口的部分代码没有写，联调成功的时候要删除很多无用代码 ---> 通过Mock只需在联调的时候把Mock接口的地址换成真实地址即可

import{mockList2}from'mock/list.js';

exportdefault{
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

constexpress=require('express');
constapp=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路由，针对路由级别的使用中间件，代码如下

constbodyParser=require('body-parser');
constexpress=require('express');

constmockRouter=express.Router();
//expressmiddlewarebodyParserformockserver
//forparsingapplication/json
mockRouter.use(bodyParser.json());
//forparsingapplication/x-www-form-urlencoded
mockRouter.use(bodyParser.urlencoded({extended:true}));
//Apiprefixnamed/mock
app.use('/mock',mockRouter);

//nowyoucansetmockapiusemockRouter
mockRouter.use('/ajax-get-info',(req,res)=>{
//usereq.bodytogetrequestbodyinfo
console.log(req.body);

res.send({
"success":true,
"code":0,
"data":{
//returndynamicJSON
name:req.body.name
}
})
});

现在Mock级别的路由已经有了，接下来我们就要准备对应的路由和响应的callback了，添加一个mock文件夹，专门放置一些mock接口的文件，利用node的fs模块引入所有需要mock的接口即可

constpath=require('path');
constmockDir=path.resolve(__dirname,'../mock');

fs.readdirSync(mockDir).forEach(file=>{
constmock=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
constflag=req.body.flag;

console.log(req.body);

res.send(
{
success:flag,
code:0,
data:[],
message:'获取信息成功',
},
);
},
};

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