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 공식 웹사이트를 확인하세요: http://mockjs.com/

위는 단지 소개에 불과합니다.

시스템 관리와 ​​이용을 보다 편리하게 하기 위해 알리랩(Ali RAP)에 대해 알아보세요.

RAP는 인터페이스 구조를 분석하고, 시뮬레이션 데이터를 동적으로 생성하며, 실제 인터페이스의 정확성을 확인하고, 인터페이스 정의에 관한 일련의 자동화된 도구를 통해 협업 효율성을 향상시키는 시각적 인터페이스 관리 도구입니다. 우리의 슬로건: 더 효율적으로 집에 가서 저녁을 먹으세요!