使用 mock.js 让前端开发与后端独立

Posted 贝尔塔猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 mock.js 让前端开发与后端独立相关的知识,希望对你有一定的参考价值。

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>

<div>
    <h1 id="mockjs">mockjs</h1>
</div>

<script type="text/javascript">

    //调用mock方法模拟数据
    Mock.mock(
        http://mockjs, {
            "userName" : @name,     //模拟名称
            "age|1-100":100,          //模拟年龄(1-100)
            "color"    : "@color",    //模拟色值
            "date"     : "@date(‘yyyy-MM-dd‘)",  //模拟时间
            "url"      : "@url()",     //模拟url
            "content"  : "@cparagraph()" //模拟文本
        }
    );

    //ajax请求
    $("#mockjs").click(function(){
        $.ajax({
            url        : "http://mockjs",    //请求的url地址
            dataType   : "json",   //返回格式为json
            async      : true, //请求是否异步,默认为异步,这也是ajax重要特性
            data       : {},    //参数值
            type       : "GET",   //请求方式
            beforeSend : function() {
                //请求前的处理
            },
            success: function(req) {
                //请求成功时处理
                console.log(req);
            },
            complete: function() {
                //请求完成的处理
            },
            error: function() {
                //请求出错处理
            }
        });
    });
</script>
</body>
</html>

 

以上是关于使用 mock.js 让前端开发与后端独立的主要内容,如果未能解决你的问题,请参考以下文章

mock.js-无需等待,随机产生数据,让前端独立于后端进行开发

数据Mock与后端联调

mock.js模拟数据

Mock.js简易教程,脱离后端独立开发,实现增删改查功能

Mock.js简易教程,脱离后端独立开发,实现增删改查功能

Mock.js简易教程,脱离后端独立开发,实现增删改查功能