在VueCli3.0中集成MockApi的方法示例

1.使用场景

哦，太烦人了。当这个需求结束后，下一个需求就会到来。程序员不安排吗？

没办法，资本家XX脸

来，我们匹配一下技术评论里的界面格式。你先开发，我做完了再跟进，然后我再协调

MMP，增加了我的工作量，每次都要把数据放在一个配置文件里，引入使用，然后对接的时候删除无用的代码，所以很生气

您自己的Mock接口，就像我们的后端一样，我们经常使用PostMan来模拟请求

嘲笑？我去看看

第二：莫克的概念

1.描述1:模拟

事实上，Mock接口模拟真实接口，在开发环境中提供虚假数据甚至真实数据。在开发过程中，经常会出现界面内容不能及时跟进的情况，导致开发过程中出现一些额外的工作量。下面的例子都集中在Vue上。沟通的JSON格式提前确定后，我们就可以提供很好的开发体验，不需要依赖后端的进度。

2.模拟可以解决问题

减少额外的工作。当没有Mock接口的时候，我们模拟数据的方式是非常烦人的。比如列表列表需要在数据中声明，内容需要调试，或者引入一个Mock文件。这导致联合调试中调用接口的部分代码编写失败。当联合调试成功时，需要删除很多无用的代码——通过mock，只需要在联合调试时将Mock接口的地址改为真实地址即可。

从“mock/list.js”导入{ mock list 2 }；导出默认{ data(){ return { mock list :[{ ' name ' : ' tx '，' age' : 12}]，mocklist2}}}如果用上述方式模拟数据，则缺少真实差距的状态，如删除接口，有成功和失败之分。这个模拟很恶心——通过Mock，你可以通过真实的查询或者其他操作直接达到同样的目的

3.3:Mock的几种方式及其对应的优缺点

模拟方法的优点和缺点本地模拟接口的优点：它可以以更精细的粒度控制模拟的内容。缺点：需要增加本地代码量，配置webapck Mock.js实现ajax拦截。优点：通过mock.js数据会更丰富缺点：增加一些本地配置，截取ajax后端Controller的静态JSON。优点：接口对齐不需要修改任何东西。缺点：修改Mock内容的通信成本高，使用FastMock模拟Mock的优点是内容可控，实现动态Restful api。缺点：如果项目在打包axios和其他请求库后需要对接口转发做不同的处理，4: Local Mock接口

本文在本地Mock界面进行操作，其他方法会简单介绍并给出相应的链接。如有必要，可自行咨询。

三：局部模拟外围知识

本地Mock的思想是使用Node express来完成Restful Api。结合webpack配置项devServer，使用Vue-cli3.0公开的配置，使用local express添加了mock接口

1.节点表达的相关知识点，如果你已经用节点表达编写了Restful Api，接下来应该知道如何处理Mock了。在这里，我将简要介绍我们需要使用的技术(快速路由和节点文件系统模块)

快递路线是相关的。有关详细信息，请参见文档。这里不区分请求方法，直接应用

const express=require(' express ')；const app=express()；//这样简单的路由就完成了，对/ajax-get-info的请求就可以得到对应的JSON数据app.use ('/Ajax-get-info '，(req，RES)={ RES . send({ ' success ' : true，' code' : 0 0，' data '。为了针对不同的请求生成动态内容，我们可以通过req.query和req.params等生成动态内容。在express中，我们传入的主体内容无法在req.body中获得，因此我们需要添加中间件body-parser。需要注意的是，这个中间件不能用于app全局路由，否则会影响代码和测试服务的接口。使用http-proxy-中间件转发接口，所以需要单独设置一个Mock路由，路由层使用中间件。代码如下

const body parser=require(' body-parser ')；const express=require(' express ')；const mockRouter=express。路由器()；//用于模拟服务器的express中间件bodyParser用于解析应用程序/jsonmockrouter . use(body parser . JSON())；//用于解析应用程序/x-www-form-urlencodemockRouter . use(BodyParser . urlencoded({ extended : true }))；//名为/mockapp.use的Api前缀('/mock '，mock router)；//现在可以使用MockRouterMockRouter . use('/Ajax-get-info '，(req，res)={ //使用req.body获取请求body info console . log(req . body)；res.send({ 'success': true，' code': 0，' data ' : {//return dynamic JSON name : req . body . name } })})；既然有了mock级的路由，我们就准备相应路由和响应的回调，添加一个mock文件夹，专门放一些mock接口文件，使用node的fs模块介绍所有需要Mock的接口

const path=require(' path ')；const MockDir=path . resolve(_ _ DirName，'./mock’)；fs . ReadDirsync(MokDir)。forEach(file={ const mock=require(path . resolve(MokDir，file))；//mockRouter是mockrouter.use (mock.api，mock . response)；});2.Vue-cli3.x的基础知识，与Vue-cli2.x的版本相比，封装了webpack的配置，并抛出了一些外部接口来修改webpack的配置。我们需要知道的是，对于开发模式express的使用(内部使用webpack-dev-serve)，Vue-cli3.0需要在适当的时候处理开发模式的express实例，以达到Mock的目的

模块。exports={ dev : { before :(app)={//app是底层的express实例，上述所有针对express实例的操作都可以改为app}} }3。至于mock文件，下面的js文件是我们需要挂载到express的mock接口上的信息。这里有一个例子，可以做其他的模仿。一个js文件代表一个模拟接口。

//注意前端调用的url是/mock/get-info module . exports={ API : '/get-info '，response3360 (req，RES)={//因为增加了body-parser中间件，所以可以解析传入的body，在这里可以用来动态生成JSON const。console . log(req . body)；RES . send({成功：标志，代码： 0，数据： []，消息： '信息获取成功'，}，)；},};四：结合以上整合处理，

五：以其他几种方式模拟界面

转到Mock.js，给出一个官方网站，会修改原来的XMLHttpRequest拦截ajax请求，并提供一个强大的fastMock根据模板生成数据，类似于本地mock，数据放在外网上，团队可以选择配合。具体使用请见链接后端Controller生成静态JSON，不推荐，后端不会挂我们，说不定会打架。哈哈6:总结。

前端工程的出现可以让前端做很多事情，技术的广度可以支持你做一些有趣的事情。首先，这个可以优化。例如，本地Mock可以使用mock.js纯粹地处理一些数据生成。注意模拟界面的网址和自己代理的界面。配合Vue-cli3.0，不仅封装了webpack的配置，还提供了自己的插件机制。接下来，编写一个简单的cli插件来自动化这些操作，所以请期待。欢迎评论交流。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。