用mock.js模拟前端开发调用后台数据

导语：
相信大家都遇到过一个问题，前端开发要用到api，但是后端的人员还没开发好，那可怎么办啊，前端没办法调试，别紧张，用mock解决这个问题。

一，mock的作用

当后端api接口还没开发好，前端又想马上调试，就可以使用 mock，你可以在开发环境代码内置 Mock，拦截请求，模拟真实 API 返回。

二，如何使用mock？

先安装一下

npm install mockjs

1，哪里需要写哪里法

var data = Mock.mock({
     
	"string|1-10": "#",
	"object": {
     
	   "313200": "上海市",
	   "444400": "广东省"
	 },
	 "name": "xiaomizhou"
})
//这样直接写在js代码中，就可以随机生产1-10个“#”的字符串。

优点和缺点

简单方便使用，哪里需要就写在哪里。

缺点就是跟业务代码混合在一起，日后后端api开发好了，再来改这个地方就很麻烦，所以不推荐在实际开发中使用这个方法。

2，用mock拦截请求

var data = Mock.mock("https://www.baidu.com", {
     
    "string|1-10": "#",//随机生成 1-10 个字符串"#"
	"object": {
     
	   "313200": "上海市",
	   "444400": "广东省"
	 },
	 "name": "xiaomizhou" 
})
var request = new XMLHttpRequest();
request.open("GET", "https://www.xiaomizhou.com", true);
request.send();
request.onreadystatechange = function () {
     
    if (request.readyState === 4 && request.status === 200) {
     
        console.log(request.responseText)
    }
}
//这种的话，就会把我们的api请求给拦截，然后通过它自己有的功能，随机生产1-10个“#”返回。

优点和缺点

相对于上一种，也是属于哪里需要写在哪里，但是这个东西可以存放在一个文件中，利用开发模式或者生产模式来区别是调用那个文件，这样就完美解决了代码混合的问题了。

而且这个可以发出网络请求，虽然被拦截了。

3，Mock Server

这种就是自己搭建一个mock服务，临时性的充当一下后台服务，在这个服务中，我们无需数据库的连接，数据库的优化等等关于后台的操作，只需要用mock生成随机的数据返回就行了。

而且这个可以使用一些现成的平台来搭建，大大的方便了我们的开发过程。

这个网址可以免费搭建mock平台服务，而且有详细的教程，我这里就不多陈述了，网址的地址：https://help.eolinker.com/#/tutorial/?groupID=c-441&productID=13

补充：

微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！