フロントエンド開発をバックエンドから独立させるためにmock.jsを使用する

Mock.jsで実装された機能。

データテンプレートに基づいてデータを生成します。

HTMLテンプレートに基づいてデータを生成します。

Ajax リクエストをインターセプトしてシミュレートします。

この記事では、mock.js を使用して Ajax リクエストをシミュレートおよびインターセプトする方法のみを説明します。

まず、ページ内で引用します:

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

DIV の定義:

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

JS コードは次のとおりです:

<script type="text/javascript">

    //调用mock方法模拟数据
    Mock.mock(
        &#39;http://mockjs&#39;, {
            "userName" : &#39;@name&#39;,     //模拟名称
            "age|1-100":100,          //模拟年龄(1-100)
            "color"    : "@color",    //模拟色值
            "date"     : "@date(&#39;yyyy-MM-dd&#39;)",  //模拟时间
            "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>

実行中のレンダリングは次のとおりです:

上記のレンダリングから、次のことがわかります。データは毎回異なります。

さらに Mock コマンドを知りたい場合は、Mock.js 公式 Web サイトをチェックしてください: http://mockjs.com/

上記は単なる紹介です。

システム管理と使用をより便利にするために、誰もが Ali RAP について学ぶことができます。

RAP は、インターフェイス構造を分析し、シミュレーション データを動的に生成し、実際のインターフェイスの正確性を検証し、インターフェイス定義に関する一連の自動ツールを通じてコラボレーションの効率を向上させる、ビジュアル インターフェイス管理ツールです。私たちのスローガン: より効率的になり、夕食のために家に帰りましょう!