mockjs를 사용하여 백엔드 데이터를 모의하는 방법

이번에는 mockjs를 사용하여 백엔드 데이터를 시뮬레이션하는 방법과 mockjs를 사용하여 백엔드 데이터를 시뮬레이션할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

mockjs를 사용하여 데이터를 미리 시뮬레이션할 수 있습니다. 전제는 데이터 인터페이스와 어떤 종류의 데이터가 백엔드와 합의되었는지입니다. mock을 사용하여 원하는 데이터를 생성할 수 있으므로 개발 중에 프런트엔드와 백엔드 분리가 가능합니다.

주요 기능은 다음과 같습니다:

1. 데이터 템플릿을 기반으로 시뮬레이션 데이터를 생성합니다.

2. HTML 템플릿을 기반으로 시뮬레이션 데이터를 생성합니다.

3. Ajax 요청을 가로채고 시뮬레이션합니다.

문법 사양

Mock.js의 구문 사양은 두 부분으로 구성됩니다.

1. 데이터 템플릿 정의(DTD)
2. 데이터 자리 표시자 정의(DPD)

데이터 템플릿 정의 사양 DTD

데이터 템플릿의 각 속성은 속성 이름, 생성 규칙, 속성 값의 세 부분으로 구성됩니다.

// 属性名  name
// 生成规则 rule
// 属性值  value
'name|rule': value

참고:

1. 속성 이름과 생성 규칙은 수직 막대(|)로 구분됩니다.

2. 생성 규칙은 선택 사항입니다.

3. 세대 규칙에는 7가지 형식이 있습니다.

1. '이름|최소-최대': 값

2. '이름|수': 값

3. '이름|min-max.dmin-dmax': 값

4. '이름|min-max.dcount': value

5. 'name|count.dmin-dmax': value

6. 'name|count.dcount': value

7. 'name|+step': value

   생성 규칙의 의미 의존해야 합니다. 속성 값의 유형을 결정할 수 있습니다.

   속성 값에는 @ 자리 표시자가 포함될 수 있습니다.
   속성 값은 초기 값과 최종 값의 유형도 지정합니다.

예 1:

Mock.mock({
  'number1|1-100.1-10': 1,
  'number2|123.1-10': 1,
  'number3|123.3': 1,
  'number4|123.10': 1.123
})
// =>
{
  "number1": 12.92,
  "number2": 123.51,
  "number3": 123.777,
  "number4": 123.1231091814
}

예시 2: 정규식regexp와 일치할 수 있는 string을 역으로 생성합니다. 사용자 지정 형식의 문자열을 생성하려면:

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\w\W\s\S\d\D/,
  'regexp3': /\d{5,10}/
})
// =>
{
  "regexp1": "pJ7",
  "regexp2": "F)\fp1G",
  "regexp3": "561659409"
}

예 3:

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
 "string|3": "★"
})

결과:

//별 개수는 3개입니다
{
"string": "★★★"
}

예 4:

// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
 "num|1-100": 100
})

결과:

{
"번호": 8
}

데이터 자리 표시자 정의 사양 DPD

자리 표시자는 속성 값 문자열의 위치만 차지하며 최종 속성 값에는 나타나지 않습니다.

자리 표시자의 형식은 다음과 같습니다:

@placeholder
@placeholder(매개변수 [, 매개변수])

참고:

1. @를 사용하여 다음 문자열을 자리 표시자로 식별합니다.

2. 자리 표시자는 Mock.Random의 메서드를 나타냅니다.

3. Mock.Random.extend() - 사용자 정의 자리 표시자를 확장합니다.

4. 자리 표시자는 데이터 템플릿의 속성을 참조할 수도 있습니다.

5. 자리 표시자는 데이터 템플릿의 속성에 우선순위를 부여합니다.

6. 자리 표시자는 상대 경로와 절대 경로를 지원합니다.

Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last'
  }
})
// =>
{
  "name": {
    "first": "Charles",
    "middle": "Brenda",
    "last": "Lopez",
    "full": "Charles Brenda Lopez"
  }
}

jQuery ajax를 통해 가짜 데이터를 요청하는 예

1. 먼저 mockjs와 jquery를 소개합니다(여기서는 jq-encapsulated ajax를 사용하여 요청을 보냅니다)

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

2. 모의를 사용하여 데이터 템플릿 생성

//这里的第一个参数http://api.cn 就是下面ajax请求的url，mock对该url进行拦截'
//这里的第二个参数就是template数据模板，mock会返回模板生成的数据
   Mock.mock('http://api.cn', {
    'name': '@name',
    'age|1-100': 100,
    'city': '@city'
  });

3.ajax는 요청과 결과를 보냅니다

$.ajax({
  url: 'http://api.cn',
  dataType: 'json'
}).done(function(data, status, xhr) {
  console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"辽阳市"}
});

vuecli에서 mockjs 사용하기

먼저 설치하세요

npm install mockjs

스크립트에서 새로운 mockdata.js를 만들었습니다

안에 들어있는 내용은 다음과 같습니다:

import Mock from 'mockjs';
const data = Mock.mock({
 // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
 'foods|10-50': [{
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-20.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-50": 1
 }],
 "sales|10-50": [{
  // 属性 id 是一个自增数，起始值为 1，每次增 1
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-100.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-100": 1
 }]
});
export default {
 data
}

다음으로 사용해야 할 모의 데이터의 vue 컴포넌트 페이지에 이렇게

import mockdata from "@/scripts/mockdata.js";

라고 적습니다. 데이터를 인용하려면 지금 메서드에서 모의 ​​데이터를 직접 인용하면 됩니다. 예를 들면 다음과 같습니다.

new Promise((resolve, reject) => {
  that.foods =mockdata.data.foods; //直接点出你生成的假数据对象即可
  that.foodsListLen = that.foods.length;
 }).catch(err=>{
   console.log(err)
 })

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 mockjs를 사용하여 백엔드 데이터를 모의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!