VueCli3.0中集成的MockApi1：使用场景哎呀，好烦啊，这个需求结束了下一个需求来了，程序员不会安排吗？没办法，资本主义的XX脸，加油，技术审稿人和我匹配接口格式，你先开发，我这边做完了再跟进，然后共同调试MMP，这样会增加我的工作量。啊，每次都要先把数据放到一个配置文件里，导入使用，然后对接的时候删掉没用的代码。气死你mock接口了，就像我们后台经常用PostMan模拟请求一样。嘲笑？？让我检查一下2：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，可以直接通过真实的查询或者其他操作达到同样的目的3：Mock几种方法的优缺点和对应的Mock方法的优缺点。本地Mock接口的优缺点：可以更精细地控制mock的内容。缺点：需要增加本地代码量，需要配置webapckMock.js实现ajax拦截优点：通过mock.js数据会更丰富。缺点：增加一些本地配置，拦截ajax后端Controller的静态JSON优点：接口联调不需要修改任何东西。缺点：修改Mock内容通信成本高，与后台争论使用FastMock模拟Mock优点：内容可控，实现动态Restfulapi。缺点：如果项目封装了axios等请求库，需要对接口转发做不同的处理4：本地Mock接口本文操作的是本地Mock接口。其他方法会简单介绍，并给出相应链接。如有需要，可自行检查。三：localmock的周边知识localmock的思路是用Node+express来完成RestfulApi。结合webpack配置项devServer和Vue-cli3.0的暴露配置，使用本地express完成mock接口，添加Node+Express相关知识点，用node+express写过RestfulApi的应该知道怎么处理mocknext，这里我简单介绍下我们需要用到的技术（Express路由和nodefs模块）Express路由相关，详见文档，这里不区分请求方式，直接app.useconstexpress=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中是没有的。我们需要添加中间件主体解析器。需要注意的是这个中间件不能在App全局路由中使用，否则会影响代码到测试服务器的接口，使用http-proxy-middleware转发的接口，所以我们需要单独设置一个Mock路由，并为路由层使用中间件，代码如下constbodyParser=require('body-parser');constexpress=require('快递');constmockRouter=express.Router();//expressmiddlewarebodyParserformockserver//用于解析应用程序/jsonmockRouter.use(bodyParser.json());//用于解析应用程序/x-www-form-urlencodedmockRouter.use(bodyParser.urlencoded({扩展d:true}));//Apiprefixnamed/mockapp.use('/mock',mockRouter);//现在你可以设置mockapiusemockRoutermockRouter.use('/ajax-get-info',(req,res)=>{//使用req.body获取请求体信息console.log(req.body);res.send({"success":true,"code":0,"data":{//return动态JSON名称：req.body.name}})});有了Mock级别的路由之后，我们需要准备相应的路由和响应回调，添加一个mock文件夹，专门放置一些mock接口文件，使用node的fs模块导入所有需要mocks的接口constpath=require('路径');constmockDir=path.resolve(__dirname,'../mock');fs.readdirSync(mockDir)。forEach(file=>{constmock=require(path.resolve(mockDir,file));//mockRouter是上面的Mock路由mockRouter.use(mock.api,mock.response);});Vue-cli3。x的基础知识，相对于Vue-cli2.x的版本，封装了webpack的配置，抛出一些外部接口修改webpack的配置。我们需要知道的是express对于开发模式的使用（内部使用webpack-dev-serve），Vue-cli3.0需要的是在合适的时候处理开发模式的express实例，达到目的ofMockmodule.exports={dev:{before:(app)=>{//app是底层的express实例，上面为expressexample的操作，都可以换成app}}}至于mock文件下面的js文件，就是我们需要挂载到express的mock接口的信息，下面给出一个例子，其他的仿也可以制成。一个js文件代表一个mock接口//注意因为是针对子路由层面的，所以前端调用的url是/mock/get-infomodule.exports={api:'/get-info',response:(req,res)=>{//由于添加了body-parser中间件，可以对传入的body进行解析，可用于动态生成JSONconstflag=req.body.flag;console.log(req.body);res.send({success:flag,code:0,data:[],message:'获取信息成功',},);},};四：结合以上几点进行集成处理五：Mock接口mock.js其他几种方式，给出官网，会修改原来的XMLHttpRequest拦截ajax请求，同时提供强大的fastmock根据生成数据tothetemplate，类似于本地Mock，数据放在外网，团队可以自行选择。具体用法见链接BackendControllerGenerationStaticJSON，不推荐，后端不会吊死我们，说不定会打架，哈哈六：总结前端工程的出现可以让前端做一个很多事情，技术的广度可以支持你做一些有趣的事情。首先这可以优化。比如本地的Mock可以使用mock.js来纯粹处理一些数据的生成。注意mock接口的url和自己代理的接口不冲突。使用Vue-cli3.0，不仅封装了webpack的配置，还提供了自己的一套插件机制。接下来写一个简单的cli插件来自动化这些操作，敬请期待。欢迎评论交流。
