JavaScript

超轻量级php框架startmvc

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

更新时间:2020-09-05 21:24:01 作者:startmvc
众所周知,在日常开发中,前后端分离是最常见的开发模式,前端完成页面渲染,后端提供

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

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

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

而当统一好接口数据和格式后,前端就可以通过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="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/ajax.js"></script>
<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
<script>
 Mock.mock('http://api.com', {
 'users|5': [ {
 'name': '@cname', //中文名称
 'age|1-100': 100, //100以内随机整数
 'birthday': '@date("yyyy-MM-dd")', //日期
 'city': '@city(true)' //中国城市
 }]
 });
 // //JQuery方式
 $.ajax({
 url: 'http://api.com',
 dataType: 'json'
 }).done(function (data, status, xhr) {
 console.log(
 JSON.stringify(data, null, 4)
 )
 });
 //原生ajax方式
 function ajax(method, url, params, isAsync) {
 //创建对象
 xhr = new XMLHttpRequest();
 //设置请求参数
 xhr.open(method, url, isAsync);
 //回调函数
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.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部分即可(如果前期接口地址是假的,改一下接口地址即可)

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

返回数据效果:

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

附上官网的地址:

mock.js官网

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

mock.js 前后端分离