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

最新推荐文章于 2024-05-17 09:06:10 发布

坏丶毛病

最新推荐文章于 2024-05-17 09:06:10 发布

阅读量684

点赞数 1

分类专栏： HTML-成长之路 JavaScript-成长之路 JQuery-成长之路文章标签： mock.js 前后端分离模拟数据拦截请求坏丶毛病

一只努力学习进步的web前端小菜鸟。转载请声明来源。

本文链接：https://blog.csdn.net/qq_43363884/article/details/88786294

版权

JavaScript-成长之路同时被 3 个专栏收录

20 篇文章 4 订阅

订阅专栏

HTML-成长之路

8 篇文章 0 订阅

订阅专栏

JQuery-成长之路

2 篇文章 0 订阅

订阅专栏

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

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

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

而当统一好接口数据和格式后，前端就可以通过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官网

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

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

个人微信公众号：

坏丶毛病

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
mock.js模拟数据实现前后端分离

众所周知，在日常开发中，前后端分离是最常见的开发模式，前端完成页面渲染，后端提供接口数据。但是起初项目刚开始，后端还没有写好接口数据，前端要构建页面，还得考虑结构以及后期真实数据的问题。所以前后端统一接口数据和格式是必要的。而当统一好接口数据和格式后，前端就可以通过mock.js来模拟对应格式的数据，以此来完成页面的搭建，当后端完成接口和数据后，因为前期数据格式都是规范好的，所以只要去...
复制链接

扫一扫