DDR爱好者之家

mock.js模拟数据实现前后端分离
站长资源 2024/11/25 佚名
33 1538
DDR爱好者之家 Design By 杰米

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

但是起初项目刚开始，后端还没有写好接口数据，前端要构建页面，还得考虑结构以及后期真实数据的问题。

所以前后端统一接口数据和格式是必要的。

而当统一好接口数据和格式后，前端就可以通过mock.js来模拟对应格式的数据，以此来完成页面的搭建，当后端完成接口和数据后，因为前期数据格式都是规范好的，所以只要去除掉mock.js那部分即可，而不需要再更改界面。

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

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

说的这么厉害，那么我们来看看具体用法。

这次先看看在原生中怎么使用，下次介绍在vue中的使用。

普通不涉及框架的项目中安装mock.js推荐使用bower安装：

npm install bower -g
bower install mockjs --save

具体使用：

<!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-demo1</title>
</head>
 
<body>
 
</body>
 
</html>
<script src="/UploadFiles/2021-04-02/jquery-1.10.2.js">


这里我引入了通过bower下载的mock.js，然后给mockjs给定一个请求地址（如果有可以给定真实地址，没有可以写个假地址，只要和ajax请求地址一致即可），然后在mock的第二个参数中定义了数据格式，是个随机五位的数组对象，包括姓名、年龄、生日、地址


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


这样在项目初期，后端没有数据的情况下，我们就可以通过模拟数据完成页面功能的开发。


当后端数据完成后，我们只要删除mock.js部分即可（如果前期接口地址是假的，改一下接口地址即可）


这里推荐把mock.js部分抽离到公共的文件中，引入即可，这样后期可维护性强，只要不引入mock部分即可，而不用来回删代码。


返回数据效果：


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


具体的请求格式官网写的很清楚，这里就不做赘述了。


附上官网的地址：


mock.js官网


好了，这次就介绍到这里，大家去试试吧。


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米