MockJS 무엇입니까
백엔드 개발 환경 전면의 분리 후, 프론트 엔드는 학생들이 개발을 계속하기 위해, 백엔드 인터페이스와 인터페이스 문서를 기다릴 필요가 학생들을 제공합니다. MockJS 학생들이 개별적으로 백엔드 학생들 프론트 엔드를 개발할 수 학생들 먼저 서비스 인터페이스 문서 및 이용 MockJS 아날로그 백엔드 인터페이스에 따른 선단부를 정렬 할 수있다. 그래서 MockJS 백엔드 인터페이스를 시뮬레이션하는 방법은? 학생들 후방 아날로그 인터페이스를 제공하기 위해, 특정 AJAX 요청을 차단하고, 난수의 주어진 데이터 타입을 생성하여 MockJS.
준비
상단에 쓰기 : 일부 작은 파트너가 프런트 엔드 환경을 배포 할 수 있으며, 여기에 내가에 코드를 업로드합니다 github에를 거의 필요 파트너 코드, 아래의 튜토리얼 빛나는 볼 수있는 코드를 다운로드 할 수 있습니다.
우선 MockJS 장착 아날로그 테스트 인터페이스를 송신 Axios의 AJAX 요청을 개시하고, 예컨대 천연 또는 AJAX 요청 $의 아약스 같은 다른 수단의 사용 AJAX 요청을 설치하지 않고 가능하면 다른 방법 Axios의 보냈이다.
npm install mockjs --save
npm install axios --save
复制代码사용 웹팩 포장 도구는 VUE 하나의 파일을 패키지. 먼저 CSS 로더, 스타일 로더, VUE, VUE 로더, VUE 템플릿 컴파일러를 설치합니다.
npm install css-loader style-loader --save-dev
npm install vue vue-loader vue-template-compiler --save-dev
复制代码다음 해당 로더에 첨가하여도 같은 프로파일 전체 구성을 webpack.config.js.
const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
entry: './webapp/App.js',
output: {
filename: 'App.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.css/,
use: ['style-loader', 'css-loader']
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
],
mode: "production"
}
复制代码Mock.js는 파일을 생성하고 (main.js)는 유입 파일 도입.
require('./mock.js');
复制代码MockJS는 mock.js 파일에 소개했다.
import Mock from 'mockjs';
复制代码나중에 우리는 mock.js 아날로그 인터페이스에 기록합니다.
다음 디렉토리 구조는 다음과 같습니다
시작
이 방법으로 큰 자유도는, 임의의 데이터 유형을 정의 사용되는 데이터 템플릿 사용자 정의 할 수 있습니다 반환 데이터 MockJS 아날로그 인터페이스를 정의하는 방법은 두 가지, 하나는 임의 MockJS 정의 도구를 사용하는 방법입니다있다 이 방법의 자유도를 제공 작은 만 임의의 데이터 타입 MockJS이다. 2. 도구 Rndom 아날로그 인터페이스는 반환 값을 정의 건너 뛸 수있는 작은 파트너를 서둘러.
1. 데이터 템플릿 정의 아날로그 인터페이스 반환 값
먼저 예를 들어 줄
//mock.js数据模板
{
'string|1-10':'string'
}
//接口返回的生成的数据===>
{
'string':'stringstringstring'
}
复制代码에 대한 데이터 형식 템플릿의 이름을 속성 | 생성 규칙 ':'속성 값은 '규칙이 생성 된 데이터의 속성 값을 결정 생성합니다. 즉, 규칙, 7 종류의 총을 생성합니다 :
- '이름 | 최소 - 최대'값
- '이름 | 카운트'값
- '이름 | 최소 max.dmin-DMAX'값
- '이름 | 최소 max.dcount'값
- '이름 | count.dmin-DMAX'값
- '이름 | count.dcount'값
- '이름 | + 단계'값
다른 데이터 유형의 경우, 규칙이 다른 생성하는 데 사용할 수, 속성 값의 데이터 유형은 널 (null), 정의되지 않은하지 않을 수 있습니다, 나는 각 데이터 유형에 다음과 같은 것이다 번호, 부울, 문자열, 객체, 배열, 기능이 될 수 있습니다 각각 일곱 생성 규칙, 규칙을 생성 할 수 있습니다 각 데이터 유형을 관찰하기 위해, 우리는 직접 테이블 1.8까지 끌어 학생의 결론에 직접보고 싶어요.
1.1'name | 최소 - 최대 '값
당신은 당신이 내 갈 수 시작하기 전에 GitHub의 임의의 데이터의 종류를 특정 규칙을 새로 고침하여 프로젝트로, 각 세대의보다 직관적 인 이해를 프로젝트 및 실행을 다운로드 할 수 있습니다.
mock.js 파일에 배열 DATA1은 임의로 생성 된 특성 값을 유지 정의한 객체 속성 값 생성 ROW1 점을 정의하고, 아날로그 인터페이스를 정의 요청 아날로그 인터페이스 Axios의 사용하기 위해 요청을 시작하기 위해 데이터 App.vue 테이블에 표시됩니다.
const data1=[];
//数据模板'name|min-max':value
let row1={
'string|1-9':'string',
'number|1-9':1,
'boolean|1-9':false,
'undefined|1-9':undefined,
'null|1-9':null,
'object|1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9':['array1','array2'],
'function|1-9':()=>'function'
};
data1.push(row1);
//定义模拟接口只能接收post请求，定义返回的数据为data1
Mock.mock('/Get/list1','post',data1);
复制代码임의로 생성 된 수치 1-9이다.
부울 타입 분 / (분 + 최대) 값 생성 확률 값, 최대 / (분 + 최대) 확률 생성! 밸류 값 I 10 % 확률 생성 거짓 90 % 확률 생성 참인.
직접 정의되지 않은 값이 무시되고, 정의되지 않은 속성 이름은 생성 된 객체에 존재하지 않습니다.
널 값을 생성하는 널 (null)이다.
객체, 제 임의로 생성 된 값이 최소 - 최대 값,이 값은 오브젝트의 속성의 수보다 큰 경우에, 새로운 객체를 형성하는 오브젝트의 속성 값을 선택 들어, 모든도있다 아웃 특성 아, 개체 개체 특성이 새로운 객체를 형성하기 위해 모두 밖으로 참조하십시오.
(6)의 어레이를 들어, 최소 - 최대 값의 랜덤 값을 생성하고 배열 요소 값은 배열에 다음 회 반복 결합되어,이도에서 알 수있는 아웃 랜덤 값은 6 개 새로운 배열을 포함 배열입니다.
함수의 직접 함수와 함수의 리턴 값을 실행한다.
1.2'name | 카운트 '값
//数据模板'name|count':value
let row2={
'string|3':'string',
'number|3':1,
'boolean|3':false,
'undefined|3':undefined,
'null|3':null,
'object|3':{object1:'object1',object2:'object2',object3:'object3'},
'array|3':['array1','array2'],
'function|3':()=>'function'
};
data1.push(row2);
复制代码| 문자열에 대한 카운트 규칙이 카운트 시간 새 문자열을 올 반복, 그림 반복 세 번 볼 수 있습니다.
카운트 값 데이터의 값에 대해 생성된다.
부울 타입 (COUNT-1)을 위해 / 값의 발생 확률의 값을 계산 1 / 카운트 확률 생성! 밸류 값이, 여기가 참이 발생 거짓, 33.3 % 확률의 생성 66.7 %의 확률이다.
직접 정의되지 않은 값이 무시되고, 정의되지 않은 속성 이름은 생성 된 객체에 존재하지 않습니다.
널 값을 생성하는 널 (null)이다.
개체에 대한 선택된 개체 특성이 카운트는 오브젝트의 속성의 수보다 큰 경우에, 새로운 객체를 형성하는 아웃 카운트, 모든 아웃 특성, 모든 물체의도 오 오브젝트의 속성에서 알 수 밖에 구성되어 새로운 객체.
배열의 경우, 배열 요소 배열로 반복 및 조합 회 카운트, 그것은 새로운 어레이를 생성하기 위해 세 개의 어레이를 통합 (3) 중 임의의 값도 알 수있다.
함수의 직접 함수와 함수의 리턴 값을 실행한다.
1.3'name | 분 - max.dmin-DMAX '값
//数据模板'name|min-max.dmin-dmax':value
let row3={
'string|1-9.1-9':'string',
'number|1-9.1-9':1, //只有数值起作用
'boolean|1-9.1-9':false,
'undefined|1-9.1-9':undefined,
'null|1-9.1-9':null,
'object|1-9.1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9.1-9':['array1','array2'],
'function|1-9.1-9':()=>'function'
};
data1.push(row3);
复制代码| 최소 - 최대 규칙 | 최소 max.dmin-DMAX 규칙은 문자열입니다.
값의 경우, 부동 소수를 생성하고, 부동 소수점 정수 부분은 최소 - 최대이고, 소수점 이하 자릿수 DMIN-DMAX이다. 도 3은 2 비트의 비트 정수 값 3.59 진수 발생.
최소 - 최대 규칙 | 부울 유형의이다
직접 정의되지 않은 값이 무시되고, 정의되지 않은 속성 이름은 생성 된 객체에 존재하지 않습니다.
널 값을 생성하는 널 (null)이다.
최소 - 최대 규칙 | 또한 객체의 경우
최소 - 최대 규칙 | 배열은 들어
함수의 직접 함수와 함수의 리턴 값을 실행한다.
1.4'name | 최소 max.dcount '값
//数据模板'name|min-max.dcount':value
let row4={
'string|1-9.3':'string',
'number|1-9.3':1, //只有数值起作用
'boolean|1-9.3':false,
'undefined|1-9.3':undefined,
'null|1-9.3':null,
'object|1-9.3':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9.3':['array1','array2'],
'function|1-9.3':()=>'function'
};
data1.push(row4);
复制代码| 최소 - 최대 규칙 | 최소 max.scount 규칙은 문자열입니다.
값의 경우, 부동 소수를 생성하고, 부동 소수점 정수 부분은 최소 - 최대이고, 소수점 이하의 자리수 scount이다. 도 6의 정수 비트는 6.725의 값 중 세 개의 소수점 생성.
최소 - 최대 규칙 | 부울 유형의이다
직접 정의되지 않은 값이 무시되고, 정의되지 않은 속성 이름은 생성 된 객체에 존재하지 않습니다.
널 값을 생성하는 널 (null)이다.
최소 - 최대 규칙 | 또한 객체의 경우
최소 - 최대 규칙 | 배열은 들어
함수의 직접 함수와 함수의 리턴 값을 실행한다.
1.5'name | count.dmin-DMAX '값
//数据模板'name|count.dmin-dmax':value
let row5={
'string|3.1-9':'string',
'number|3.1-9':1, //只有数值起作用
'boolean|3.1-9':false,
'undefined|3.1-9':undefined,
'null|3.1-9':null,
'object|3.1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|3.1-9':['array1','array2'],
'function|3.1-9':()=>'function'
};
data1.push(row5);
复制代码| 카운트 규칙 | Count.dmin-DMAX 규칙은 문자열입니다.
값의 경우, 부동 소수를 생성하고, 부동 소수점 값이 COUNT의 정수 부분, 소수점 이하 자리수 DMIN-DMAX 위치이다. 도 3은 여섯 3.035354 비트 정수 소수점 값을 생성.
부울 유형입니다 | 카운트 규칙
직접 정의되지 않은 값이 무시되고, 정의되지 않은 속성 이름은 생성 된 객체에 존재하지 않습니다.
널 값을 생성하는 널 (null)이다.
카운트 규칙 | 또한 객체의 경우
카운트 규칙 | 배열은 들어
함수의 직접 함수와 함수의 리턴 값을 실행한다.
1.6'name | count.dcount '값
//数据模板'name|count.dcount':value
let row6={
'string|3.3':'string',
'number|3.3':1, //只有数值起作用
'boolean|3.3':false,
'undefined|3.3':undefined,
'null|3.3':null,
'object|3.3':{object1:'object1',object2:'object2',object3:'object3'},
'array|3.3':['array1','array2'],
'function|3.3':()=>'function'
};
data1.push(row6);
复制代码| 카운트 규칙 | Count.dcount 규칙은 문자열입니다.
값의 경우, 부동 소수를 생성하고, 부동 소수점 값이 COUNT의 정수 부분, 소수점 자릿수 비트 DCOUNT. 도 3은 3 3.425의 비트 정수 소수점 값을 생성.
부울 유형입니다 | 카운트 규칙
직접 정의되지 않은 값이 무시되고, 정의되지 않은 속성 이름은 생성 된 객체에 존재하지 않습니다.
널 값을 생성하는 널 (null)이다.
카운트 규칙 | 또한 객체의 경우
카운트 규칙 | 배열은 들어
함수의 직접 함수와 함수의 리턴 값을 실행한다.
1.7'name | + 단계 '값
//数据模板'name|+step':value
let row7 = {
'string|+3': 'string',
'number|+3': 1, //只有数值起作用
'boolean|+3': false,
'undefined|+3': undefined,
'null|+3': null,
'object|+3': {
object1: 'object1',
object2: 'object2',
object3: 'object3'
},
'array|+3': ['array1', 'array2'],
'function|+3': () => 'function'
};
data1.push(row7);
复制代码| + 직접 문자열에 영향을 미치지 아니 문자열에 대한 단계 규칙.
값, 값을 증가 값이 소정 값의 초기 값이 단계는, 수치를 증가 아래의 버튼을 클릭 할 때마다 재 요청 4, 3이된다.
부울 유형의 부울 값을 반환 직접에 아무런 영향을 미치지 않았다.
직접 정의되지 않은 값이 무시되고, 정의되지 않은 속성 이름은 생성 된 객체에 존재하지 않습니다.
널 값을 생성하는 널 (null)이다.
오브젝트의 경우도 객체가 반환됩니다 직접에 아무런 영향을 미치지 않았다.
목록은 최대 어레이를 초과하는 버튼을 클릭하고, 0 + 3 = 3의 첨자 값으로 나타내는 첨자에게 STEP 증가하자, 다시 0들의 어레이 인덱스 값, 각 요청에 대한 첫 번째 요청을 리턴 버튼 클릭은 1의 배열 첨자 값으로 돌아가도록 인덱스 값 2를 뺀 배열 인덱스 값까지 배열의 길이는 3-2 = 1의 최대 인덱스 내에 첨자 1.
함수의 직접 함수와 함수의 리턴 값을 실행한다.
1.8 요약
| 끈 | 번호 | 부울 | 정의되지 않은 | 없는 | 목적 | 정렬 | 기능 | |
|---|---|---|---|---|---|---|---|---|
| | 최소 최대 | 문자열이 두 번 최소 - 최대 반복 한 후 스플 라이스는 새로운 캐릭터를 보여 | 최소 - 최대 값을 수신하도록 무작위 | 분 / (분 + 최대) 값 생성 확률 값, 최대 / (분 + 최대) 확률 생성! 값 값 | 현재 데이터 형식이 잘못되었습니다 | 는 null | 먼저 랜덤 값이 최소 - 최대 값을 생성하고, 값이 오브젝트의 속성의 수보다 큰 경우에, 새로운 객체를 형성하는 오브젝트의 속성 값을 선택하고 모든 아웃 특성 | 제 임의로 생성 된 최소 - 최대 값의 값하고 배열 요소 값은 배열에 회 반복 한 다음 결합 | 직접 실행 기능과 함수의 값을 반환 |
| | 수가 | 문자열 반복 카운트 번 새 문자열을 올 | 값과 동일한 계수를 생성 | (COUNT-1) / 값 생성 확률 Count 값을 1 / 카운트 확률 생성! 밸류 값 | 현재 데이터 형식이 잘못되었습니다 | 는 null | 개체의 속성을 선택이 카운트가 개체의 속성의 수보다 큰 경우, 새로운 객체를 형성하기 위해 밖으로 계산, 모든 아웃 속성 | 다음 카운트 회 반복하고 배열 요소를 배열로 결합 | 직접 실행 기능과 함수의 값을 반환 |
| | 내-max.dmin-DMAX | 규칙 | 최소 - 최대 동일 | 부동 소수점을 생성, 플로트의 정수 부분은 최소 - 최대이며, 소수점 이하 자릿수의 수는 DMIN-DMAX한다 | 규칙 | 최소 - 최대 동일 | 현재 데이터 형식이 잘못되었습니다 | 는 null | 규칙 | 최소 - 최대 동일 | 규칙 | 최소 - 최대 동일 | 직접 실행 기능과 함수의 값을 반환 |
| | 분 - max.dcount | 규칙 | 최소 - 최대 동일 | 부동 소수점을 생성, 플로트의 정수 부분은 최소 - 최대의 소수점 이하 자릿수 DCOUNT입니다 | 규칙 | 최소 - 최대 동일 | 현재 데이터 형식이 잘못되었습니다 | 는 null | 규칙 | 최소 - 최대 동일 | 규칙 | 최소 - 최대 동일 | 직접 실행 기능과 함수의 값을 반환 |
| | count.dmin-DMAX | 그리고 | 동일한 규칙을 계산 | 부동 소수를 생성하는 부동 소수점 COUNT 값의 정수 부분, 소수점 이하 자리수 DMIN-DMAX 비트 | 그리고 | 동일한 규칙을 계산 | 현재 데이터 형식이 잘못되었습니다 | 는 null | 그리고 | 동일한 규칙을 계산 | 그리고 | 동일한 규칙을 계산 | 직접 실행 기능과 함수의 값을 반환 |
| | count.dcount | 그리고 | 동일한 규칙을 계산 | 부동 소수점 숫자, 숫자 COUNT는 부동 소수점의 정수 부분의 값을 생성, 소수점 이하 자릿수의 비트 수는 DCOUNT입니다 | 그리고 | 동일한 규칙을 계산 | 현재 데이터 형식이 잘못되었습니다 | 는 null | 그리고 | 동일한 규칙을 계산 | 그리고 | 동일한 규칙을 계산 | 직접 실행 기능과 함수의 값을 반환 |
| | + 단계 | 아무 효과는 값을 직접 반환 | 초기 값 설정 값은 각각의 수치 값은 한번 재 요청하는 단계를 값을 증가 | 특수 효과를, 값은 값을 반환 | 현재 데이터 형식이 잘못되었습니다 | 는 null | 특수 효과를, 값은 값을 반환 | 초기 값은 아래 첨자 값은 단계 값이 증가되며, 한번 인덱스 값, 각 요청의 소정 값 | 직접 실행 기능과 함수의 값을 반환 |
어디 | 분 - max.dmin-DMAX, | 분 - max.dcount, | count.dmin-DMAX, |이 네 가지 규칙이 주로 번호를 입력하는 데 사용됩니다 count.dcount.
2. 도구 Rndom 반환 값 클래스 정의 아날로그 인터페이스
MockJS은 우리에게 당신이 원하는 빠른 임의의 데이터를 수 있도록하는 메서드 세트를 제공합니다.
{
'Boolean': Random.boolean, // 随机生成布尔类型
'Natural': Random.natural(1, 100), // 随机生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符串,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 2), // 生成一个数组，数组元素从0开始到10结束，间隔为2
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式，默认yyyy-mm-dd
'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据，生成Random.size指定大小的，背景为'#02adea'的，内容为'Hello'的图片
'Color': Random.color(), // 生成一个颜色随机值
// 'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成url地址
'Address': Random.province() // 生成地址
}
复制代码동일한 요구는 데이터를 구성하는 아날로그 인터페이스 후에 설정한다.
Mock.mock('/Get/list2', 'post', data2) ;
复制代码아날로그 데이터를 획득하고 AJAX 통해 인터페이스에 액세스한다.
전체 코드 :
//mock.js
let data2 = [] // 用于接受生成数据的数组
let size = [
'300x250', '250x250', '240x400', '336x280',
'180x150', '720x300', '468x60', '234x60',
'88x31', '120x90', '120x60', '120x240',
'125x125', '728x90', '160x600', '120x600',
'300x600'
] // 定义随机值
for(let i = 0; i < 10; i ++) { //生成10个对象放到数组中
let template = {
'Boolean': Random.boolean, // 可以生成基本数据类型
'Natural': Random.natural(1, 100), // 生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符串,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 6), // 生成一个随机数组
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
'Color': Random.color(), // 生成一个颜色随机值
'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成web地址
'Address': Random.province() // 生成地址
}
data2.push(template)
}
Mock.mock('/Get/list2', 'post', data2) // 声明模拟接口
//App.vue
axios('/Get/list2').then(res => {
this.dataShow2 = res;
});
复制代码개요
MockJS使前后分离程度更高，同时，我认为最重要的是他使前端人员也开始思考业务。传统开发中，前端人员多是等待后端人员提供的接口及接口文档，不懂得主动梳理接口文档，使用MockJS后前端人员可以从项目整体的角度出发，能更好的参与到项目之中。
交流
如果这篇文章帮到你了，觉得不错的话来点个Star吧。 github.com/lizijie123
转载于:https://juejin.im/post/5cf726b5e51d454fbf5409bc