Spring Boot+Vue 전단 분리 개발 전단 네트워크 패키지 및 설정 요청

전단 네트워크 접근 의 주류 방안 은 Ajax 이 고 Vue 도 예외 가 아니다.Vue 2.0 이전에 네트워크 접근 이 비교적 많은 vue-resources,Vue 2.0 을 사용 한 후에 공식 적 으로 vue-resources 를 사용 하 는 것 을 건의 하지 않 았 다.이 프로젝트 자체 도 유 지 를 중단 하고 현재 사용 하 는 방안 은 axios 이다.오늘 송 형 이 axios 사용 을 보 여 드 리 겠 습 니 다.
axios 도입
axios 사용 절 차 는 매우 간단 합 니 다.우선 전단 항목 에 axios 를 도입 합 니 다.npm install axios -S포장 을 한 후에 이치 대로 말 하면 직접 사용 할 수 있 지만 일반적으로 생산 환경 에서 우 리 는 네트워크 요청 에 대해 포장 을 해 야 한다.
네트워크 요청 이 잘못 될 수 있 기 때문에 이러한 오 류 는 코드 오류 로 인 한 것 도 있 고 업무 오류 도 있 습 니 다.어떤 오류 든 개발 자가 처리 해 야 합 니 다.우 리 는 요청 을 보 낼 때마다 각종 오 류 를 매 거 할 수 없습니다.
따라서 우 리 는 전단 요청 에 대해 패 키 징 을 해 야 합 니 다.패 키 징 이 완 료 된 후에 전단 오 류 를 통일 적 으로 처리 해 야 합 니 다.그러면 개발 자 는 매번 요청 을 보 내 는 곳 에서 요청 이 성공 한 경우 만 처리 하면 됩 니 다.
패키지 요청
axios 에서,우 리 는 axios 자체 테이프 의 차단 기 를 사용 하여 오류 에 대한 통 일 된 처 리 를 실현 할 수 있다.
axios 에 서 는 요청 차단기 도 있 고 응답 차단기 도 있 습 니 다.
요청 차단기 에 서 는 단일 로그 인 에서 전단 에 token 파 라 메 터 를 통일 적 으로 추가 할 수 있 습 니 다.
응답 차단 기 는 오류 에 대한 통 일 된 처 리 를 실현 할 수 있다.
또 다른 주의해 야 할 점 은 잘못된 디 스 플레이 는 페이지 와 연결 되 지 않 고 일반적인 방식 을 사용 해 야 한 다 는 점 입 니 다.(예 를 들 어 로그 인 에 실 패 했 습 니 다.사용자 이름/비밀번호 입력 상자 뒤에 오류 정 보 를 보 여 주 는 것 은 지원 되 지 않 습 니 다.이러한 오류 디 스 플레이 방식 은 지원 되 지 않 습 니 다)Element UI 의 Massage 로 오류 정 보 를 보 여 주 는 것 을 추천 합 니 다.이것 은 페이지 와 무관 한 구성 요소 입 니 다.
봉 인 된 axios 는 다음 과 같 습 니 다:

import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
 return config;
}, err => {
 Message.error({message: '    !'});
})
axios.interceptors.response.use(data => {
 if (data.status && data.status == 200 && data.data.status == 500) {
 Message.error({message: data.data.msg});
 return;
 }
 if (data.data.msg) {
 Message.success({message: data.data.msg});
 }
 return data.data;
}, err => {
 if (err.response.status == 504 || err.response.status == 404) {
 Message.error({message: '      ⊙n⊙∥'});
 } else if (err.response.status == 403) {
 Message.error({message: '    ,      !'});
 } else if (err.response.status == 401) {
 Message.error({message: err.response.data.msg});
 } else {
 if (err.response.data.msg) {
  Message.error({message: err.response.data.msg});
 }else{
  Message.error({message: '    !'});
 }
 }
})

코드 설명:
1.우선 axios 와 Massage 구성 요 소 를 가 져 옵 니 다.
2.다음 요청 차단 기 를 정의 합 니 다.
3.마지막 으로 응답 차단 기 를 정의 합 니 다.이 차단 기 는 두 개의 매개 변수 가 있 습 니 다.첫 번 째 매개 변 수 는 데이터 가 서버 처리 에 성공 한 응답 을 표시 하고 두 번 째 err 는 서버 처리 에 실패 한 응답 을 표시 합 니 다.jQuery 의 Ajax 를 대조 하면 첫 번 째 는 success 리 셋 에 해당 하고 두 번 째 는 error 리 셋 에 해당 합 니 다.
4.응답 한 data 는 서버 에서 돌아 온 데 이 터 를 표시 합 니 다.데이터 형식 은{data:{status:200,msg",obj:{},status:200}입 니 다.data 의 대상 은 서버 에서 돌아 온 구체 적 인 JSON 입 니 다.밖의 status 는 HTTP 응답 코드 를 표시 합 니 다.안쪽 status 는 사용자 정의 RespBean 에서 돌아 온 데이터 입 니 다.
5.먼저 HTTP 응답 코드 를 200 으로 판단 하고 서버 에서 되 돌아 오 는 status 는 500 으로 업무 논리 적 오 류 를 나타 낸다.이때 Message 를 통 해 오류 정 보 를 직접 보 여주 고 return 하면 된다.
6.서버 에서 돌아 오 는 필드 에 msg 가 포함 되 어 있 으 면 msg 를 표시 합 니 다.이 msg 는 일반적으로 성공 적 인 알림 입 니 다.
7.마지막 으로 data.data 를 되 돌려 줍 니 다.서버 에서 돌아 올 데이터 return 입 니 다.이 데 이 터 는 최종 적 으로 호출 을 요청 하 는 곳 에 옵 니 다.
8.HTTP 응답 코드 가 400 보다 크 면 err 에 들 어 갑 니 다.
방법 포장
패키지 요청 이 완료 되면 방법 을 패키지 해 야 합 니 다.호출 이 편리 합 니 다.

let base = '';
export const postRequest = (url, params) => {
 return axios({
 method: 'post',
 url: `${base}${url}`,
 data: params,
 headers: {
  'Content-Type': 'application/json'
 }
 });
}
export const putRequest = (url, params) => {
 return axios({
 method: 'put',
 url: `${base}${url}`,
 data: params,
 headers: {
  'Content-Type': 'application/json'
 }
 });
}
export const deleteRequest = (url) => {
 return axios({
 method: 'delete',
 url: `${base}${url}`
 });
}
export const getRequest = (url) => {
 return axios({
 method: 'get',
 url: `${base}${url}`
 });
}

앞 뒤 분리 항목 에서 백 엔 드 인 터 페 이 스 는 대부분 RESTful 스타일 로 디자인 되 기 때문에 전단 은 주로 GET\POST\PUT\DELETE 방법 을 패키지 한 다음 에 모든 요청 매개 변 수 는 JSON 을 사용 합 니 다.
처음에 base 변 수 를 정 의 했 습 니 다.이것 은 요청 한 접두사 입 니 다.나중에 유지 하기 편리 합 니 다.(요청 접 두 사 를 통일 적 으로 수정 해 야 한다 면)
Vue 플러그 인 만 들 기
봉 인 된 방법 은 이미 직접 사용 할 수 있 지만,비교적 번 거 롭 습 니 다.사용 할 때마다 관련 vue 파일 에 방법 을 도입 해 야 합 니 다.아래 와 같이:import {postRequest} from "../utils/api";그러나 이런 조작 방식 은 너무 번 거 롭 기 때문에 우 리 는 방법 을 Vue 의 플러그 인 으로 더 봉인 하 는 것 을 고려 할 수 있다.이렇게 하면 모든 vue 파일 에서 방법 을 도입 하지 않 아 도 직접 호출 할 수 있다.
Vue 공식 문서 참조https://cn.vuejs.org/v2/guide/plugins.html다음 과 같 습 니 다.
공식 적 으로 5 가지 플러그 인 제작 방식 을 제 시 했 는데,우 리 는 여기 서 네 번 째 방안 을 채택 했다.
 구체 적 인 조작 은 main.js 에서 모든 패 키 징 방법 을 도입 한 다음 Vue.prototype 에 마 운 트 하면 됩 니 다.다음 과 같 습 니 다.

import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {getRequest} from "./utils/api";
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.postRequest = postRequest;

패키지 가 완 료 된 후 vue 파일 에서 this 를 통 해 네트워크 요청 방법의 인용 을 직접 얻 을 수 있 습 니 다.다음 과 같 습 니 다.

this.postRequest("/doLogin", this.user).then(msg=>{
 if (msg) {
 //    ，    
 }
})

then 의 msg 는 응답 차단기 에서 돌아 오 는 msg 입 니 다.이 msg 는 값 이 없 으 면 요청 이 실 패 했 음 을 표시 합 니 다.(실 패 는 차단기 에서 처리 되 었 습 니 다)값 이 있 으 면 요청 이 성공 했다 는 것 을 의미 합 니 다!
전송 요청 설정
앞 뒤 분리 에서 전단 과 백 엔 드 는 서로 다른 포트 나 주소 에서 실 행 됩 니 다.전단 이 백 엔 드 에 직접 요청 을 보 내 면 이 요청 은 도 메 인 을 뛰 어 넘 습 니 다.
그러나 프로젝트 배 치 를 할 때 전단 을 압축 하여 컴 파일 한 후 자바 프로젝트 에 복사 하여 자바 프로젝트 와 함께 실행 합 니 다.이 때 크로스 필드 문제 가 존재 하지 않 습 니 다.
그래서 여기 서 우리 의 해결 방향 은 크로스 도 메 인 문 제 를 해결 하 는 것 이 아니 라 NodeJS 의 요청 퍼 가기 설정 을 통 해 네트워크 요청 이 순조롭게 전송 되도록 하 는 것 입 니 다.
vue 프로젝트 의 config/index.js 파일 에 전송 요청:

전송 요청 설정 을 추가 한 후 전단 항목 을 다시 시작 해 야 유효 합 니 다.
이 때 전단 항목 을 시작 하면 네트워크 요청 을 순조롭게 보 낼 수 있 습 니 다.
총결산
본 고 는 주로 앞 뒤 가 분 리 된 상황 에서 전단 네트워크 요청 을 어떻게 봉인 하고 전송 요청 을 어떻게 설정 하 는 지 여러분 과 공유 하 였 습 니 다.이것 은 앞 뒤 가 분 리 된 기초 과정 입 니 다.어린이 들 은 질문 이 있 으 면 댓 글 토론 을 환영 합 니 다.송 형 은 자신 이 봉 인 된 네트워크 요청 라 이브 러 리 를 GitHub 에 올 려 놓 았 습 니 다.참고 하 시기 바 랍 니 다https://github.com/lenve/javaboy-code-samples