이 기사와 후속 기사에서는 ASP.NET 플랫폼에 비교적 새롭게 추가된 웹 API 도구에 대해 설명합니다. 이 도구를 사용하면 HTTP 클라이언트에 API를 노출하는 웹 서비스를 빠르고 쉽게 만들 수 있습니다.
웹 API 도구는 ASP.NET MVC Framework 응용 프로그램과 동일한 기반을 기반으로 하지만 ASP.NET MVC Framework의 일부는 아닙니다. 대신 Microsoft는 System.Web.Mvc 네임스페이스에서 주요 클래스 및 관련 특성 세트를 가져와 네임스페이스에 복제했습니다. 시스템.웹.Http.
웹 API는 기본 ASP.NET 프레임워크의 일부이며 다른 유형의 웹 응용 프로그램이나 독립형 웹 서비스 엔진으로 사용될 수 있다는 아이디어입니다. Web API 도구의 주요 용도 중 하나는 Web API와 ASP.NET MVC Framework의 기능을 결합하여 SPA(단일 페이지 응용 프로그램)를 만드는 것입니다. 다음으로 SPA 애플리케이션이 무엇인지, 어떻게 작동하는지 보여 드리겠습니다.
웹 서비스 생성을 단순화하는 것은 Web API의 필수 기능입니다. 이는 Microsoft가 지난 10년 동안 제공한 다른 웹 서비스 기술에 비해 상당한 개선을 나타냅니다. 저는 Web API 도구를 좋아하며 여러분의 프로젝트에서 이 도구를 사용해야 합니다. 특히 이 도구는 간단하고 ASP.NET MVC 프레임워크와 동일한 디자인 철학을 기반으로 구축되기 때문입니다.
단일 페이지 애플리케이션(SPA)이라는 용어는 매우 널리 사용됩니다. 가장 일관된 정의는 초기 콘텐츠가 HTML 마크업과 JavaScript 코드의 조합으로 전달되고 후속 작업이 Ajax 요청에 응답하여 JSON 형식으로 데이터를 전달하는 REST 웹 서비스를 사용하여 수행되는 웹 애플리케이션이라는 것입니다.
이는 사용자 작업의 결과가 동기 HTTP 요청에 대한 응답으로 생성된 새로운 HTML 문서였던 이전 예제에서 구축된 애플리케이션 종류와는 다릅니다. 이러한 애플리케이션을 왕복 애플리케이션(RTA)이라고 합니다.
SPA 애플리케이션의 장점은 대역폭이 덜 필요하고 사용자가 더 부드러운 인터페이스를 얻을 수 있다는 것입니다. 단점은 이렇게 매끄러운 인터페이스를 달성하기 어려울 수 있으며 SPA 애플리케이션에 필요한 JavaScript 코드의 복잡성으로 인해 신중한 설계와 테스트가 필요하다는 점입니다.
대부분의 애플리케이션은 SPA와 RTA 기술을 혼합하여 SPA로 제공되는 애플리케이션 기능의 각 주요 영역과 새 HTML 문서를 생성하는 표준 HTTP 요청을 사용하여 관리되는 기능 영역 간 탐색을 혼합합니다.
이 문서의 목적을 위해 WebServices라는 새 MVC 프로젝트는 빈 템플릿을 사용하여 Visual Studio에서 생성됩니다. 섹션에 대한 폴더 및 핵심 참조 추가에서 아래 이미지와 같이 MVC 및 웹 API 확인란이 선택되어 있습니다.
이 프로젝트는 일반 ASP.NET MVC Framework 응용 프로그램을 만든 다음 Web API를 사용하여 웹 서비스를 만드는 데 사용됩니다. 웹 서비스가 준비되면 ASP.NET MVC Framework 응용 프로그램은 단일 페이지 응용 프로그램으로 전환됩니다.
애플리케이션은 객실 예약에 대한 일련의 요청을 생성하고 유지 관리합니다. 신청서는 설명되는 시설의 메커니즘에 집중할 수 있도록 단순하게 유지될 예정이므로 예약 요청은 고객의 이름과 시설 위치로만 구성됩니다. Reservation.cs라는 클래스 파일이 Models 폴더에 추가되었으며 그 내용은 아래 예에 표시되어 있습니다.
네임스페이스 WebServices.Models ( 공용 클래스 Reservation ( 공용 int ReservationId ( get; set; ) 공용 문자열 ClientName ( get; set; ) 공용 문자열 위치 ( get; set; ) ) )
계획은 데이터 저장소 역할을 할 Reservation 개체의 간단한 메모리 내 컬렉션을 만드는 것입니다. 데이터베이스를 설치할 필요는 없지만 웹 API의 몇 가지 중요한 측면을 보여주기 위해 모델 개체 컬렉션에 대해 CRUD 작업을 수행할 수 있어야 합니다. ReservationRepository.cs라는 클래스 파일도 Models 폴더에 추가됩니다.
System.Collections.Generic 사용; System.Linq 사용; 네임스페이스 WebServices.Models ( public class ReservationRepository ( private static ReservationRepository repo = new ReservationRepository(); public static ReservationRepository Current ( get ( return repo; ) ) private List data = new List ( new Reservation ( ReservationId = 1, ClientName = "Peter") , 위치 = "호텔"), 새 예약(ReservationId = 2, ClientName = "Vasya", 위치 = "라이브러리"), 새 예약(ReservationId = 3, ClientName = "Igor", 위치 = "식당"), ) ; public IEnumerable GetAll() ( return data; ) public Reservation Get(int id) ( return data.Where(r => r.ReservationId == id).FirstOrDefault(); ) public Reservation Add(예약 항목) ( item. ReservationId = data.Count + 1; data.Add(item); return item; ) public void Remove(int id) ( 예약 항목 = Get(id); if (item != null) ( data.Remove(item); ) ) public bool Update(예약 항목) ( 예약 StoredItem = Get(item.ReservationId); if (storedItem != null) ( StoredItem.ClientName = item.ClientName; 저장된항목.위치 = 항목.위치; 사실을 반환; ) else ( false를 반환; ) ) ) )
실제 프로젝트에서는 클래스 간의 긴밀한 결합을 깨고 애플리케이션에 인터페이스를 도입하고 종속성 주입을 제공해야 합니다. 그러나 이 항목에서는 Web API 및 SPA 애플리케이션에만 중점을 두므로 표준 사례에 관해서는 일부 단순화가 이루어질 것입니다.
스토리지 클래스에는 세 가지 Reservation 객체의 초기 목록이 있으며 컬렉션을 보고, 추가하고, 삭제하고, 업데이트할 수 있는 메서드를 정의합니다. 저장소에는 지속성이 없기 때문에 응용 프로그램을 중지했다가 다시 시작하면 저장소에 대한 모든 변경 사항이 손실되지만 이 예에서는 콘텐츠가 서버에 저장되는 방식보다는 콘텐츠가 전달되는 방식에 전적으로 초점을 맞추고 있습니다. 요청 간에 일정 수준의 지속성을 제공하기 위해 정적 속성 Current를 통해 액세스할 수 있는 ReservationRepository 클래스의 인스턴스가 생성됩니다.
이 기사와 후속 기사에서는 jQuery, Bootstrap 및 Knockout의 세 가지 NuGet 패키지를 사용합니다. jQuery 및 Bootstrap 라이브러리는 이미 이전에 설명되고 사용되었습니다. Knockout은 Microsoft가 단일 페이지 응용 프로그램에 맞게 조정한 라이브러리입니다. 스티브 샌더슨이 만들었습니다. Steve는 Microsoft에서 근무하지만 Knockout 패키지는 Knockout 라이브러리 웹 사이트에서 오픈 소스로 제공되며 널리 채택되었습니다. 나중에 Knockout이 어떻게 작동하는지 보여주겠지만 지금은 위에서 언급한 패키지를 설치해야 합니다.
도구 --> 라이브러리 패키지 관리자 --> 패키지 관리자 콘솔을 선택하여 NuGet 명령줄 창을 열고 다음 명령을 입력합니다.
Install-Package jquery -version 1.10.2 -projectname WebServices Install-Package bootstrap -version 3.0.0 -projectname WebServices Install-Package knockoutjs -version 3.0.0 -projectname WebServices
Home이라는 컨트롤러가 예제 프로젝트에 추가되었으며, 해당 정의는 예제에서 볼 수 있습니다.
WebServices.Models 사용 System.Web.Mvc 사용; 네임스페이스 WebServices.Controllers ( 공용 클래스 HomeController: Controller ( ReservationRepository 저장소 = ReservationRepository.Current; public ViewResult Index() ( return View(repository.GetAll()); ) public ActionResult Add(예약 항목) ( if (ModelState.IsValid) ( 저장소.Add(항목); return RedirectToAction("색인"); else return View("색인"); public ActionResult Update(예약 항목) ( if (ModelState.IsValid && 저장소.Update(item)) return RedirectToAction( "색인 "); 그렇지 않으면 View("색인")을 반환합니다.
이는 이러한 간단한 애플리케이션에 대한 완전히 일반적인 컨트롤러입니다. 각 작업 메서드는 저장소의 메서드 중 하나에 직접적으로 대응됩니다. 컨트롤러의 유일한 유용성은 모델 검증 수행, 보기 선택 및 리디렉션 수행에서 비롯됩니다. 물론 실제 프로젝트에는 추가 도메인 로직이 있지만 예제 애플리케이션은 매우 기본적이므로 컨트롤러는 저장소를 둘러싼 단순한 래퍼에 지나지 않습니다.
애플리케이션에 대한 콘텐츠를 생성하기 위해 Views/Shared 폴더가 생성되고 _Layout.cshtml이라는 보기 파일이 아래 예제에 표시된 콘텐츠와 함께 폴더에 추가됩니다.
이 기본 레이아웃은 Bootstrap 라이브러리 CSS 파일에 대한 요소를 제공합니다. 레이아웃은 레이아웃 내에 콘텐츠를 삽입하는 데 사용되는 스크립트와 본문의 두 섹션을 정의합니다. 다음 단계는 애플리케이션에 대한 최상위 보기를 만드는 것입니다. 다음 단계는 일반 ASP.NET MVC Framework 응용 프로그램을 빌드하는 것이지만 결국에는 단일 페이지 응용 프로그램을 빌드하게 된다는 것을 알고 있습니다.
처음에 결과가 약간 이상해 보이더라도 애플리케이션에 필요한 모든 HTML 마크업을 포함하는 단일 보기를 생성하면 변환을 수행하는 것이 더 쉬울 것입니다. Index.cshtml이라는 보기 파일이 Views/Home 폴더에 추가됩니다. 해당 내용은 아래 예에 표시됩니다.
@webServices.Models 사용 @model IEnumerable @( ViewBag.Title = "Reservations";
}
@section Scripts {
}
@section Body {
@Html.Partial("Summary", Model)
@Html.Partial("Editor", new Reservation())
}!}
이 보기의 보기 모델은 Reservation 개체의 열거형이며 사용자에게 표시되는 기능의 구성 요소를 제공하기 위해 두 개의 부분 보기가 생성됩니다. 첫 번째 부분 보기가 포함된 파일의 이름은 Summary.cshtml입니다. 이 파일은 Views/Home 폴더에 생성됩니다.
부분 뷰의 뷰 모델은 Reservation 객체의 열거와 동일하며 Bootstrap을 요소로 사용하여 스타일이 지정된 테이블을 생성하는 데 사용됩니다.
, 이러한 개체의 속성 값을 표시합니다. Html.ActionLink() 도우미 메서드는 홈 컨트롤러의 제거 작업을 호출하는 링크를 생성하는 데 사용됩니다. 링크는 Bootstrap을 사용하여 버튼 스타일로 지정됩니다.
또 다른 부분 보기는 Editor.cshtml이며 Views/Home 폴더에도 있습니다. 이 파일의 내용은 아래 예에 나와 있습니다. 부분 보기에는 새 예약 요청을 생성하는 데 사용되는 양식이 포함되어 있습니다. 양식을 제출하면 홈 컨트롤러의 추가 작업이 호출됩니다.
@model WebServices.Models.Reservation 주문 생성 @using (Html.BeginForm("Add", "Home")) ( 클라이언트 이름 @Html.TextBoxFor(m => m.ClientName, new ( @class = "form-control" )) 배치 @Html.TextBoxFor(m => m.Location, new ( @class = "form-control" )) 저장 )
시작 URL 설정 및 애플리케이션 테스트 마지막 준비 단계에는 애플리케이션이 시작될 때 Visual Studio가 이동할 위치를 설정하는 작업이 포함됩니다. Visual Studio의 프로젝트 메뉴에서 WebServices 속성을 선택하고 대화 상자가 열리면 웹 탭으로 이동하여 작업 시작 범주에서 특정 페이지 라디오 버튼을 선택합니다. 값을 입력할 필요가 없습니다. 라디오 버튼만 선택하면 됩니다.
클래식 ASP.NET MVC Framework 형식으로 애플리케이션을 테스트하려면 Visual Studio 디버그 메뉴에서 디버깅 시작을 선택합니다. 사용자에게 현재 예약 목록과 이를 생성하고 삭제할 수 있는 기능을 제공하는 (약간 이상한) 올인원 레이아웃을 볼 수 있습니다.
다음 기사에서는 애플리케이션에 웹 API 기능을 추가하겠습니다.
이 기사에서는 SPA(단일 페이지 애플리케이션)에 중점을 둘 것입니다. 단일 페이지 사이트(SPA)의 원칙을 기반으로 구축된 웹 애플리케이션의 장단점을 고려합니다.
SPA 란 무엇입니까? 단일 페이지 응용 프로그램 - SPA로 약칭되며 러시아어로 번역되면 "단일 페이지 응용 프로그램"을 의미합니다. 즉, SPA는 하나의 웹 페이지에서 호스팅되는 웹 애플리케이션으로, 작동을 보장하기 위해 페이지 자체 로딩과 함께 필요한 모든 코드를 로드합니다. 이러한 유형의 애플리케이션은 HTML5 시대가 시작되면서 비교적 최근에 등장했으며 SPA는 HTML5 애플리케이션의 전형적인 대표자입니다.
우리가 알고 있듯이 HTML5는 HTML + CSS3 + JavaScript + [몇 가지 새로운 태그]에 지나지 않습니다. 따라서 SPA는 JavaScript로 작성된 애플리케이션입니다. 따라서 이전 정의를 약간 바꿔서 다음과 같은 결과를 얻습니다.
"SPA는 한 페이지에서 호스팅되는 웹 애플리케이션으로, 작동을 보장하기 위해 페이지 자체 로딩과 함께 CSS 파일뿐만 아니라 모든 자바스크립트 파일(모듈, 위젯, 컨트롤 등)을 로드합니다."
응용 프로그램이 매우 복잡하고 전자 문서 관리 시스템과 같은 풍부한 기능을 포함하는 경우 스크립트가 포함된 파일 수는 수백 또는 수천에 달할 수 있습니다. 그리고 "...모든 스크립트 로드..."는 사이트를 로드할 때 스크립트가 포함된 수십만 개의 파일이 모두 한 번에 다운로드된다는 의미는 아닙니다. SPA에 많은 수의 스크립트를 로드하는 문제를 해결하려면 AMD라는 API가 호출됩니다. AMD는 필요에 따라 스크립트를 다운로드하는 기능을 구현합니다. 즉, 한 페이지로 구성된 포털의 "메인 페이지"에 3개의 스크립트가 필요한 경우 프로그램이 시작되기 직전에 해당 스크립트가 로드됩니다. 그리고 사용자가 한 페이지로 구성된 포털의 다른 페이지(예: "프로그램 정보")를 클릭한 경우 AMD 원칙은 이 페이지로 이동하기 전에만 모듈(스크립트 + 마크업)을 로드합니다.
약간 구겨진 것으로 밝혀졌습니다. "한 페이지... 다른 페이지, 세 번째 페이지... 한 페이지 포털." 모든 "E"에 점을 찍자. SPA가 작동하는 데 필요한 모든 CSS에 대한 모든 링크와 스크립트에 대한 링크가 있는 사이트의 페이지를 "웹 페이지"라고 부릅니다. 이러한 페이지가 포함된 파일은 일반적으로 "index.html"이라고 합니다(ASP.NET MVC에서는 index.cshtml, index.vbhtml 또는 index.aspx일 수도 있음). 그리고 사용자가 한 페이지 내에서 전환하는 페이지 포털은 "모듈"이라고 불립니다.
이 접근 방식의 장점과 단점을 살펴보겠습니다. 이 모든 것이 왜 필요하며 SPA가 왜 그렇게 인기가 있습니까?
SPA: 장점 주목할만한 첫 번째 장점은 SPA 응용 프로그램이 데스크톱과 모바일 장치 모두에서 완벽하게 작동한다는 사실입니다. "대형" 컴퓨터, 태블릿, 스마트폰 및 간단한 휴대폰(일부)은 SPA 원칙에 따라 구축된 사이트에서 쉽게 작동할 수 있습니다. 따라서 첫 번째 "플러스"는 많은 수의 장치에서 작동한다는 것입니다. 즉, 하나의 응용 프로그램을 만들면 표준 접근 방식을 사용할 때보다 훨씬 더 많은 사용자를 확보할 수 있습니다.
다음으로, 두 번째 "플러스"는 소위 사용자 경험이라고 불리는 풍부한 사용자 인터페이스입니다. 웹 페이지가 하나뿐이므로 풍부하고 풍부한 사용자 인터페이스를 구축하는 것이 훨씬 쉽습니다. 세션 정보 저장, 보기 상태 관리, 애니메이션 제어(경우에 따라)가 더 쉽습니다.
세 번째 "플러스"는 SPA가 소위 "순환", 즉 동일한 콘텐츠를 반복해서 다운로드하는 것을 여러 번 크게 줄인다는 것입니다. 포털(사이트)이 템플릿을 사용하는 경우 사이트 방문자는 페이지의 기본 콘텐츠와 함께 템플릿 마크업을 다운로드해야 합니다. 예, WWW 개발의 이 단계에서 데이터 캐싱은 가장 높은 결과를 얻었지만 캐싱할 것이 없으면 시간이나 리소스가 낭비되지 않습니다.
SPA: 단점 C#으로 프로그래밍하는 경우 SPA의 유일한 단점은 JavaScript를 배워야 한다는 것입니다. 어쨌든 다른 글로벌 문제를 찾을 수 없었습니다.
SPA의 구성요소 SPA 패러다임을 구현하는 모든 프레임워크(나중에 설명)의 원칙은 다음 개념과 정의를 준수해야 합니다.
- SPA는 클라이언트 탐색을 지원합니다. 페이지 모듈을 통한 사용자의 모든 "걷기"는 탐색 기록에 고유하게 기록되며 탐색은 "심층"입니다. 즉, 사용자가 다른 브라우저나 창에서 내부 페이지 모듈에 대한 링크를 복사하고 열면 그는 해당 페이지로 이동됩니다.
- SPA는 하나의 웹 페이지에 위치합니다. 이는 사이트(포털) 운영에 필요한 모든 것, 스크립트 및 스타일이 프로젝트의 한 위치, 즉 단일 웹 페이지에서 정의되어야 함을 의미합니다.
- SPA는 클라이언트(클라이언트 스크립트)의 상태(중요 변수)를 브라우저 캐시나 웹 스토리지에 영구적으로 저장합니다.
- SPA는 웹 페이지가 초기화될 때 애플리케이션을 시작하는 데 필요한 모든 스크립트를 로드합니다.
- SPA는 필요에 따라 점진적으로 모듈을 로드합니다.
SPA 템플릿 이미 짐작하셨겠지만 SPA는 추상적인 개념입니다. 이것이 애플리케이션 아키텍처의 원리입니다. SPA 원칙에 따라 웹사이트를 개발할 때 어디서부터 시작해야 하는지 이야기해 보겠습니다.
단일 페이지 애플리케이션 원칙을 구현하는 기본 라이브러리(프레임워크 - 영어 단어 프레임워크에서 유래 - "기본, 구조, 프레임")가 많이 있습니다. 이러한 프레임워크는 무엇을 제공합니까?
- SPA 개발을 위한 기본 원칙을 제공하고 보편적인 문제를 해결하기 위한 인건비를 최소화합니다("SPA 구성 요소" 섹션 참조).
- 프레임워크는 개발자 커뮤니티에 의해 만들어졌습니다. 즉, 프레임워크는 많은 프로그래머의 웹사이트 제작 경험을 활용합니다.
- 프레임워크는 단일 페이지 애플리케이션을 기반으로 하는 구조를 생성하기 위한 출발점입니다.
저는 수년간 NET 플랫폼에서 작업해왔기 때문에 ASP.NET을 기반으로 하는 단일 페이지 응용 프로그램 템플릿을 살펴보겠습니다. 다음 비교표를 살펴보겠습니다.
SPA 템플릿 기능 비교 이 표는 단일 페이지 애플리케이션 애플리케이션 구축을 위한 가장 일반적인 템플릿을 보여줍니다. 녹색으로 강조된 DurandalJS, HotTowel 등 본격적인 프레임워크를 구축하기 위한 기본 빌딩 블록은 파란색으로 강조되어 있으니 참고하시기 바랍니다.
따라서 표에 제공된 데이터에 따라 기본 ASP.NET 및 KnockoutJS를 사용하여 단일 페이지 응용 프로그램 응용 프로그램을 만들 수 있습니다. 그러나 무엇보다도 탐색 및 탐색 기록 관리는 물론 데이터 작업(DAL) 구현을 직접 작성해야 합니다.
2017년 5월 21일
단일 페이지 사이트 또는 단일 페이지 애플리케이션(SPA)이 좋습니다. 주요 장점은 SPA가 사용자 작업에 더 빠르고 반응이 빠르다는 것입니다. 이는 작업 로직을 클라이언트 측으로 전송하고 ajax를 통해 서버와 적극적으로 상호 작용함으로써 달성됩니다.
SPA는 Angular 또는 React의 강력한 애플리케이션으로 일부 제어판이나 복잡한 서비스에서 수많은 데이터를 이동한다는 의견이 있습니다. 그리고 일반적으로 이것은 사실입니다. 하지만 저는 그러한 서비스뿐만 아니라 일반 기업 명함 사이트에도 단일 페이지 애플리케이션을 작성하는 것이 합리적이라고 확신합니다.
이것이 필요한 이유와 약간의 노력으로 수행하는 방법은 무엇입니까? 이에 대한 자세한 내용은 아래에서 확인하세요. 가다.
그렇다면 왜 이렇게 애지중지합니까? 가장 중요한 것은 작업 속도입니다.
물론 한 페이지짜리 명함 웹사이트를 개발할 때 몇 가지 문제에 직면하게 됩니다.
- 1. 어떻게 접근하고, 어디서부터 시작해야 할까요?
- 2. History API를 사용하여 브라우저 기록을 처리하는 방법은 무엇입니까?
- 3. Angular, React 중 어떤 프레임워크나 라이브러리를 공부해야 합니까? 그리고 우리는 단 한명도 모릅니다...
- 4. 검색 엔진이 한 페이지짜리 사이트를 색인화하도록 하는 방법은 무엇입니까?
다음 질문에 대한 답변:
- 1. 간단한 웹사이트의 예를 사용하여 같은 기사에서 살펴보겠습니다.
- 2. 아래에서도 말씀드리겠지만, 이것은 십여 줄의 코드입니다.
- 3. 없음. 네이티브 자바스크립트와 jQuery를 보조 도구로 사용하겠습니다.
- 4. 이 시리즈의 다음 기사는 검색 엔진에 관한 것입니다.
각도 반응이 없는 이유는 무엇입니까?
물론 이것들은 매우 필요한 주제이므로 공부하는 것이 좋습니다. 그러나 우리의 예에서는 그것들이 필요하지 않습니다. 단지 자바스크립트에 대한 최소한의 지식만 있으면 됩니다.
한 페이지짜리 자료는 두 개 이상의 기사의 주제입니다. 이것은 적어도 세 부분으로 구성된 일련의 기사로 구성된 전체 프로젝트가 될 것입니다. 그리고 다양한 주제를 다룰 것입니다. 하지만 명확히하겠습니다. REST API를 통해 서버와 상호 작용하는 간단한 관리 패널을 구축하겠습니다(적어도 처음에는). 첫 번째 수업에서는 한 페이지짜리 웹사이트가 12페이지짜리 일반 명함이 됩니다. 그러나 사이트는 페이지를 다시 로드하지 않고도 작동하며 인터페이스의 속도와 응답성으로 사용자를 기쁘게 할 것입니다.
사이트의 아이디어, 작동 방식 가장 일반적인 기업 웹사이트인 홈 페이지, "프로젝트 정보" 섹션, 연락처 및 블로그를 살펴보겠습니다. 블로그 섹션에는 내부 페이지에 대한 여러 링크가 있습니다. 각 페이지에 내용을 추가하고 상호 참조를 삽입할 것입니다.
사이트의 각 페이지에는 일반적으로 반복되는 콘텐츠가 있습니다. 우리에게는 이것이 헤더와 메뉴가 될 것입니다. 그리고 변경되는 페이지의 주요 내용이 있습니다. 이렇게 하겠습니다. 페이지를 한 번만 로드한 다음 링크를 클릭하면 Ajax를 사용하여 필요한 콘텐츠를 동적으로 로드합니다. 동시에 브라우저 탭의 페이지 제목, 주소 표시줄의 URL을 변경하고 브라우저의 뒤로/앞으로 버튼을 통한 탐색이 작동하도록 브라우저의 기록을 기억합니다.
각 개별 페이지의 콘텐츠는 별도의 HTML 파일에 저장됩니다.
우리가 어떻게 끝나는지 즉시 확인할 수 있습니다.
사이트 구조 및 준비 작업 파일-폴더 구조는 다음과 같습니다. 프로젝트 루트에는 index.php 및 .htaccess 파일이 있습니다. 왜 정확히 html이 아니고 php인지는 나중에 말씀드리겠습니다. css 폴더에는 main.css 파일의 스타일이 포함되어 있습니다. js 폴더에는 jquery.js 라이브러리와 기본 애플리케이션 파일인 main.js가 포함되어 있습니다. 페이지 폴더에는 사이트 콘텐츠가 포함된 html 파일이 포함되어 있습니다(각 페이지당 하나의 파일).
콘텐츠 준비 중 내 webdevkin 프로젝트를 예로 들어 데모 사이트를 만들어 보겠습니다. 페이지 세트는 다음과 같습니다.
- — 메인-홈
- — 소개 - 프로젝트 소개
- — 블로그-블로그
- — 상점 - 온라인 상점
- — 프론트엔드 - 프론트엔드
- — mysql - MySQL 데이터베이스
- — 위젯 - 삽입 가능한 위젯
- — 단순 - 프로젝트 단순
- — 연락처 - 연락처
따라서 페이지 폴더에는 9개의 html 파일이 포함됩니다. 에서 콘텐츠에 대한 모든 마크업을 찾을 수 있습니다. 예를 들어, simple.html이라는 한 파일의 내용만 제공하겠습니다.
Simple 프로젝트는 블로그 사이트에서 성장했습니다. 이 프로젝트의 아이디어는 사이트 방문자와 상호 작용하는 데 도움이 되는 간단하고 쉽게 삽입된 위젯을 만드는 것입니다. 현재 쉽게 만들고 웹사이트에 삽입할 수 있는 설문조사 위젯이 이미 있습니다.
보시다시피 여기에는 헤드, 본문, HTML, 스크립트가 없으며 특정 페이지와 관련된 마크업만 있습니다.
index.php 및 .htaccess index.html이 아닌 이유는 무엇입니까?
사실 우리 사이트에는 하나의 물리적 페이지(색인)가 있을 것입니다. 그러나 우리는 site.ru/about, site.ru/contacts 등과 같은 주소에도 관심이 있습니다. 그러나 우리 사이트의 루트에는 정보 및 연락처 페이지가 없습니다. html 파일 세트가 있는 페이지 폴더는 완전한 페이지가 아니라 단순히 전체 프레임워크에 내장된 html 코드 조각입니다.
따라서 site.ru/about에 액세스할 때 500, 403이 발생하지 않고 다른 오류가 무엇인지 신이 알 수 있도록 사이트로 들어오는 모든 요청을 index.php로 리디렉션해야 이러한 요청을 해결할 수 있습니다. 그러나 현재로서는 index.php는 한 줄의 PHP 코드도 없는 일반적인 HTML 마크업입니다(그러나 이는 현재에 한함). 그리고 .htaccess에 다음을 작성합니다. 다시 돌아올 필요는 거의 없습니다.
RewriteEngine 옵션 +SymLinksIfOwnerMatch RewriteCond %(REQUEST_FILENAME) !-d RewriteCond %(REQUEST_FILENAME) !-f RewriteCond %(REQUEST_FILENAME) !-l RewriteRule ^(.+)$ index.php?q=$1
요점까지
나는 네이티브 PHP의 Simple RESTful 서비스에 관한 기사를 쓴 적이 있습니다. 여기에서 요청을 리디렉션하는 이 방법에 대한 추가 정보를 찾을 수 있습니다.
우리의 HTML 코드는 매우 간단합니다. Css/main.css 스타일은 헤드에 포함되어 있습니다. 바닥글에는 js/jquery.js 및 js/main.js라는 2개의 js 파일이 있습니다. 그리고 신체에는 다음이 있을 것입니다:
먼저 메뉴를 표시합니다. 다음은 페이지 제목입니다. 그리고 아래에는 id=content인 빈 div가 있습니다(style=""에 주의하지 마세요. 언젠가 파서가 나를 화나게 할 것이고 내가 그것을 대체할 것입니다). #content는 페이지/*.html 파일에서 페이지 콘텐츠를 동적으로 로드합니다. 아직 흥미로운 내용은 없습니다.
링크의 data-menu 및 data-link="ajax" 속성에 주의하세요. 이는 탐색 링크와 당사 웹사이트에도 있는 일반 외부 링크를 구별하기 위해 도입되었습니다. data-link="ajax"는 귀하가 이 링크를 클릭하면 당사가 브라우저의 표준 동작을 가로채고 해당 링크에 대한 작업을 당사가 직접 처리한다는 의미입니다. 그리고 데이터 메뉴는 이 링크를 클릭할 때 강조 표시되는 기본 메뉴 항목을 의미합니다. 여기서 데이터 메뉴는 href 속성과 중복되지만 다른 옵션도 가능합니다. 예를 들어 블로그의 프런트엔드 섹션으로 이동하면 data-menu="blog"가 표시됩니다.
명확성을 위한 2가지 예:
simple.ru 홈페이지 simple.ru 스타일 main.css 가장 지루한 부분인 css/main.css 파일을 빠르게 스크롤하고 복사하여 붙여넣어 보겠습니다.
본문( 위치: 상대; 글꼴 계열: "Helvetica Neue Light", "Helvetica Neue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; 글꼴 크기: 1em; 글꼴 두께: 400; 색상: #333 ; ) a, a:visited ( 색상: steelblue; ) a:hover ( 색상: 네이비; ) .wrapper ( 너비: 80%; 여백: 0 10%; ) .spa-title ( 글꼴 크기: 1.2em; 텍스트 - 정렬: 중앙; ) 메뉴( 여백 상단: 2em; 패딩: 0; 텍스트 정렬: 중앙; ) 메뉴 a( 디스플레이: 인라인 블록; 여백 오른쪽: 10px; 패딩: 5px 15px; 텍스트 장식: 없음 ; ) 메뉴 a:hover, 메뉴 a.active ( background-color: steelblue; 색상: 흰색; ) .page-title ( text-align: center; ) ul li ( 목록 스타일 유형: 원형; )
이제 가장 흥미로운 부분이 나옵니다. 즉, 개별 파일 세트를 한 페이지짜리 웹사이트로 바꾸는 자바스크립트 코드입니다.
자바스크립트 일반 코드 및 구성 JS 코드 프레임워크를 설정해 보겠습니다.
Var app = (function() ( var config = (); var ui = (); // 이벤트 바인딩 함수 _bindHandlers() ( // ... ) // 애플리케이션 초기화 함수 init() ( // ... _bindHandlers (); ) // 외부 반환 return ( init: init ) ))(); // 애플리케이션 실행 $(document).ready(app.init);
페이지가 로드될 때 초기화 기능을 실행하는 별도의 앱 모듈이 있습니다. 여기에 이벤트 핸들러를 연결하고 추가 코드를 실행합니다. 또한 config와 ui라는 2개의 개체도 볼 수 있습니다. 작업에 필요한 모든 DOM 요소는 UI에 캐시됩니다.
Var ui = ( $body: $("body"), $menu: $("#menu"), $pageTitle: $("#page-title"), $content: $("#content") );
개별 메뉴 항목을 강조 표시하려면 $menu가 필요합니다. $pageTitle은 페이지 간에 이동할 때 동적으로 변경되며 $content는 페이지/*.html 파일의 내용과 함께 로드됩니다.
그러나 구성이 더 흥미로워 보입니다.
Var config = ( siteTitle: "Webdevkin SPA", mainPage: "main", Pages: ( main: ( title: "Main", menu: "main" ), about: ( title: "프로젝트 정보", menu: " 정보 " ), 블로그: ( 제목: "Webdevkin-a 블로그", 메뉴: "블로그"), 단순: ( 제목: "간단한 프로젝트", 메뉴: "간단"), 연락처: ( 제목: "연락처", 메뉴 : "연락처" ), shop: ( 제목: "온라인 상점", 메뉴: "블로그"), frontend: ( 제목: "프런트엔드에 대한 기사", 메뉴: "블로그"), mysql: ( 제목: "Mysql 데이터베이스 ", 메뉴: "블로그" ), 위젯: ( 제목: "삽입 가능한 javascipt 위젯", 메뉴: "블로그" ) ) );
siteTitle: "Webdevkin SPA" - 여러 곳에서 사용되는 사이트 제목입니다.
mainPage: "main" - 사이트의 시작 페이지, 즉 site.ru에 들어갈 때 열리는 페이지를 나타냅니다. 이제 이것은 메인 페이지이지만 "프로젝트 정보"와 같은 시작 페이지를 넣는 것이 쉽게 발생할 수 있습니다.
전체 구성에서 가장 중요한 것은 페이지 개체입니다. 각 개체 필드는 사이트의 한 페이지를 설명합니다. 이제 페이지 제목과 이 페이지가 속한 메뉴라는 2개의 항목만 필요합니다. 객체 키, 즉 페이지는 페이지/*.html의 파일 이름 및 내부 링크의 href 속성과 일치합니다.
마지막으로 모든 작업을 시작한 코드를 작성하겠습니다. 놀라실 수도 있겠지만, 사이트를 유지하는 작업을 직접적으로 수행하는 코드는 사이트를 작성하기 위한 준비 작업에 비해 훨씬 적습니다.
Ajax를 사용하여 콘텐츠를 로드합니다. 히스토리 API 순서대로 가자. 필요한 이벤트의 바인딩을 포함하는 init 함수에 대해 작업해 보겠습니다.
// 이벤트 바인딩 함수 _bindHandlers() ( ui.$body.on("click", "a", _navigate); window.onpopstate = _popState; )
첫 번째 줄에서는 내부 링크 a에 대한 클릭을 포착하여 _navigate 함수로 보냅니다. 이제 우리는 마침내 별도의 속성 data-link="ajax"가 필요하다는 것을 확신했습니다 :-)
다음 window.onpopstate = _popState;
문서에서.
동일한 문서에 대한 두 기록 항목 간에 활성 기록 항목이 변경될 때마다 popstate 이벤트가 window 객체로 전달됩니다.
간단히 말하면 브라우저의 뒤로/앞으로 버튼의 작동입니다. 보시다시피 브라우저의 기본 동작도 가로채야 합니다. 따라서 _popState 함수에 제어권을 부여하겠습니다.
더 나은 이해를 위해 두 기능에 대한 코드를 한 번에 제공하겠습니다.
// 링크 함수를 클릭합니다. _navigate(e) ( e.stopPropagation(); e.preventDefault(); var page = $(e.target).attr("href"); _loadPage(page); History.pushState( ( 페이지: 페이지), "", 페이지); ) // 뒤로/앞으로 버튼 function _popState(e) ( var page = (e.state && e.state.page) || config.mainPage; _loadPage(page); )
_navigate 링크를 명시적으로 클릭하면 클릭 이벤트가 버블링되는 것을 중지하고 링크를 따라가는 브라우저의 기본 동작을 취소합니다. 그런 다음 로드하려는 페이지를 식별하고(href 속성으로 이해) 새 _loadPage 함수를 호출합니다. 그녀는 콘텐츠 로딩, 제목 변경 등의 모든 주요 작업을 수행합니다. 그리고 마지막에는 History.pushState를 사용하여 브라우저 기록에 새 항목을 추가합니다. 예, 우리는 브라우저 기록을 명시적으로 생성합니다. 그 다음에는 필요하다고 판단될 때. 그리고 로드된 페이지에 대한 데이터를 객체(페이지:페이지)에 저장합니다. 이 데이터는 다음 _popState 함수에서 유용할 것입니다.
_popState의 아이디어는 비슷합니다. 원하는 페이지를 찾고 동일한 _loadPage를 실행합니다.
Var 페이지 = (e.state && e.state.page) || config.mainPage;
e.state && e.state.page - 우리가 _navigate에 신중하게 기록한 기록 개체에서 페이지를 가져옵니다. e.state 개체를 사용할 수 없는 경우(예를 들어 site.ru 사이트를 처음 방문했지만 아직 둘러볼 시간이 없었을 때) config-config에서 기본 페이지로 지정된 페이지를 사용합니다. 메인 페이지.
공평하게 말하자면, History.pushState 함수와 pushState에 기록된 데이터가 있는 e.state 객체를 window.onpopstate에서 사용할 수 있다는 사실만이 History API에 대해 알아야 할 전부입니다. 더 호기심이 많은 동지라면 인터넷 검색이 브라우저 기록을 사용하는 다른 좋은 방법을 찾는 데 도움이 될 것이라는 데 의심의 여지가 없습니다.
우리는 심층적인 연구에 참여하지는 않지만 주요 기능인 _loadPage에 대한 코드를 작성할 것입니다.
// 페이지 함수로 콘텐츠 로드 _loadPage(page) ( var url = "pages/" + page + ".html", pageTitle = config.pages.title, menu = config.pages.menu; $.get(url, function (html) ( document.title = pageTitle + " | " + config.siteTitle; ui.$menu.find("a").removeClass("active"); ui.$menu.find("a").addClass ("활성"); ui.$pageTitle.html(pageTitle) ui.$content.html(html));
그는 꽤 평범해 보인다. 먼저 페이지의 HTML을 다운로드할 경로인 URL을 구성합니다. 그런 다음 구성에서 선택할 페이지 제목과 메뉴 항목을 꺼냅니다. 다음으로, 평범한 jQuery.get을 통해 페이지의 html 콘텐츠를 가져오고 여러 가지 간단한 작업을 수행합니다.
a) 페이지 제목 업데이트
b) 2줄에서 원하는 메뉴 항목을 선택합니다.
c) HTML 코드에서 페이지 자체의 제목을 변경합니다.
d) URL에서 얻은 페이지의 실제 HTML 콘텐츠를 로드합니다.
거의 모든! 잠시 남았습니다. 예를 들어 이제 site.ru/blog 페이지로 이동하여 업데이트하면 로드되는 블로그가 아니라 빈 페이지가 됩니다. 초기화 중에는 _loadPage를 호출하지 않기 때문입니다. 이 문제를 해결하려면 init 함수에 몇 줄을 추가해야 합니다. 이는 최종적으로 다음과 같습니다.
// 애플리케이션 함수 초기화 init() ( var page = document.location.pathname.substr(1) || config.mainPage; _loadPage(page); _bindHandlers(); )
이제 그게 전부입니다!
링크를 요약하고 기억해 봅시다 그래서 우리는 간단하지만 모든 기능을 갖춘 단일 페이지 웹사이트를 작성했으며 History API의 작동 방식에 대해서도 조금 배웠습니다. 솔직히 저는 80%의 시간이 일종의 거창한 결과를 낳고 결국에는 모든 것이 예상보다 훨씬 쉬워지는 나쁜 영화의 감독이 된 것 같습니다.
한편으로는 거의 모든 코드가 단지 준비, 연결, 구성 작성 및 기타 지루한 작업일 뿐입니다. 그러나 실제 작업을 수행하는 정말 유용한 코드는 24줄을 차지합니다.
하지만 반면에 구성을 통해 새 페이지를 추가할 때 쉽게 확장할 수 있는 구조를 만들 수 있었습니다. 또한 다음 기사에서는 검색 엔진에 한 페이지 웹사이트의 색인을 생성하도록 가르칠 때 이 다소 큰 구성의 중요성을 살펴보겠습니다. 글쎄, 더 예쁘게 보이려면 스타일이 필요합니다 :-)
제3자도 있습니다. 단일 페이지 사이트에 익숙하지 않은 사람들에게 이것은 전혀 간단한 일이 아닙니다. 그리고 처음에는 복잡해 보이는 주제가 자세히 고려한 결과 우리가 큰 노력을 기울이지 않고도 완전히 해결할 수 있다는 것이 밝혀지면 훌륭하다고 생각합니다.
다음으로 우리의 데모 사이트는 점진적으로 발전할 것입니다. 다음 기사에서는 특별한 조치를 취하지 않으면 단일 페이지 웹사이트의 색인이 매우 제대로 생성되지 않는 것으로 알려져 있기 때문에 검색 엔진에서 색인을 생성할 수 있는 사이트를 준비하기 시작할 것입니다. 그러나 이것은 시리즈의 다음 기사에서 나온 것입니다.
그리고 작은 설문조사
단일 페이지 애플리케이션(SPA)은 속도, 매우 우수한 UX, HTML 마크업에 대한 완전한 제어 등 많은 장점을 가지고 있습니다. 점점 더 많은 SPA 사이트가 있습니다. SPA 개발 프로세스를 단순화하는 도구가 점점 더 많아지고 있습니다. 아마도 젊고 유망한 프레임워크인 Vue.js에 대해 이미 읽어보셨을 것입니다. Vue에 대해 더 깊이 알아보고 구체적인 예를 사용하여 간단한 SPA를 이해하는 것이 좋습니다.
간단한 블로그를 위한 클라이언트-서버 애플리케이션을 작성하겠습니다. 응용 프로그램은 항목 목록과 각 개별 항목의 전체 텍스트를 표시합니다. 물론 이 모든 작업은 페이지를 다시 로드하지 않고도 수행됩니다.
이 예제 애플리케이션을 읽은 후에는 Vue에서 데이터를 추출하고, 경로를 생성하고, Vue의 흥미로운 기능인 단일 파일 구성 요소를 이해하는 방법을 배우게 됩니다.
백엔드 이 튜토리얼에서는 주로 Vue의 프런트엔드에 중점을 둘 것입니다. REST 백엔드 작성에 대해서는 생각하지 않을 것입니다. 예를 들어, 우리는 서비스를 사용할 것입니다 jsonplaceholder.typicode.com REST API 형태로 스텁을 제공합니다. FrontendTools Vue를 시작하는 것은 매우 간단합니다. 올바른 도구를 사용하면 훨씬 더 쉽습니다. 모든 상황에 맞는 도구, 구성 요소, 라이브러리 및 플러그인 목록이 포함된 vue-awesome 프로젝트를 살펴보는 것이 좋습니다. Vue-cli 새 프로젝트를 만들 때 Vue-cli를 사용하는 것이 좋습니다. 이렇게 하면 공식 Vue 템플릿 프로젝트 또는 많은 오픈 소스 템플릿 프로젝트 중 하나를 사용하여 프로젝트를 만들 수 있으며 물론 자신만의 프로젝트를 만들어 어디에서나 사용할 수 있습니다. 먼저 vue-cli를 글로벌 패키지로 설치해 보겠습니다.
$ npm 설치 -g vue-cli
그런 다음 선택한 템플릿으로 프로젝트를 초기화합니다. 우리의 예에서는 webpack-simple을 사용하는 것만으로도 충분합니다.
$ vue init webpack-simple vue-spa
다음으로 vue-spa 폴더로 이동하여 실행합니다. npm 설치터미널에서. 모든 패키지를 설치한 후 개발 모드에서 애플리케이션을 실행할 수 있습니다.
$ npm 실행 개발
이 명령은 로컬 webpack 개발 서버에서 프로젝트를 자동으로 실행합니다. 가장 간단한 Vue 애플리케이션이 브라우저에 나타납니다. 물론 우리가 원하는 대로 전혀 보이지 않고, 더 큰 일을 시작하기 위한 출발점으로만 적합할 뿐입니다. 계속 작업하려면 먼저 템플릿의 구조를 숙지하는 것이 좋습니다.
내부적으로 webpack-simple 템플릿의 구조는 다음과 같습니다.
파일 index.html본문에 단일 "app" 요소가 있는 간단한 HTML 마크업이 포함되어 있습니다. vue에서 생성된 DOM으로 대체됩니다. 이러한 이유로 태그 몸루트 요소로 사용하는 것은 권장되지 않습니다.
폴더 내 소스 webpack 진입점이 포함된 main.js 파일이 있습니다. Vue 구성 요소를 여기로 가져옵니다. 또한 지금까지 두 가지 속성이 있는 Vue의 루트 인스턴스에 대해서도 설명합니다. 'el' 속성은 지정된 DOM 요소와의 연결을 통해 Vue 인스턴스를 제공합니다. 또 다른 하나는 DOM을 생성하는 렌더링 기능입니다. App.vue. 전체적으로, 이것이 웹팩의 간단한 템플릿 구조에 대해 우리가 알아야 할 전부입니다. 많지는 않습니다. 그렇죠? 우리 애플리케이션의 주요 부분은 App.vue에서 프로그래밍됩니다. .vue 확장자는 파일을 단일 파일 vue 구성 요소로 식별합니다. 이것은 이제 우리가 자세히 살펴볼 Vue의 기능 중 하나입니다.
각 *.vue 파일은 , 및 선택적으로 3가지 유형의 블록으로 구성됩니다. 결과적으로 프로젝트를 관련 구성 요소로 나눌 수 있습니다. 구성 요소 내에서 해당 템플릿, 논리 및 스타일은 본질적으로 연결되어 있으며 실제로 이러한 요소를 결합하면 구성 요소가 더욱 응집력 있고 유지 관리가 더 쉬워집니다. 이제 Vue에서 블로그를 만들 준비가 되었습니다.
실제로 구현하려는 내용을 살펴보겠습니다. 페이지 상단에는 블로그 이름이 포함된 헤더가 있습니다. 왼쪽에는 게시물 제목을 표시하는 고정 사이드바가 있는데, 이는 목차와 같은 형태입니다. 페이지의 나머지 부분은 게시물 텍스트 자체가 표시되는 동적 블록으로 채워집니다.
1 단계 먼저 App.vue에서 불필요한 줄을 모두 제거해 보겠습니다. 그리고 우리의 요구 사항에 따라 템플릿을 다시 작성하겠습니다. Vue.js SPA
둘째, 메시지와 함께 배열에 배치할 데이터 속성이 있는 Vue 인스턴스를 생성합니다. 지금은 비어 있지만 곧 서버에서 받은 데이터를 배열 내부에 배치할 예정입니다.
첫 번째 호출 후에는 더 이상 루트 데이터 개체에 반응 속성을 추가할 수 없습니다. 따라서 Vue 인스턴스를 생성하기 전에 루트 수준에서 모든 반응형 속성을 선언하는 것이 좋습니다.
내보내기 기본값(data()(return(posts:)))
앱이 더 보기 좋게 보이도록 몇 가지 스타일을 추가할 수도 있습니다.
애플리케이션 코드는 github.com에서 호스팅됩니다. 애플리케이션의 개발을 단계별로 추적하려면 저장소를 복제하고 단계 번호별로 분기를 전환하는 것으로 충분합니다. 예를 들면 다음과 같습니다.
$ git 체크아웃 1단계
현재 탐색 모음에 표시할 항목이 전혀 없으므로 서버에서 데이터를 가져오겠습니다. 이를 위해 저는 사용하기 쉬운 HTTP 클라이언트인 Axios를 선택했습니다. Vue 리소스, 사용자 정의 가져오기, jQuery Ajax 등 원하는 방법을 사용할 수도 있습니다.
2단계 Axios 설치 $ npm install --save-dev axios
그런 다음 이를 App 구성 요소로 가져오고 서버에 요청하고 이를 게시물 속성에 할당하는 getAllPosts() 메서드를 정의합니다. Vue 인스턴스를 생성하고 데이터 액세스 설정을 지정한 후에 호출되는 Created() 후크에서 메서드를 호출합니다.
"axios"에서 axios 가져오기 내보내기 기본값( data () ( return ( 게시물: null, 엔드포인트: "https://jsonplaceholder.typicode.com/posts/", ) ),created() ( this.getAllPosts(); ) , 메소드: ( getAllPosts() ( axios.get(this.endpoint) .then(response => ( this.posts = response.data; )) .catch(error => ( console.log("------ 오류------"); console.log(error); )) ) ) )
이제 사이드바에 모든 게시물 제목을 표시해 보겠습니다.
((포스트.제목))
지금까지 게시물 제목만 표시했지만 아직 게시물 자체는 볼 수 없습니다. 이제 사이드바에서 선택한 제목에 따라 콘텐츠 섹션에 전체 게시물을 표시해야 합니다. 동시에 각 항목을 고유한 주소에서 사용할 수 있기를 바랍니다.
3단계 이를 위해 공식 Vue 라이브러리 vue-router를 사용합니다. 이름에서 알 수 있듯이 라이브러리를 사용하면 애플리케이션에 대한 라우팅을 구성할 수 있습니다.
라이브러리를 설치해 봅시다: $ npm install --save-dev vue-router
라우팅을 구성하기 위해 main.js 파일로 돌아가겠습니다. 여기서는 라우팅 설정을 정의하고 이를 Vue 인스턴스에 추가하겠습니다.
"vue"에서 Vue 가져오기 "vue-router"에서 Router 가져오기 "./App.vue"에서 앱 가져오기 "./comComponents/Post.vue"에서 Post 가져오기 "./comComponents/Hello.vue"에서 Hello 가져오기 Vue. use(Router) const router = new Router(( 경로: [ ( 경로: "/", 이름: "home", 구성요소: Hello, ), ( 경로: "/post/:id", 이름: "post", 구성요소: Post, props: true, ] )) new Vue(( el: "#app", render: h => h(App), router ))
라우팅 설정에서 해당 경로를 따라 렌더링을 일으키는 구성 요소를 지정했습니다. Post.vue 구성 요소만이 각 게시물 렌더링을 담당하므로 각 게시물에 대한 경로를 정의할 필요가 없으며 동적 경로만 정의하면 됩니다.
경로: "/post/:id"
이 경로에는 특정 게시물을 가리키는 동적 세그먼트:ID가 포함되어 있습니다. 또한 다음을 통해 Post 구성 요소에서 이 세그먼트에 액세스할 수 있습니다. this.$route.params.id. 그러나 구성 요소에서 $route를 사용하면 이를 경로에 하드와이어하게 되며 결과적으로 특정 URL에서만 사용할 수 있으므로 구성 요소의 유연성이 제한됩니다. 대신 우리는 옵션을 사용할 수 있습니다 소품그리고 그것을 설치하십시오 진실. 그 후 $route.params는 Post 구성 요소의 props 옵션과 연결됩니다.
이제 라우터를 만들었으므로 애플리케이션으로 돌아가서 템플릿에 몇 줄을 더 추가할 수 있습니다.
((게시물.ID)). ((글.제목))
여기에는 두 가지 구성요소가 있습니다. 뷰 라우터: 그리고 . 첫 번째는 라우팅 지원 애플리케이션에서 사용자 탐색을 활성화하기 위한 구성 요소입니다. 두 번째 구성 요소는 지정된 경로에 대해 일관된 구성 요소를 렌더링하는 기능 구성 요소입니다.
마지막 단계가 남아 있습니다. 게시물 항목의 내용을 표시해야 합니다.
4단계 Post.vue 파일로 이동하여 간단한 템플릿을 추가하겠습니다.
((글.제목)) ((포스트.본문))
((게시물.ID))
다음으로 이 구성요소에 대한 Vue 인스턴스 매개변수를 설정해야 합니다. 여기의 모든 내용은 모든 게시물 표시 설정과 동일합니다. 옵션을 선언하자 소품변화와 함께 ID, 이는 우리의 게시물 번호를 받게 됩니다. 다음으로 App.vue에서 이미 했던 것처럼 데이터 개체를 선언해 보겠습니다. "axios"에서 axios를 가져옵니다. 기본값 내보내기( props: ["id"], data() ( return ( post: null, 엔드포인트: "https://jsonplaceholder.typicode.com/posts/", ) ) )
그럼 방법을 설명드리겠습니다 getPost(), ID별로 하나의 게시물 항목만 수신하고 후크에서 호출합니다. 만들어진().
메소드: ( getPost(id) ( axios(this.endpoint + id) .then(response => ( this.post = response.data )) .catch(error => ( console.log(error) )) ) ), 생성됨() ( this.getPost(this.id); ),
거의 완료되었습니다. 지금 애플리케이션을 실행하면 URL이 변경되더라도 먼저 렌더링된 단일 게시물이 표시되는 것을 볼 수 있습니다. 요점은 서로 다른 게시물을 렌더링하기 위해 동일한 구성 요소가 있고 Vue는 불필요한 리소스 낭비로 인해 이를 다시 만들 필요가 없다는 것입니다. 이는 또한 구성 요소의 수명 주기 후크가 호출되지 않음을 의미합니다.
이 문제를 해결하려면 객체에 감시자를 설정하면 됩니다. $route.
보기: ( "$route"() ( this.getPost(this.id); ) )
이제 모든 것이 정상적으로 작동합니다. 프로덕션 버전을 얻으려면 다음 명령을 실행하십시오. npm 실행 빌드콘솔에서.
요약하자면 우리는 Vue를 사용하여 4단계로 간단한 단일 페이지 애플리케이션을 작성했습니다. 우리는 vue-cli를 사용하여 프로젝트를 시작하는 것이 얼마나 쉬운지 배웠습니다. 프로젝트를 더욱 유연하고 확장 가능하게 만드는 단일 파일 Vue 구성 요소의 개념을 다루었습니다. Axios를 사용하여 외부 API에서 데이터를 검색하는 방법을 배웠습니다. 그리고 vue-router를 사용하여 라우팅을 구성하는 방법을 살펴보았습니다. 물론 이것은 기본적인 지식이지만 Vue.js를 시작하고 고급 기능을 활용하는 데 도움이 되기를 바랍니다. 안녕하세요 여러분! 이 기사에서는 웹 개발에서 SPA가 무엇인지, 그리고 그 장단점이 무엇인지 이해할 것입니다.
설명 아마도 여러분 중 일부는 이미 SPA라는 약어를 들어보셨을 것입니다. 그러나 모든 사람이 그것이 무엇인지 아는 것은 아니므로 알아봅시다.
SPA(Single Page Application)는 한 페이지에서 실행되는 웹 애플리케이션입니다. 페이지가 처음 로드될 때 필요한 모든 javascript 및 css 파일을 로드한 다음 클라이언트와 서버 간의 모든 통신이 최소한으로 줄어듭니다. 저것들. 이 접근 방식을 사용하면 대부분의 사이트 작업이 클라이언트 측에서 수행되며, 서버에서 데이터를 가져와야 하는 경우 일반적으로 JSON을 사용하여 수행됩니다.
이 웹 사이트 생성 방법은 HTML5의 출현과 함께 비교적 최근에 등장했지만 이미 활발하게 추진력을 얻고 있습니다. 원칙적으로 이러한 웹 응용 프로그램은 일반 웹 사이트보다 훨씬 빠르게 작동하고 개발 시간이 많이 걸리지 않기 때문에 여기에는 놀라운 일이 없습니다. 다행스럽게도 이러한 유형의 매우 복잡한 사이트를 아주 간단하고 빠르게 만들 수 있는 프레임워크가 많이 있습니다. 현재로서는 React가 최고의 프레임워크로 간주됩니다. 경쟁사보다 더 많은 장점을 갖고 있으며, 배우고 사용하기도 쉽습니다. 좀 더 자세한 사용법을 알고 싶으시면 꼭 보시길 추천드립니다. 지금은 SPA의 장점을 살펴보겠습니다.
SPA의 장점 - 많은 수의 장치를 지원합니다. 표준 접근 방식과 달리 SPA 응용 프로그램은 데스크톱 컴퓨터와 모바일 장치 모두에서 동일하게 작동합니다. 이렇게 하면 하나의 애플리케이션을 생성할 수 있으며 속도가 느려지지 않고 강력하지 않은 장치에서도 완벽하게 작동하는지 확인할 수 있습니다.
- 강력한 UX. 이 접근 방식을 기반으로 하는 애플리케이션에서는 다양한 정보를 저장하고 사이트 표시 및 애니메이션을 관리하는 것이 훨씬 쉽습니다. 또한 작업 페이지가 하나뿐이므로 아름다운 사용자 인터페이스를 작성하는 것도 어렵지 않을 것입니다.
- 고성능. 일반 웹사이트에서 동일한 콘텐츠가 로딩되는 것을 보는 것은 매우 흔한 일입니다. 예를 들어 사이트 머리글, 바닥글, 메뉴 및 페이지마다 변경되지 않는 기타 요소는 매번 서버에서 로드됩니다. SPA 접근 방식을 사용하면 이러한 문제는 존재하지 않습니다. 콘텐츠는 필요에 따라 로드되므로 애플리케이션 속도가 크게 향상됩니다.
SPA에는 단점이 거의 없습니다. 주목할 만한 유일한 점은 이러한 애플리케이션의 개발이 매우 신중하게 수행되어야 한다는 것입니다. 예를 들어, 메모리 누수가 발생하면 애플리케이션이 우리가 원하는 것보다 훨씬 느리게 작동하기 시작할 수 있습니다. 그러나 이 모든 것은 개발자와 그의 기술에 달려 있으므로 고품질 응용 프로그램을 만들고 싶다면 비디오 과정 ""에 주목하는 것이 좋습니다. 이는 귀하도 강력하고 빠른 응용 프로그램을 만드는 방법을 배울 수 있도록 특별히 전문가에 의해 편집되었으며 인터넷에서 진정한 고품질 사이트의 수가 증가했습니다.
결론 그래서 오늘은 SPA(Single Page Application)가 무엇인지, 어떤 장점과 단점이 있는지 살펴보았습니다.
