이번에는 mockjs를 사용하여 백엔드 데이터를 시뮬레이션하는 방법과 mockjs를 사용하여 백엔드 데이터를 시뮬레이션할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.
mockjs를 사용하여 데이터를 미리 시뮬레이션할 수 있습니다. 전제는 데이터 인터페이스와 어떤 종류의 데이터가 백엔드와 합의되었는지입니다. mock을 사용하여 원하는 데이터를 생성할 수 있으므로 개발 중에 프런트엔드와 백엔드 분리가 가능합니다.
주요 기능은 다음과 같습니다:
데이터 템플릿을 기반으로 시뮬레이션 데이터를 생성합니다.
HTML 템플릿을 기반으로 시뮬레이션 데이터를 생성합니다.
문법 사양
Mock.js의 구문 사양은 두 부분으로 구성됩니다.
1. 데이터 템플릿 정의(DTD)
2. 데이터 자리 표시자 정의(DPD)
데이터 템플릿 정의 사양 DTD
데이터 템플릿의 각 속성은 속성 이름, 생성 규칙, 속성 값의 세 부분으로 구성됩니다.
// 属性名 name // 生成规则 rule // 属性值 value 'name|rule': value
참고:
속성 이름과 생성 규칙은 수직 막대(|)로 구분됩니다.
'이름|최소-최대': 값
'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(매개변수 [, 매개변수])
참고:
@를 사용하여 다음 문자열을 자리 표시자로 식별합니다.
Mock.Random.extend() - 사용자 정의 자리 표시자를 확장합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
