네트워크에서 SpringBoot와 Vue를 결합하기위한 두 가지 주요 솔루션이 있습니다.
1. 이 방법은 이전 전통적인 개발과 동일하지만 VUE의 양방향 데이터 바인딩을 매우 행복하게 사용할 수 있습니다. 이 방법은 일반적인 풀 스택 개발에만 적합합니다.
2. [권장] VUE 공식 스캐 폴딩을 사용하여 별도의 프론트 엔드 엔지니어링 프로젝트를 만들어 백엔드에서 완전한 독립적 인 개발 및 배치를 달성하고 백엔드와 별도로 순수한 편안한 서비스를 배치하는 반면, 프론트 엔드는 배치를 위해 NGINX를 직접 사용합니다. 이를 완전한 프론트 엔드 및 백엔드 분리 아키텍처 개발 모델이라고하지만 NGINX에서 다시 작성 해야하는 규칙을 다시 작성 해야하는 VUE 라우터 라우팅 배치를 포함하여 분리에서 해결 해야하는 API 권한에는 많은 문제가 있습니다. 전면 및 후면 끝에서 완전히 분리 된 이러한 종류의 아키텍처는 현재 인터넷 회사에서도 채택됩니다. 백엔드 서버는 더 이상 정적 리소스를 처리 할 필요가 없으며 백엔드 서버의 압력을 줄일 수도 있습니다.
1. 왜 프론트 엔드와 백엔드 분리와 병합이 발생 하는가
전통적인 산업에서 많은 사람들이 제품보다는 프로젝트 아이디어에 의해 지배됩니다. 프로젝트는 많은 고객에게 판매되어 고객의 지역 컴퓨터 룸에 배치됩니다. 일부 기존 산업에서는 인터넷 회사의 운영 및 유지 보수 팀과 비교할 수 없으며 다양한 불확실한 환경으로 인해 자동으로 구성, 컨테이너화 된 배포 등을 비교할 수 없으므로 배포 중에 서비스 소프트웨어 요구 사항을 최소화하고 가능한 한 몇 가지 패키지를 생산하려고 시도합니다. 이러한 상황에 따라 프론트 엔드 독립 개발이 개발 중에 구현됩니다. 전체 개발 방법은 위에서 언급 한 두 번째 방법과 동일합니다. 그러나 백엔드 스프링 부츠가 포장되어 출시되면 프론트 엔드 구조 출력이 함께 입력됩니다. 결국 SpringBoot 프로젝트를 배포하면 Nginx 서버를 설치할 필요가 없습니다.
2. SpringBoot 및 Vue 통합의 주요 운영
실제로이 기사에서 프론트 엔드 개발의 프론트 엔드 분리, 프론트 엔드 개발이 완료된 후 빌드에 내장 된 정적 파일은 SpringBoot 자원의 정적으로 복사되며 index.html은 스프링 부츠 자원의 정적에 직접 복사됩니다. 예제 다이어그램은 다음과 같습니다.
Vue 프론트 엔드 프로젝트
SpringBoot 프로젝트 :
위의 가장 쉬운 방법은 병합하는 가장 쉬운 방법이지만 엔지니어링 수준 프로젝트 개발 인 경우 수동 병합이 권장되지 않으며 프론트 엔드 코드는 스프링 부츠 리소스에 구축 및 제출하는 것이 좋습니다. 좋은 방법은 프론트 엔드 및 백엔드 완전히 독립적 인 개발 코드를 유지하는 것이며 프로젝트 코드는 서로 영향을 미치지 않습니다. Jenkins와 같은 건설 도구의 도움으로 프론트 엔드 구조가 트리거되고 SpringBoot를 구축 할 때 자동화 스크립트가 작성되어 프론트 엔드 웹 팩으로 구축 된 리소스를 SpringBoot에 복사 한 다음 Jar에 패키지됩니다. 마지막으로, 프론트 엔드와 백엔드를 완전히 포함하는 SpringBoot 프로젝트를받습니다.
3. 통합의 핵심 문제
위의 통합 후 두 가지 비교적 큰 문제가 발생합니다.
1. 정적 자원에 정상적으로 액세스 할 수 없습니다.
2. VUE 라우터 경로의 경로는 정상적으로 해결 될 수 없습니다.
첫 번째 문제를 해결하려면 SpringBoot의 정적 리소스 처리 접두사, 코드를 다시 지정해야합니다.
@ConfigurationPublic 클래스 SpringWebmvcconfig는 webmvcconfigureradapter {@override public void addresourceHandlers (resourceHandlerRegistry registry) {registry.addresourceHandler ( "/static/**"). addResourcelocations ( "classPath :/static/"); super.addresourcehandlers (레지스트리); }}두 번째 문제를 해결하는 방법은 VUE 경로의 경로를 다시 작성하여 스프링 부츠를 처리하기 위해 처리를 위해 라우터에 맡기는 것입니다. 다시 쓰면 경로 경로를 균일하게 추가 한 다음 SpringBoot에 특정 접미사를 필터링 및 가로 채서 요청 전달의 경로 처리 및 VUE에 전달하는 경로 처리를 수행 할 수 있습니다. 좋다:
const router = new vuerouter ({mode : 'history', base : __dirname, lours : [{path : '/ui/first.vhtml', component : first}, {path : '/ui/second.vhtml', component : second component}]})).VHTML을 가진 것들에 대한 백엔드 차단은 처리를 위해 라우터에 남겨 둡니다. 이 방법은 백엔드를 가로 채기 위해 필터를 작성한 후 패키지가 완전히 가능하지만 프론트 엔드에서 개발 한 접미사로 경로에 직접 액세스하는 데 문제가 있습니다.
또 다른 방법은 /ui와 같은 접두사를 프론트 엔드 라우팅 경로에 추가하는 것입니다. 이 시점에서 백엔드 쓰기 필터는 접두사와 일치하며, 이는 프론트 엔드 개발의 라우팅 분석 문제에 별도로 영향을 미치지 않습니다. 필터 참조는 다음과 같습니다.
/** * 2017-11-22 19:47:23에 Vue 라우터를 다시 작성하는 데 사용됩니다. * @author yu. */public class rewriteFilter는 필터를 구현 {/***다시 작성 해야하는 대상 주소*/public static final String rewrite_to = "rewriteUrl"; / *** 인터셉트 된 URL 및 URL 와일드 카드는 영어 세미콜론으로 구분됩니다*/ public static final String rewrite_patterns = "urlpatterns"; 개인 세트 <string> urlpatterns = null; // URL 와일드 카드 개인 문자열 rewriteto = null 구성; @override public void init (FilterConfig CFG)는 servleTeXception을 던지려고 {// 인터셉트 구성 rewriteTo = cfg.getInitParameter (rewrite_to); string off ExceptUrlString = cfg.getInitParameter (rewrite_patterns); if (stringUtil.isnotempty (제외)) {urlpatterns = collections.unmodifiableset (new Hashset <> (arrays.aslist (제외 rstring.split ( ";", 0))); } else {urlpatterns = collections.emptySet (); }} @override public void dofilter (servletrequest req, servletresponse resp, filterchain 체인) ioexception, servletexception {httpservletrequest request = (httpservletrequest) req; 문자열 servletpath = request.getServletPath (); 문자열 context = request.getContextPath (); // 일치하는 경로는 if (ismatches (urlpatterns, servletpath)) {req.getRequestDispatcher (context+"/"+rewriteto) .forward (req, resp); } else {chain.dofilter (req, resp); }} @override public void destroy () {} / ** * 일치는 true, mismatch returns false * @param 패턴 정기 표현 또는 와일드 카드 * @param url 요청 된 URL * @return * / private boolean ismatches (set <string> 패턴, 문자열 URL) {if (null == patters) {return false; } for (string str : patterns) {if (str.endswith ( "/*")) {문자열 이름 = str.substring (0, str.length () -2); if (url.contains (name)) {return true; }} else {Pattern Pattern = Pattern.comPile (str); if (pattern.matcher (url) .matches ()) {return true; }} 거짓을 반환합니다. }}필터 등록 :
@SpringBootApplicationPublic 클래스 SpringBootMainApplication {public static void main (String [] args) {springApplication.Run (springBootMainApplication.class, args); } @bean public embeddedservletcontainerCustomizer contineRcustomizer () {return (컨테이너 -> {errorpage error401page = new ErrorPage (httpstatus.unauthorized, "/errors/401.html"); ErrorPage error404page = new ErrorPage (httpstatus.not _found, "/errors/404.html"; ErrorPage 500page = httpstatus.internal_server_error, "/errors/500.html"); } @Bean public filterregistrationBean testFilterRegistration () {FilterRegistrationBean registration = new FilterRegistrationBean (); registration.setFilter (new rewriteFilter ()); // 레지스터 재 작성 필터 registration.addurlpatterns ( "/*"); registration.addinitparameter (rewritefilter.rewrite_to, "/index.html"); registration.addinitparameter (rewritefilter.rewrite_patterns, "/ui/*"); registration.setName ( "rewriteFilter"); 등록. 세터 (1); 반품 등록; }}현재 SpringBoot는 프론트 엔드 라우팅 리소스를 처리하기 위해 경로로 넘겨 줄 수 있습니다. 이 시점에서 전체 프론트 엔드 및 백엔드 분리 및 병합 솔루션이 완료됩니다. 이 방법은 후반 단계에서 조건을 사용할 수있을 때 전면 및 후면 끝에서 쉽게 분리 될 수 있습니다.
요약
위는 편집자가 소개 한 Spring Boot+Vue의 프론트 엔드 분리 및 병합 계획입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!