mock.js模拟数据实现前端分离

众所周知，在日常开发中，前端分离是最常见的开发模式，前端完成页面渲染，后端提供界面数据。

但是在项目初期，接口数据还没有写到后端，前端需要考虑后期的结构和真实数据。

因此，需要统一前端和后端之间的接口数据和格式。

当界面数据和格式统一后，前端可以通过mock.js模拟相应格式的数据，从而完成页面的构建。当后端完成接口和数据后，由于之前的数据格式都是标准化的，只需要去掉mock.js部分就可以了，不需要改变接口。

说了这么多，mock.js到底是什么？

根据官网的简单解释，就是截取ajax请求，模拟自定义格式的数据返回，实现前后分离。

说了这么多，我们来看看具体用法。

这次我们来看看如何在原生中使用它，下次再介绍它在vue中的使用。

bower建议在不涉及框架的普通项目中安装mock.js:

NPM安装bower-gbower安装模拟js-保存特定用途：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title mock js-demo 1/title/head body/body/html script src=' http 3360http://www . jq 22.com/jquery/jquery-1 . 10 . 2 . js '/script script srscript/bower _ components/mock js/dist/mock . js '/script script mock . ' http://API.com '，{ ' users | 5 ' :[{ ' name ' : ' @ cname '，//中文名称' age | 1-100' : 100，//随机整数'生日' : ' @ date '(yyyy-mm-DD ')，//日期' city ' 3360 ' @ city(true)'//中文Ajax ({url:' http://api.com '，datatype:' JSON'})。done(函数(数据、状态、xhr) {console.log (JSON。strictify (data，null，4))})//原生ajax模式函数Ajax (method，URL，params，isasync){//创建对象xhr=new XMLHttpRequest()；//设置请求参数xhr.open(方法、url、isAsync)；//回调函数xhr . onreadystatechange=function(){ if(xhr . readystate==4xhr . status==200){ console . log(xhr . responsetext)；} }//发送请求xhr . send()；} ajax('get '，' http://api.com '，''，true)；/script在这里，我介绍了通过bower下载的mock.js，然后给了mockjs一个请求地址(如果有可以给的真实地址，但是不能写假地址，只要和ajax请求地址一致)，然后在mock的第二个参数中定义了数据格式，是一个随机的五位数数组对象，包括姓名、年龄、生日和地址。

然后通过ajax正常请求地址，然后返回值会被mock.js截获，返回的是我们自定义格式的数据，而不是后端数据

这样，在项目开始时，当后端没有数据时，我们可以通过模拟数据来完成页面功能的开发。

当后端数据完成后，我们只需要删除mock.js部分(如果之前的接口地址为false，则更改接口地址)

这里建议将mock.js部分从公共文件中拉出来导入，这样后期可维护性强，只要不导入mock部分，就不需要来回删除代码。

返回数据效果：

具体的请求格式是官网明确写的，这里就不重复了。

附上官方网站地址：

Mock.js官方网站

好了，这次就到这里。让我们试试。

如有疑问，请指出并接受批评。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。