后台模拟前端php,完美起航-用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生成随机的数据返回就行了。

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

补充：

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