本篇文章为大家展示了mock.js模拟数据实现前后端分离，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
普通不涉及框架的项目中安装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模拟数据实现前后端分离，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
