vue+vuecli+webpack 에서 mockjs 를 사용 하여 백 엔 드 데 이 터 를 모 의 하 는 예제

머리말
mockjs 를 사용 하면 사전에 데 이 터 를 모 의 할 수 있 습 니 다.전 제 는 백 엔 드 와 데이터 인터페이스,어떤 데 이 터 를 약 속 했 는 지 입 니 다.mock 을 사용 하면 원 하 는 데 이 터 를 생 성하 여 개발 시 전후 단 분 리 를 실현 할 수 있 습 니 다.
그 주요 기능 은:
4.567917.데이터 템 플 릿 을 바탕 으로 아 날로 그 데 이 터 를 생 성 합 니 다HTML 템 플 릿 을 기반 으로 아 날로 그 데 이 터 를 생 성 합 니 다

ajax 요청 을 차단 하고 모 의 합 니 다

문법 규범
Mock.js 의 문법 규범 은 두 부분 을 포함한다.
1.데이터 템 플 릿 정의 규범(데이터 템 플 릿 정의,DTD)
2.데이터 자리 표시 자 정의 규범(Data Place holder Definition,DPD)
데이터 템 플 릿 정의 규범 DTD
데이터 템 플 릿 의 모든 속성 은 3 부분 으로 구성 되 어 있 습 니 다.속성 명,생 성 규칙,속성 값:

//      name
//      rule
//      value
'name|rule': value

주의:
4.567917.속성 명 과 생 성 규칙 사이 에 세로 선|으로 구 분 됩 니 다4.567917.생 성 규칙 은 선택 할 수 있 습 니 다4.567917.생 성 규칙 은 7 가지 형식 이 있 습 니 다.

'name|min-max': value

'name|count': value

'name|min-max.dmin-dmax': value

'name|min-max.dcount': value

'name|count.dmin-dmax': value

'name|count.dcount': value

'name|+step': value

4.567917.생 성 규칙 의 의 미 는 속성 값 의 유형 에 의존 해 야 확정 할 수 있다

속성 값 에는@자리 차지 문자 가 포함 되 어 있 습 니 다

4.567917.속성 치 는 최종 값 의 초기 값 과 유형 도 지정 합 니 다예 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 의 역방향 에 따라 일치 하 는 문자열 을 생 성 합 니 다.사용자 정의 형식의 문자열 생 성:

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
})

결과:
{
  "number": 8
}
데이터 대체 문자 정의 규범 DPD
자리 표시 자 는 속성 값 문자열 에서 만 위 치 를 차지 할 뿐 최종 속성 값 에 나타 나 지 않 습 니 다.
자리 표시 자 형식:
@자리 차지 문자
@자리 차지 문자(인자[,인자])
주의:
4.567917.@으로 그 다음 문자열 을 표시 하 는 것 은 자리 표시 자 입 니 다

자리 차지 문 자 는 Mock.Random 의 방법 을 인용 합 니 다

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

자리 차지 문자 도 데이터 템 플 릿 의 속성 을 참조 할 수 있 습 니 다

자리 표시 자 는 데이터 템 플 릿 의 속성 을 우선 참조 합 니 다

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

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 를 도입 합 니 다.

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

2.mock 을 사용 하여 데이터 템 플 릿 생 성

//        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

내 프로젝트 src 의 구 조 는 다음 과 같다.

나 는 scripts 에 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
}

다음은 필요 한 mock 데이터 의 vue 구성 요소 페이지 에 이렇게 쓰 십시오.

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

데 이 터 를 참조 하 십시오.methods 에서 방금 mockdata 를 직접 참조 하면 됩 니 다.예 를 들 면:

new Promise((resolve, reject) => {
  that.foods =mockdata.data.foods; //               
  that.foodsListLen = that.foods.length;
 }).catch(err=>{
   console.log(err)
 })

레 퍼 런 스
홈 페이지 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.