rap 2 사용 자세 - 전단, 백 엔 드, 테스트 필수 (다 gif 그림)

배경
rap 2 는 아 리 엄마 가 오픈 한 http 인터페이스 관리 도구 로 널리 사용 되 고 있다.물론 이 도 구 는 일부 bug 가 존재 하지만 시장 에서 주류 의 오픈 소스 http 인터페이스 관리 도구 에서 우수한 도구 라 고 할 수 있 습 니 다.그것 의 많은 특성 은 팀 관리, 인터페이스 창고, 플러그 인, mock 데이터, postman 내 보 내기 등 을 포함 하여 우리 로 하여 금 인터페이스 문 서 를 편리 하 게 관리 하고 전후 단 합작 의 효율 을 효과적으로 향상 시 킬 수 있 습 니 다.
개념 / 어휘

창고: 즉 인터페이스 문서 가 설 치 된 창고 로 여러 개의 인터페이스 문 서 를 포함 할 수 있 습 니 다

협동 창고: Mock 서비스 협동 창고, 현재 창고 에서 인터페이스 와 일치 하지 않 을 경우 협동 창고 에서 찾 습 니 다

팀: 팀 은 여러 개의 창 고 를 포함 할 수 있 고 사용 자 는 여러 팀 에 가입 할 수 있 습 니 다

플러그 인: Mock 데이터 생 성, 실제 I / O 차단 요청, Mock 데이터 교체 등 기능 을 수행 하 는 플러그 인

플랫폼 API: 개방 API 형식 으로 인터페이스 문서, Mock 데이터 등 내용 을 외부 호출

에 제공 합 니 다.

Mock 템 플 릿: Mock. js 규칙 템 플 릿 은 Mock 데 이 터 를 생 성 하 는 데 사 용 됩 니 다. 템 플 릿 에서 풍부 한 규칙 을 정의 하여 데이터 의 필요 에 따라 임 의 성

에 적응 할 수 있 습 니 다.

Mock 데이터: Mock 템 플 릿 을 통 해 생 성 된 최종 Mock 데이터

기능 소개
첫 페이지
위의 그림 에서 왼쪽 은 당신 이 속 한 창고 의 모든 수정 역사 입 니 다.등 솥 에 흔적 을 남기다.오른쪽 에는 당신 이 가지 고 있 는 창고 와 가입 한 창고 가 각각 열거 되 어 있 습 니 다.여기 서 파란색 글 자 를 누 르 면 해당 창고, 모듈, 인터페이스 로 이동 할 수 있 습 니 다.
창고.
이곳 에 서 는 각각 자신 이 속 한 창고 와 모든 창 고 를 살 펴 볼 수 있다.자신 이 가입 한 창고 에 비해 자신 이 가지 고 있 는 창고 에 대해 서 는 편집 기능 외 에 도 삭제 할 수 있다.
창고 편집
창 고 를 만들다
단체
팀 기능 을 통 해 구성원 관리 와 권한 통 제 를 편리 하 게 할 수 있다.
인터페이스
이곳 은 주로 외부 인터페이스 들이다.이 인 터 페 이 스 를 통 해 인터페이스 문서 데이터 와 전단 mock 데 이 터 를 내 보 낼 수 있 습 니 다.mock 방법 에 대해 서 는 잠시 후 사용 장면 에서 소개 합 니 다.
상태.
이 페이지 를 통 해 우 리 는 전체 시스템 의 사용 개관 을 볼 수 있다.
인터페이스 관리 (중점)
창고 에 들 어간 후에 우 리 는 다음 과 같은 화면 을 볼 수 있 습 니 다.
여기 서 주의해 야 할 것 은 우리 가 인터페이스의 기본 정 보 를 편집 하려 면 url, 유형, 상태 코드 등 왼쪽 연필 (편집 버튼) 을 클릭 하 는 것 이다.여기 서 url 은 반드시 상대 경 로 를 사용 해 야 합 니 다.인터페이스의 요청 과 응답 정 보 를 수정 하려 면 오른쪽 녹색 편집 단 추 를 누 르 십시오.미리 보 기 를 누 르 면 인터페이스의 요청 이나 응답 템 플 릿 과 데 이 터 를 보 여주 거나 숨 길 수 있 습 니 다.이메일 을 통 해 학생 들 의 자세 한 인 터 페 이 스 를 만 드 는 방법 을 보 여 드 리 겠 습 니 다.이 인 터 페 이 스 는 GET 방법 을 사용 합 니 다. url 은 / api / v1 / students? email = 이 고 응답 은 json 입 니 다.

{
	"name": "  ",
	"age": 12,
	"city": "  ",
	"province": "  ",
	"avatar": "http://dummyimage.com/200x100/4A7BF7&text=Hello123123",
	"intro": "           "
}

이 어 요청 과 응답 템 플 릿 을 수정 합 니 다. 랩 2 는 새로 만 들 거나 가 져 오 는 두 가지 방식 을 지원 합 니 다. 먼저 새 요청 인 자 를 살 펴 보 겠 습 니 다.
여기 서 주의해 야 할 것 은 GET 방법 에 대해 기본적으로 Query Params 를 사용 하 는 것 입 니 다.POST 방법 은 기본적으로 Body Params 를 사용한다.물론 어떤 경우 에 일부 인 터 페 이 스 는 header 를 통 해 일부 인 자 를 전달 합 니 다.http 규범 에 따라 매개 변수 유형 을 선택 하 는 것 이 좋 겠 습 니 다.가 져 오 는 방식 으로 템 플 릿 에 응답 하 는 제작 을 완성 합 니 다.
백 엔 드 직원 에 게 http 클 라 이언 트 도구 (예 를 들 어 potman) 를 통 해 인터페이스 디 버 깅 을 한다 면 이런 방식 을 사용 하 는 것 이 가장 편리 한 방법 일 것 입 니 다.
여기 보니까 큰 성 과 를 거 둔 것 같 습 니 다.이 물건 이 이렇게 간단 한데 네가 나 에 게 알려 달라 고?too simple, sometimes naive. 여기 서 멈 추 면 rap 2 는 인터페이스 관리 만 실 현 했 을 뿐 앞 뒤 협력 효율 향상 에 최대 화 되 지 않 았 습 니 다.전단 개발 자 들 에 게 는 수 동 으로 가짜 데 이 터 를 만들어 야 합 니 다.이렇게 하면 번 거 롭 고 실수 하기 쉬 우 며 데이터 커버 범위 가 좁다.따라서 랩 2 는 mockjs 와 결합 하여 mock 데이터 의 기능 을 제공 합 니 다.매개 변수 에 생 성 규칙 과 초기 값 을 설정 하면 규칙 에 맞 는 무 작위 데 이 터 를 대량으로 생 성 할 수 있다.전단 개발 자 는 전체 창고 에 대응 하 는 mockjs 플러그 인 을 내 보 낸 다음 에 자신의 프로젝트 에 인용 하면 백 엔 드 직원 들 이 즐겁게 개발 할 수 있 습 니 다.구체 적 인 사용 장면 은 다음 절 에서 제 시 됩 니 다. 이 절 에서 mock 효 과 를 초보 적 으로 보 여 줍 니 다.
위의 그림 에서 이름, 나이, 성, 시, 심지어 두상 까지 모두 mock 할 수 있다.이렇게 하면 개발 할 때 텍스트 가 너무 길 어서 ui 가 어 지 러 운 bug 를 발견 할 수 있 고 백 엔 드 아빠 에 게 데 이 터 를 만들어 달라 고 애원 할 필요 가 없다.
mock 템 플 릿 문법: github. com / nuysoft / Doc...
mockjs 홈 페이지 템 플 릿 예제: mockjs. com / examples. ht...
필드 사용
여기 서 세 장면 을 예 로 들 어 백 엔 드, 전단 과 테스트 인원 에 대응 합 니 다.
백 엔 드
백 엔 드 개발 에 있어 모듈 의 구분 과 인터페이스 문서 의 작성 을 주로 책임 집 니 다.창고 관리 및 mock 템 플 릿 규칙 에 대해 서 는 누가 책임 지 는 지 전후 단 협상 이 필요 할 수 있 습 니 다.
전단
현재 demo 를 통 해 전단 이 랩 2 와 어떻게 결합 하여 mock 데이터 의 기능 을 신속하게 실현 하 는 지 보 여 줍 니 다.

vue - cli 를 통 해 프로젝트 초기 화 rap2-vue-demo

axios 와 mockjs 를 설치 합 니 다.

npm intsall axios --save
npm intsall mockjs --save

rap2 창고 템 플 릿 내 보 내기

랩 2 버그 일 수도 있 습 니 다. 브 라 우 저 로 직접 열 면 번 거 로 워 집 니 다.콘 솔 의 Preview 기능 으로 붙 여 넣 으 면 이 문 제 를 해결 할 수 있 습 니 다.

src 디 렉 터 리 에 폴 더 mock 만 들 기;mock 폴 더 아래 에 index. js, mock - template. js 를 새로 만 듭 니 다.코드 는 다음 과 같 습 니 다.

// src/mock/index.js
const Mock = require('mockjs');
require('./mock-template');
window.Mock = Mock;

(function(RAP, Mock) {
  for (let repositoryId in RAP.interfaces) {
	for (let itf of RAP.interfaces[repositoryId]) {
	  Mock.mock(itf.url, itf.method.toLowerCase(), settings => {
		console.log(`Mock ${itf.method} ${itf.url} =>`, itf.response);
		return Mock.mock(itf.response);
	  });
	}
  }
})(window.RAP, window.Mock);

// src/mock/mock-template.js
(function() {
  let repositoryId = 42;
  let interfaces = [{...}] //   
  let RAP = window.RAP || {
	protocol: 'http',
	host: 'rapapi.tool.wezhuiyi.com',
	interfaces: {}
  };
  RAP.interfaces[repositoryId] = interfaces;
  window.RAP = RAP;
})();

원 리 는 랩 2 창고 에 대응 하 는 mock 템 플 릿 을 내 보 낸 다음 매개 변수 로 Mock 대상 에 게 할당 하여 Mock 대상 의 구 조 를 완성 하 는 것 입 니 다.이 demo 에 서 는 간단 하고 거 칠 게 mock 템 플 릿 코드 를 src / mock / mock - mock - template. js 에 복사 합 니 다.개인 적 으로 랩 2 플러그 인 을 원 격 으로 도입 하 는 js 가 가장 좋 은 방법 이 라 고 생각 합 니 다. 인터페이스 가 바 뀌 면 전단 에 변경 이 필요 없습니다.

main. js 에 mockjs 를 도입 하고 xios 를 Vue 대상 의 원형

import Mock from './mock';
import axios from 'axios';

Vue.config.productionTip = false;
Vue.prototype.$http = axios;
...

에 기록 합 니 다.

구성 요소 에서 사용

mounted() {
    this.$http.get("/api/v1/students").then(res => {
    console.log(res.data);
    this.student = res.data;
    });
},   

효과 데모

테스트
테스트 인원 에 게 랩 2 를 사용 하면 'Postman Collection 내 보 내기' 기능 을 통 해 창고 의 모든 인터페이스 원 키 를 postman 으로 가 져 올 수 있 습 니 다.그리고 이 를 바탕 으로 인터페이스 차원 의 자동화 테스트 를 신속하게 구축한다.구체 적 인 실천 방법 은 이 글 을 참고 할 수 있다.