简介前端开发往往需要等待后端接口，严重影响开发效率。我们一般使用mock方法来避免这个问题。我参考了大量的文章，结合自己的经验，给出我对mock的一些理解。1、mock的原理是什么？我认为mock主要是一种在后台接口进度滞后的情况下，通过正常请求获取与后台约定数据结构相同的模拟数据结构的技术，从而避免后台进度不一致的情况。端接口。滞后影响我们的正常发展。Mock可能涉及四种技术，分别是服务端技术、随机生成特定格式的数据、请求转发、请求拦截。2.常用方法分类2.1刚性型将仿真数据直接写在代码中。优点：简单暴力缺点：改变了代码原有的逻辑，耦合度高。当后台接口完成后，需要重新改代码。2.2拦截mockjsmockjs通过重写ajax函数拦截请求，也可以伪造各种随机数据。通过mockjs，我们可以轻松实现一个简单的mock效果。优点：简单方便缺点：无法在chrome中读取requests（检查传递的参数是否正确），不支持fetch（需要额外调用插件）Mock.mock('/api/news',{name:'Jack','age|10-20':10});Charles、Fiddler、postman使用Charles、Fiddler等代理工具拦截请求优点：有真实的请求缺点：优点是配置复杂2.3MockServernode/express/json-server+mockjs/fakejs前者的mock数据用于服务，后者用于生成模拟数据。json-server是对express的封装，用于快速搭建服务器，无需编写后台代码。这是需要注意的重要一点。对于一般的项目，我们可以使用json-server来启动一个服务，但是如果是在webpack像vue-cli生成的项目中，webpack其实已经为我们创建了一个服务，我们可以在webpack的devServer.before中进行配置.当然，如果你不想麻烦，你可以使用proxy从json-server代理到你自己的服务....devServer:{//proxy:{//启动一个额外的服务，然后转发//'/api':{//target:'json-server服务的ip:端口号',//pathRewrite:{'/api':''}//}//}before:function(app){//直接使用devserver服务app.get('/api/news',function(req,res){res.json({msg:'dev-before'})})}}优点：真实、低耦合、可扩展Cons:backendinvolvementLess2.4Mock平台RAP/Easy-Mock对于小型开发团队来说，MockServer或者mockjs完全够用，因为这时候前后端通信的成本比较小。但是如果是大型的开发团队，这个时候写文档和通知大家接口变化的成本会比较高。这也是RAP、Easy-Mock等mock平台的由来。优点：接口代理，协同编辑，mock数据，智能提醒，文档自动生成缺点：需要说服后台使用两个接口www.test/api/news/,www.test/api/price/3.1后台未激活。我们在devServer中虚拟了两个接口//configbeforeindevserver拦截接口devServer:{before:function(app){app.get('www.test/api1/news',function(req,res){//只拦截api1res.json({mockjs生成的模拟数据})})app.get('www.test/api1/price',function(req,res){//只截取api1res.json({模拟数据生成的mockjs})})}}//在/src/api/index.js里面constgetNews=axios.get(www.test/api1/news)constgetPrice=axios.get(www.test/api1/price)export{getNews,getPrice}//因为/api1会被before拦截获取mock数据，没问题3.2后台已经开发了一些接口，比如www.test/api/news/developed//修改/api1in/src/api/index.jsto/apiconstgetNews=axios.get(www.test/api/news)//此时不会拦截请求，使用真实接口，未开发接口请求还是会使用模拟数据接口3.3后端全部开发完成后，把/api1改成/api，同时注释掉devserver.before当然这个拦截功能也可以直接用mockjs来完成。步骤类似，但更简单。修改代码。如果能开发出一套插件，前端只需要一开始写一次代码，后面ide会自动同步界面变化，然后自动修改代码，爽不爽！综上所述，今天的前端mocking介绍到此结束。具体代码实现可以自行google。由于作者刚入职，水平有限，如有不妥之处，欢迎大家评论指出。对于中小型项目，推荐使用mockjs或者devServer.before。如果项目比较大，多人协作，建议使用在线mock平台。
