Vue项目中使用mockjs模拟数据,mock-server模拟服务器

915 阅读1分钟

最近在分析vue-admin项目中的mock技术,总结下大佬团队是如何使用mock技术的:

首先在main.js文件中我们发现这段话,意思大概就是: 如果不想使用mock-server技术模拟数据,而是想使用MockJs模拟数据的话,你可以执行mockXHR(); 也就是,项目中使用MockJs模拟生产环境,但是要记得,在项目正式上线的时候,要注释掉改代码。

image.png

然后再来看项目是如何使用 MockServer 允许通过 HTTP 或 HTTPS 模拟服务器或服务。

大家都知道,在项目上线的时候,通过nginx做代理访问服务器,一般都是在 vue.config.j中进行配置的,so, 在项目中找到该配置,如图所示:

image.png

从图中可以看出,devServe有两个代理,其中一个是proxy代理,而在proxy代理之前,使用before对请求进行拦截,走了本地的mock-server.js,该文件封装了MockServer,创建了一个虚拟的本地服务器,对请求进行拦截和响应。这种做法通常是在后端服务器还没有搭建好,依然不影响前端的工作进程。等和后端进行接口对接的时候,只需要把改行代码注释掉即可。

image.png

最后,附上官网的一段话,有利于更好的理解:

image.png