> 웹 프론트엔드 > JS 튜토리얼 > mockjs의 일반적인 방법 공유

mockjs의 일반적인 방법 공유

小云云
풀어 주다: 2018-03-28 17:02:32
원래의
2929명이 탐색했습니다.

이 글은 주로 mockjs의 일반적인 방법을 공유하고 이를 텍스트와 코드로 설명하는 것이 도움이 되기를 바랍니다.

一.mock.mock()

데이터 템플릿을 기반으로 시뮬레이션 데이터를 생성합니다. 더 중요한 것은 Ajax 요청을 시작할 때 이 데이터를 수신할 수 있어야 한다는 것입니다. 이것이 Mock.mock()이 하는 일입니다!

Mock.mock( rurl?, rtype?, template|function( options ) )

(1) 매개변수 의미 및 기본값

매개변수 rurl: 선택사항. 가로채야 하는 URL(URL 문자열 또는 URL 일반일 수 있음)을 나타냅니다. 예를 들어 //domain/list.json/, '/domian/list.json'입니다.
매개변수 유형: 선택사항. 가로채야 하는 Ajax 요청 유형을 나타냅니다. 예를 들어 GET, POST, PUT, DELETE 등이 있습니다.
매개변수 템플릿: 선택사항. 개체 또는 문자열일 수 있는 데이터 템플릿을 나타냅니다. 예를 들면 { 'data|1-10':[{}] }, '@EMAIL'입니다.
매개변수 기능(옵션): 선택사항. 응답 데이터를 생성하는 데 사용되는 함수를 나타냅니다.
매개변수 옵션: 이 요청의 Ajax 옵션 세트를 가리킵니다.

(2).Method

2.Mock.mock(template) 데이터 템플릿을 기반으로 시뮬레이션 데이터를 생성합니다

3.Mock.mock(rurl, template)
데이터 템플릿을 기록합니다. rurl과 일치하는 Ajax 요청을 가로채면 데이터 템플릿 템플릿을 기반으로 시뮬레이션된 데이터가 생성되고 응답 데이터로 반환됩니다.

4.Mock.mock(rurl, function(options))
응답 데이터를 생성하는 데 사용된 함수를 기록합니다. rurl과 일치하는 Ajax 요청을 가로채면 function(options) 함수가 실행되고 실행 결과가 응답 데이터로 반환됩니다.

5.Mock.mock(rurl, rtype, template)
기록 데이터 템플릿입니다. rurl 및 rtype과 일치하는 Ajax 요청을 가로채면 데이터 템플릿 템플릿을 기반으로 시뮬레이션된 데이터가 생성되고 응답 데이터로 반환됩니다.

7.Mock.mock(rurl, rtype, function(options))
응답 데이터를 생성하는 데 사용된 함수를 기록합니다. rurl 및 rtype과 일치하는 Ajax 요청을 가로채면 function(options) 함수가 실행되고 실행 결과가 응답 데이터로 반환됩니다.

(3). Liezi

var data8 = Mock.mock(/\.json/,"get",{  
  "name":"@name",  
  "isTrue|1":true,  
  "color":"@color"  
})  
  
Mock.mock(/\.json/, 'post', function(options) {  
    return options.type  
})  
$.ajax({  
    url: 'hello.json',  
    type: 'get',  
    dataType: 'json'  
}).done(function (data, status, jqXHR) {  
    $(&#39;<pre class="brush:php;toolbar:false">&#39;).text(JSON.stringify(data, null, 4))  
        .appendTo(&#39;body&#39;)  
})  
  
$.ajax({  
    url: &#39;hello.json&#39;,  
    type: &#39;post&#39;,  
    dataType: &#39;json&#39;  
}).done(function (data, status, jqXHR) {  
    $(&#39;<pre class="brush:php;toolbar:false">&#39;).text(JSON.stringify(data, null, 4))  
        .appendTo(&#39;body&#39;)  
})
로그인 후 복사

공식 홈페이지 보기 Liezi

II.Mock.Random

Mock.Random은 다양한 랜덤 데이터

(1).기본 사용법

1 .Mock.Random.boolean()은 임의의 부울 값을 반환합니다.

2.Random.natural()은 임의의 자연수(0보다 크거나 같은 정수)를 반환합니다.

3.Random.integer()는 임의의 정수를 반환합니다.

4.Random.float()는 임의의 부동 소수점 숫자를 반환합니다.

5.Random.character()는 임의의 문자를 반환합니다.

6.Random.string()은 임의의 문자열을 반환합니다.

7.Random.range(start?, stop, step?)는 정수 배열을 반환합니다.

공식 홈페이지 보기

(2).Date + time

1.Date
Random.date() "2002-10-23"
Random.date('yyyy-MM-dd') // " 1975- 04-27"
Random.date('yy-MM-dd') // "00-01-08"

2. 시간:
Random.time() // "05:06:06"

3 .날짜 및 시간
Random.datetime('yyyy-MM-dd A HH:mm:ss')

4. 현재 날짜 및 시간 Ranndom.now()

(3). ( 4) 지리적 위치 데이터 시뮬레이션

(5) 색상 + 텍스트 + 성(이름)

공식 웹사이트를 확인하세요

3. Mock.valid ( 템플릿, 데이터 )

실제 데이터인지 확인하세요. 데이터가 데이터 템플릿 템플릿 일치와 일치합니다.


템플릿이 필요합니다. 개체 또는 문자열일 수 있는 데이터 템플릿을 나타냅니다. 예를 들면 { 'list|1-10':[{}] }, '@EMAIL'입니다.

데이터가 필요합니다. 실제 데이터를 나타냅니다.


예:

var template = {
    name: &#39;value1&#39;
}
var data = {
    name: &#39;value2&#39;
}
Mock.valid(template, data)
// =>
[
    {
        "path": [
            "data",
            "name"
        ],
        "type": "value",
        "actual": "value2",
        "expected": "value1",
        "action": "equal to",
        "message": "[VALUE] Expect ROOT.name&#39;value is equal to value1, but is value2"
    }
]
로그인 후 복사

4.Mock.toJSONSchema(템플릿)

Mock.js 스타일 데이터 템플릿 템플릿을 JSON 스키마로 변환합니다.

5.Mock.setup()

Mock.setup( settings ) Ajax 요청을 가로챌 때의 동작을 구성합니다. 지원되는 구성 항목은 다음과 같습니다: 시간 초과.

  1. 매개변수의 의미와 기본값
    설정이 필요합니다. 구성 항목의 컬렉션입니다.
    시간 제한은 선택 사항입니다.
    가로채는 Ajax 요청의 응답 시간을 밀리초 단위로 지정하세요. 값은 400과 같은 양의 정수일 수 있습니다. 이는 응답 내용이 400밀리초 후에 반환된다는 의미입니다. 또한 '200-600'과 같은 하이픈 '-' 스타일 문자열일 수도 있습니다. 시간은 200~600밀리초입니다. 기본값은 '10-100'입니다.

    Mock.setup({
    timeout: 400
    })
    Mock.setup({
    timeout: '200-600'
    })

    현재 Mock.setup(설정) 인터페이스는 Ajax 요청을 구성하는 데에만 사용됩니다. . 향후에는 Mock의 다른 동작을 구성하는 데 사용될 수 있습니다.

위 내용은 mockjs의 일반적인 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿